前端三剑客之HTML入门教程

目录

1. 认识HTML标签

2. HTML文件基本结构

2.1 运行一个HTML文件

2.2 标签层次结构

3. HTML的常见标签

注释标签

标题标签：h1-h6

段落标签：p

换行标签：br

格式化标签

图片标签：img

超链接标签：a

表格标签

列表标签 

表单标签

form标签

input标签

label标签

select标签

textarea标签

无语义标签：div & span

4. Emment常用快捷键

5. HTML特殊字符

6. 小结

---

1. 认识HTML标签

HTML的代码是由“标签”构成的。

例如：

hello 

说明：

body为标签名，必须放在<>中

大部分标签都是成对出现，为开始标签，为结束标签

少数标签只有开始标签，称为单标签

开始标签与结束标签之间的内容为标签的内容，示例的内容为hello

开始标签中间可能会带有属性，id属性相当于给这个标签设置了一个唯一的标识符

例如：

 hello

2. HTML文件基本结构

    
        
    
    
        hello word
    

说明：

html标签是整个html文件的根标签（最顶层标签）

head标签中写页面的属性，示例中的title标签为标题

body标签中写的是页面上显示的内容

2.1 运行一个HTML文件

我们可以选在在idea中或者在vscode中创建一个html文件，利用“！+ Tab”键可以快速生成代码框架，如下所示：

细节解释：（了解即可，不必做过于深刻研究）

·  称为DTD（文档定义类型），描述当前文件是一个HTML5的文件

·  其中的long属性表示当前页面是一个“英文页面”

·   描述页面字符的编码方式，没有这行可能会导致中文乱码

· ，其中viewport指的是设备屏幕上能用来显示我们网页的那一块区域，后面的是在设置可视区和设备宽度等宽，并设置初始缩放为不缩放。

我们可以在body中写内容，然后运行，我这里用的是VScode，直接右键按下，如图所示：

运行结果：

2.2 标签层次结构

· 父子关系     ·兄弟关系

    
        
    
    
        hello word
    

说明：

head，body是html的子标签

title是head的子标签，head是title的父标签

head，body是兄弟标签 

3. HTML的常见标签

注释标签

注释不会显示在界面上，目的是提高代码的可读性

快捷键：ctrl + /  可以快速进行注释与取消注释

标题标签：h1-h6

有6个，从h1-h6，数字越大，则字体越小

    
h1
    
h2
    
h3
    
h4
    
h5
    
h6

段落标签：p

 
床前明月光
 
疑是地上霜

注意：

p标签之间存在一个空隙

当前的p标签描述的段落没有缩进（后面学习css的时候会学习）

html内容首尾处的换行，空格均无效

在html中文字之间输入的多个空格只相当于一个空格

html中直接输入换行不会换行，而是相当于一个空格

换行标签：br

br是一个单标签

是规范写法，不建议写成

    举头望明月
    

    低头思故乡

格式化标签

· 加粗：strong标签，b标签

· 倾斜：em标签，i标签

· 删除线：del标签，s标签

· 下划线：ins标签，u标签

strong加粗
b加粗
em倾斜
i倾斜
del删除线
s删除线
ins下划线
u下划线

使用css也可以完成类似效果，实际开发中以css方式为主

图片标签：img

img标签必须带有src属性，表示图片的路径

此时要把xxx.jpg这个图片文件放到html中的同级目录中

img标签的其他属性：

· alt：替换文本，当图片不能正确显示的时候，会显示一个替换的文字

· title：提示文本，鼠标放到图片上，就会有提示

· width/height：控制宽度高度，高度和宽度一般改一个就可以，另外一个会等比例缩放

· border：边框，参数是宽度的像素，一般用css'来设定

例如：

注意：

多个属性之间用空格间隔

属性不分先后

属性使用键值对的格式来表示

超链接标签：a

href：必须具备，表示点击后就会跳转到哪个页面

target：打开方式，默认是_self,_blank会用新的标签页打开

例：

 百度

点击就会跳转到百度页面

· 空链接：使用#在href中占位

 空连接

· 下载链接：href对应的路径是一个文件（可以使用zip文件）

 下载文件

· 网页元素链接：可以给图片等任何元素添加链接

· 锚点链接：可以快速定位到页面中的某个位置

    第一集
    第二集
    第三集
    

        111

        222
    
    

        333

        444
    
    

        555

        666
    

禁止a标签跳转：  或者 

表格标签

· table标签：表示整个表格

· tr：表示表格的一行b

· td：表示一个单元格

· th：表示表头单元格，会居中加粗

· thread：表格的头部区域（注意和th区分，范围比th大）

· tboday：表格的主体区域

table包含tr，tr包含了td或者th

表格标签有一些属性，可以用于设置大小边框等，这些属性要放到table标签中

align：表格相对于周围元素的对齐方式（不是内部元素的对齐方式）

border：表示边框，1表示有边框（数字越大，边框越粗），“ ” 表示没有边框

cellpadding：内容距离边框的距离，默认1像素

cellspacing：单元格之间的距离，默认为2像素

width/height：设置尺寸

例：

 

        

            
姓名
            
性别
            
年龄
        
        

            
小兰
            
女
            
18
        
        

            
小花
            
女
            
19
        
    

列表标签 

主要用来布局

· 无序列表：ul ，li

· 有序列表：ol ，li

· 自定义列表，dl（总标签），dt（小标题），dd（围绕标题来说明）

注意：

元素之间是并列关系

ul，ol标签中，只能放li标签，dl标签中只能放dt，dd

li中可以放其他标签

示例：

 
无序列表
    

        
苹果
        
香蕉
        
橘子
    
    
有序列表
    

        
小学
        
中学
        
大学
    
    
自定义列表
    

        
蔬菜：
        
豆腐
        
菠菜
        
西红柿
    

表单标签

表单是让用户输入信息的重要途经

分成两个部分：

表单域：包含表单元素的区域，重点是form标签

表单控件：输入框，提交按钮，重点是input标签

form标签

 

        ...[form的内容]
 

描述了要把数据按照什么格式，提交到哪个页面中，关于form需要结合服务器，网络编程，来进一步理解。

input标签

各种输入的控件，单行文本框，单选框，复选框

· type，取值种类：button，checkbox，text，file，image，password，password，radio等

· name：给input起名字，对于单选框按钮，具有相同的name才能多选一

· value：input中的默认值

· checked：默认被选中（用于单选按钮，多选按钮）

· maxlength：设定最大长度

1. 文本框

2. 密码框

3. 单选框

男
女

4. 复选框

吃饭
睡觉
打球
跑步

5. 普通按钮

6. 提交按钮

7. 清空按钮

说明：当文本框输入内容时，点击清空即可清空文本框中输入的内容

8. 选择文件

说明：点击选择文件，即可从本地选择文件

label标签

搭配input使用，点击label也能选中对应的单选/复选框，能够提升用户体验

· for属性：指定当前label和哪个相同id的input标签对应

男

女

说明：这里点击汉字也可以选中，label标签就是用来实现这个功能的

select标签

下拉菜单

option中定义selected="selected"表示默认选中

     
        ---请选择从哪里来---
        北京
        上海
        厦门
     

textarea标签

           众鸟高飞尽
        孤云独去闲
        相看两不厌
   

注意：文本域中的内容，就是默认内容，注意空格也会有影响

rows和cols代表行和列

无语义标签：div & span

用于网页布局

· div标签，独占一行，是一个大盒子

· span标签，不独占一行 ，是一个小盒子

    

        猴哥
        八戒
        沙僧
    
    

        汽车
        火车
        地铁
    
    

        语文
        数学
        英语
    

4. Emment常用快捷键

· 快捷输入标签：input[tab]

· 快捷输入多个标签：div3[tab]

· 标签带id：div#sex[tab]

· 标签带类名：div.sex[tab]

· 标签带子元素：ul>li*3[tab]

· 标签带兄弟元素：span+span

· 标签带内容：div{hello}

· 标签带内容带编号：div{$.hello}

5. HTML特殊字符

有些特殊的字符在html文件中是不能直接来表示的，例：

空格： 

小于号：<

大于号：>

按位与：&

  
 
  
<
  
>
  
&

6. 小结

HTML只是描述了页面的骨架结构

使用css可以针对页面进一步美化