前端学习笔记01--HTML快速了解

目录

HTML

1.1 HTTP/HTTPS

1.2 HTML简介

1.2.1 标记语言

1.2.2 标签分类

1.2.3 标签属性

1.2.4 样式

1.3 常用标签

1.3.1 文章段落

1.3.2 字体

1.3.3 超链接

1.3.4 图片、视频

1.3.5 html基本结构

1.3.6 列表

1.3.7 表格

1.3.8 表单

1.3.9 CSS布局标签

---

HTML

前端三剑客：HTML--结构、CSS--修饰、JS--行为(java script)

W3C--万维网联盟：制定前端的技术标准  HTML5--ES6标准

HyperText Markup Language ：超 文本 标记 语言 --超链接、文本、标签==组织页面中的内容

 

1.1 HTTP/HTTPS

HTTP--基于请求/响应的、无状态的、安全的、 超文本传输协议。

HTTPS--加密的超文本传输协议。

 

1.2 HTML简介

1.2.1 标记语言

XML--自定义标记语言--可自定义标记

HTML--超文本标记语言--标记已定义，具有特殊功能。超--指超链接。

 

1.2.2 标签分类

按照写法：

双标签：有头有尾 <标签名> 可以嵌套其他标签 

单标签：头即是尾 <标签名/>

显示方式：

块级元素：一个元素独占一行。从上往下排列。

行级元素：从左向右排列，一行显示不了，才会换行。

可以相互转化，通过设置CSS的display属性。

 

1.2.3 标签属性

 

1.2.4 样式

网页的样式一般使用CSS文件定义

 

1.3 常用标签

1.3.1 文章段落

标题 h1-h6

段落 p

换行 br

水平分隔线 hr

1.3.2 字体

--通过CSS控制

字体 font

加粗 b

强调文本 strong  em

斜体 i

下标 sub

上标 sup

 

1.3.3 超链接

a 页面跳转

显示文本

a 用作锚点

  1）href="#id"  //填写跳转位置的id属性

  2）href="#name" //填写跳转位置的name属性

1.3.4 图片、视频

img  

1.3.5 html基本结构

1.3.6 列表

1）有序列表

     

     

2）无序列表--并列内容

     

     

3）自定义列表

     

标题

内容

     

标题

内容

1.3.7 表格

       

     

列标题 与 表格体  --可以省略

     colspan="number" 、 rowspan="number" ------列、行合并，number--合并的列、行数

       

  tr--一行

           

 

     

       

  tr--一行

           

 

     

表格标题

标题	标题
数据	数据

 

1.3.8 表单

post:将表单数据作为一个数据块进行整体提交--对提交的数据量无大小限制,速度慢
       get:默认值,将表单数据追加在URL后提交--对提交的数据量有最大限制,速度快

      需要显示的内容  == input的属性：placeholder

     

   

      单选
                    显示显示
              
            

     大文本

 

1.3.9 CSS布局标签

 

1.4 实例

  


	
		
		
		
		
	
	
		这是一个页面
		
		
段落与换行
		
		
第一段落
		
第二段落
		
		
自动换行
自动换行

		
		
文本属性
		
		
		
		春晓
唐·孟浩然

		春眠不觉晓
处处闻啼鸟
夜来风雨声
花落知多少

		
		
标题类型：
		
h1标题
		
h2标题
		
h3标题
		
h4标题
		
h5标题
		
h6标题
		
		
HTML中的空格问题
		
		
		HTML中的空格：   前面有三个空格。
		
  
		
		
		锚点：锚点定义处
		
		
文本格式化
		这是普通文本

		这是加粗文本，加粗标签b
		这是斜体文本，斜体标签i
		下标sub  O2
		
		
超链接
		百度,在原页面打开 
		

		百度,在新页面打开 
		
锚点
 
		

















		

















		

















		回到锚点
		
		
图片
		
		设置图片宽、高，如果只设置一个值，则按照宽高比进行缩放

		
		
		
视频
		
		
		
表格
		

学号	学生姓名	班级信息	操作
A001	张三	A班	删除 修改
A002	李四	B班	删除 修改

表格-合并行、合并列

AAA BBB		CCC CCC
AAA	BBB

表单

班级编号：
班级编号：
班级名称：

表单:Input演示

注册页面
用户名称:

用户密码:

用户性别:男 女

用户爱好:读书 运动 旅游

用户头像:

用户地址: 北京 上海 山东 济南 青岛 市南 市北 崂山

用户简介:


用户邮箱:

用户年龄:

用户生日:

爱好颜色:

Div 和 Span

aaa

bbb

ccc

AAA BBB CCC

列表

无序列表: 无序号

• AAA
• BBB
• CCC

有序列表: 有序号

1. AAA
2. BBB
3. CCC