HTML基本标签

换行

横线

a链接，链到一个地址

饥人谷.com
饥人谷.com
# 表示不跳转也不刷新
饥人谷.com
#锚点 定位 点击时跳转到id为about的内容上
饥人谷.com
# ／代表根路径

target: 打开页面方式
_self： 默认，在当前选项卡打开，替换当前页面
_blank：新的选项卡打开
_parent：在父框架中打开
_top: 在最顶层打开
framename

img 展示一张图片

属性:
1.src：图片地址
2.alt： 图片因为网络等原因未成功加载时候的显示文案内容
3.width/height：可以是像素值或者相对于父容器的百分比，两个属性仅设置一个，另外一个值会按相应等比缩放
alt的作用：
1.当图片地址出问题 图片展示不出来时，页面上就展示一段文字
2.对于视力有问题的残障人士，alt帮助理解
3.搜索引擎优化

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

...
...
...

ul li
ul: unsort list 无序列表
用于表示并列的内容
ul的直接子元素是li
可以嵌套

 

  
首页
  
关于
  

    更多
    

      
联系
      
地址
    
  

属性：type（不推荐使用，使用css）
1.disc：实心原点
2.square：方块
3.circle：空心圆圈

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

把大象关到冰箱的步骤

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

属性:
1.start：规定起始值，默认1
2.type：1、A、a、I、i，默认是数字
3.reversed：降序（h5新加）

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

 

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

button按钮

点我

strong em mark

#mark 几乎和内容无关，就是为了标示（匹配搜索项，拼写错误等）
#strong 表示强调标签文本内容，不改变其含义 标签的内容表现为加粗
#em 表示感情上的强调，增强了语气 标签的内容表现为斜体
Text
Text
Text

段落p和块div

Text
Text
div就是普通的块标签，多用于布局；p是语义化的段落标签，用于文章分段
div默认没有边距，p标签为了表示文章分段，有默认的间距

span

Text
 行内书写 使用  来组合行内元素，以便通过样式来格式化它们

iframe
用于嵌入一个页面
注意跨域操作问题(例如iframe的地址和当前的域名是同一个域下的另一个页面 可以用js去获取元素 进行操作 ，否则只能展示页面）

W3Cschool.cc

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

  

    
姓名
    
年纪
  
  

    
小明
    
18
  
  

    
小花
    
20
  

table属性
border：边框
cellpadding：td的内边距
cellspacing：td的外边距
width：table宽度

td属性
align：水平对其方式
valign：垂直对齐方式
width：宽度，默认自动分布

注意点

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