尚硅谷web前端学习——HTML

HTML

一、块和行内元素

1、块元素（block element):网页中一般用块元素来布局
2、行内元素:用来包裹文字，嵌套于块元素中而不用于行内元素间嵌套
3、块元素独占一行，行内元素不换行
4、p标签中不能放任何块元素
e.g. < p > <h 1> 嘿嘿 </h 1> </ p> 注：这样的写法是错误的，但可以运行，因为浏览器会帮你修正这些错误

二、meta标签——设置元数据

1、meta主要设置网页中的一些元数据（元数据不是给用户看的）

2、主要属性：
①charset指定字符集 如：utf-8等等
②name 指定元数据的名称，使用name属性来定义一个HTML的描述、关键词、作者等
可选值：
content 指定数据内容
Keyword 网站的关键字，用于搜索引擎进行搜索
description 指定网站描述，会显示在搜索结果中
3、http-equiv = “refresh” content=‘3’ ; url =’’ 将页面重定向到另一个网站

三、语义化标签

1、标题标签： h1-h6 重要性递减 ，一般情况下只有一个H1,块元素
2、p标签：表示页面中的一个段落，块元素 p 元素会自动在其前后创建一些空白。

3、hgroup标签： 用来给标签分组，将一组相关的标签放在一起
4、em标签：表示语音语调加重,（斜体） 行内元素

5、strong标签：表示强调的重要内容(加粗) 行内元素
6、blockqute标签：表示长引用，段首缩进，块元素

q标签：表示短引用，加引号 行内元素

7、br标签：表示页面中换行
8、结构化语义标签：
①header 头标签
②main 表网页的主体部分，一个页面中只有一个
③footer表示页面的底部
④nav 表示页面中的导航条
⑤aside 表示和主体相关的其他内容（侧边栏）
⑥article 表示一个独立的文章
⑦section 表示一个独立的区块，当上面都不可用时，用section
⑧div标签：表示区块，没有语义，主要布局元素
⑨span标签：行内元素，一般用于网页中选中文字

四、列表(list)

1、三种类型：
无序列表（ul):使用li来表示列表项（list-item）

有序列表(ol):与无序相似

定义列表（dl):使用dt来表示定义内容，使用dd来对内容进行解释说明
2、列表之间可以相互嵌套

五、超链接（a标签）——行内元素

1、作用：从一个界面跳转到其他界面或当前界面的其他位置
2、在超链接中可以嵌套除了a标签本身外的任何元素，
3、属性：

• href指定跳转的目标路径
• target指定超链接打开的位置 （"_self"默认当前页面、"_blank"新建界面打开）
• 将href属性设置为#，点击链接后，页面跳转至顶部
• id属性（唯一不重复）：区分大小写，字母开头
• 将href属性设为“#目标元素的id属性值”跳转到页面指定位置
• 在开发中可以用#作为占位符，但是点击仍会跳转顶部，因此设为’javascript:;’
  

六、图片标签(img)

1、替换元素：介于行内元素和块元素之间，具有两种元素的特点
2、属性：

• src外部图片的路径（相对路径/绝对路径)
• alt图片描述，默认不显示，部分浏览器在图片无法加载时显示，搜索引擎根据alt内容来识别图片
• width,height指定图片的宽、高（单位是像素px)
  

七、内联框架（iframe标签）——双标签

1、作用：向当前页面引入一个其他的页面
2、属性：

• src指定要引入的网页的路径

• width,height设定框架的宽、高

• frame border 指定内联框架的边框
  
  八、音频播放（audio和video标签)
  
  1、audio标签：向页面引入一个外部音频文件
  2、音视频文件引入时，默认情况时不允许用户自己控制播放停止
  3、属性：

• src引入文件路径

• controls是否允许用户控制播放

• autoplay音频文件，自动播放（目前大多数都禁止自动播放了）

• loop是否循环播放

4、可以通过< source src=“外部路径”> 来解决兼容问题
可以设置不支持时显示文本，可指定多个source，但优先使用第一个