Lesson1：HTML

目录

一、HTML结构

二、HTML文件基本结构

 三、快速生成代码框架

与Java相比，HTML对于语法的要求相对来说更宽松。

  四、HTML的常见标签

4.1 注释标签

4.2 标题标签h1-h6

 4.3 段落标签P

4.4 换行标签br

4.5 格式化标签

 4.6 图片标签

4.7 超链接标签a

​4.7.1 外部链接

 4.7.2 内部链接

4.7.3 空链接

4.7.4 网页元素链接

4.7.5 瞄点链接

4.7.6 下载链接

4.8 表格标签

​4.9 列表标签

4.10 form标签

4.11 input标签

4.12 label标签

4.13 select标签

4.14 textarea标签

4.15 无语义标签div和span

五、HTML特殊字符

六、常见的快捷键

---

一、HTML结构

标签中添加的属性用空格分割；

属性的名字和属性的值之间用=来分割；

属性的名字不用加引号，值需要加引号。

二、HTML文件基本结构

 

 三、快速生成代码框架

与Java相比，HTML对于语法的要求相对来说更宽松。

  四、HTML的常见标签

4.1 注释标签

 

4.2 标题标签h1-h6

 4.3 段落标签P

相邻P标签之间存在一个空隙。

P标签描述的段落，没有缩进，根据浏览器的宽度决定排版。

html内容中首尾处的换行、空格均无效，文字中多个空格相当于一个空格

html中直接输入换行不会换行，只是一个空格。

4.4 换行标签br

4.5 格式化标签

 4.6 图片标签

（1）src属性

（2）alt属性

（3）title属性

 

（4）width、height属性

（5）border属性

 

4.7 超链接标签a

4.7.1 外部链接

href引用其他网站的地址。

 4.7.2 内部链接

网页内部页面之间的链接，写相对路径即可。

4.7.3 空链接

使用#在href中占位。

 

4.7.4 网页元素链接

可以给图片等元素添加链接

4.7.5 瞄点链接

快速定位到页面的某个位置。

4.7.6 下载链接

href对应的路径是一个文件，可以使用zip文件。

 

4.8 表格标签

4.9 列表标签

 

4.10 form标签

让页面和服务器交互。在JS中介绍。

4.11 input标签

各种输入控件，单行文本框、按钮、单选框、复选框

type(必须有)：可以取值为button、checkbox、text等等。

 name：给input起了个名字。尤其是对于单选按钮，具有相同的name才能多选一。

value：input中的默认值。

checked：默认被选中。用于单选按钮和多选按钮。

maxlength：设定最大长度。

4.12 label标签

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

for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应. (此时点击才是有用的)

4.13 select标签

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

4.14 textarea标签

 

 4.15 无语义标签div和span

div 标签, division 的缩写, 含义是 分割

span 标签, 含义是跨度

就是两个盒子. 用于网页布局

div 是独占一行的, 是一个大盒子.

span 不独占一行, 是一个小盒子

五、HTML特殊字符

有些特殊的字符在html文件中是不能直接表示的。

空格：&nbsp

小于号：&lt

大于号：&gt

按位与：&amp

六、常见的快捷键

快速输入标签：输入标签 按tap

快速输入多个标签：div*3  

标签带id：div#name

标签带类名：标签.类名

标签带子元素：ul>li*3

标签带兄弟元素：span+span

标签带内容(带编号)：div{&.h}