常见的HTML标签

1.h1~h6 标题

• h1代表一级标题
• h2~h6依次递减

2. p 段落

• 表示大段文字，用标签p包括

3. a 链接，链接到一个地址（包含各种属性）

image.png

href属性：必备属性，表示链接的地址。href="#"锚点,页面不跳转，也不刷新；href="#about"当前页面定位到id=about的位置；href="/getcourse"中/代表根路径
target属性：_blank 表示在新窗口打开
title属性：表示鼠标指到此位置出现的文字

举例

image.png

4.图片（只闭合标签，最后不需要加 /）
: a.png部分可以是图片链接，alt部分可理解为备注（图裂时的图片字样）

5.div：语义为“一大块”，用于给页面划分区块，让结构更清晰

...
...
...

为了便于对某个版块进行样式等的操作，需设置标签来找到对应的部分，有两种：id和class
id属性：给某个元素起一个独一无二的名字，直接注明这个板块是做什么的
class属性：表示一类，不同的东西可以都标上class，那么操作时是对这一类的class标记的目标做改变

6.ul li

• ul: unsort list 无序列表
• 用于表示并列的内容
• ul的直接子元素是li（ul的下面不可以是段落p或其他！）
• 可以嵌套

  
首页
  
关于
  

    更多
    

      
联系
      
地址
    
  

举例：一个网页的导航栏，含有首页、关于、更多的标签，这些都是并列的；联系、地址作为更多的二级菜单，可嵌套

7.ol li:ol: order list 有序序列表 用于表示带步骤或者编号的并列内容 ol的直接子元素只能是li 可以嵌套
举例:

把大象关到冰箱的步骤

  
把大象变小
  
打开冰箱
  
把大象塞进去

image.png

图中的aaa、bbb、ccc之间无明显顺序，倾向于使用无序列表，而后面的装大象存在明显步骤，倾向于使用有序

8.dl dt dd：用于展示一系列 “标题:内容... ”的场景

  
商品名称:
  
青花瓷
  
特征:
  
白色
  
圆口
  
商品介绍
  
这是一个年代久远的瓷器，很贵，易碎

image.png

dl：表单
dt：title 标题
dd：discription 描述

9.button：按钮
点我

image.png

10.strong em span(重要性存在区别)

• em 需要强调一下
• strong 很重要、强调性更强

优惠 100 元
小谷 2 岁了

举例

image.png

图中的span标签可后期直接被css操作，改变样式，而不需对段落进行操作

11.iframe：用于嵌入一个页面 注意跨域操作问题
举例

W3Cschool.cc

image.png

点击链接后的效果

image.png

注：

• 跨域问题，若iframe中链接与当前页面的域名不同，只能对iframe中的链接作展示，无法使用js进行操作。
• iframe的作用，举例，一个网页上有个表单，可通过js获取到这个iframe，进行引用，操作。

12.table：用于展示表格，不要用来做布局 thead tbody tfoot可省略，浏览器会自动添加 border-collapse: collapse;用于合并边框

举例

  

    

      
姓名
      
年纪
    
  
  

    

      
姓名
      
年纪
    
    

      
小明
      
18
    
    

      
小花
      
20
    
  
  
  

image.png

tr：一行，table roll
td：一列
th：标题

:网页的所有内容都在这个标签内
:说明当前页面的语言类型，zh为中文，包含简体和繁体。有时打开网页提示：“当前页面为英文，是否翻译为中文”，浏览器能识别出当前页面语言内容，就是依靠这个标签
:这其中的内容与页面内容无关

meta标签

• ：charset说明当前网页编码方式，如果不说明，浏览器自动猜测编码方式，如果没猜对，会出现乱码。页面保存的是什么编码方式，charset就指明对应的编码方式，以免出现乱码。
• :对于双核浏览器，如果是IE，用最新的版本渲染，如果是chrome，就用极速内核渲染
• 让页面在移动端展示比较合理
  使用此代码
  
  image.png
  
  未使用此代码
  
  image.png

注意点

• 标签属性全小写
• 标签要闭合、自闭合标签可以省略 /
• 标题里不能有段落，段落里不能有标题

块级元素 VS 行内元素

image.png

image.png

直观区别：块级元素占据一行，行内元素只是其中的一小部分