网页的骨架——html

目录

1.基础标签

2.html5的语义化标签

3.html的标准属性

4.html快速生成

---

1.基础标签

html：根标签
head：头标签
body： 身体标签

h1-h6：1-6级标题，铺满一行，行级元素，有上下行距；
div：块标签，铺满多行
p：段落，有上下行距，铺满一行，行级元素
span：隔离标签，行内元素
br：强制换行
hr：水平分割线

文本样式
b：粗体
strong：粗体
i：斜体
em：斜体
u：下划线
del：删除线
sup：上标
sub：下标

列表样式：
ul：无序列表，样式与有序列表一致，只不过不是序号
ol：有序列表，内部使用多个li，有序号，铺满一行，有上下行距，左侧有内补
li：列表项目，一般不单独存在，铺满一行
dl：自定义列表
dt：自定义列表项
dd：自定义列表项目说明

table：表外框
        tr：行
        th：表头
        td：普通单元格
标签属性：在开始标签中对标签进行修饰
table属性
        border：边框
        cellspacing：单元格间距
        cellpadding：单元格内补
        width：宽度
        align：对齐
td属性
        colspan：合并列
        rowspan：合并行

1.a超级链接
        href：链接地址
        支持外部服务地址
        支持本地服务地址
        target
                _blank：新空白页标签打开
                _self：默认当前页标签打开
        锚点：href要以#开头内容和目标元素身上的id属性一致
2.img：图片
        src：图片地址，本地图片，本地地址
        alt：图片加载失败显示信息
3.audio：音频
        src：音频地址，网络地址，本地地址
        controls：控件
        一般不会使用默认控件
        需要自己绘制控件皮肤，所有浏览器表现一致
        通过js交互完成控件
4.video：视频
        src：视频地址，网络地址，本地地址
        controls： 控件

iframe：嵌入其他页面
        网络地址
        本地地址
        src：地址路径
        第一次请求原始页面 包含iframe地址，第二次请求iframe地址

表单标签：可以将用户输入的数据提交到服务器
表单域：form
action：服务器地址，默认当前地址
method：提交方法，默认get
get：参数是以?key=value&key=value..的形式拼接
测试地址：http://httpbin.org/get
post：参数是以表单数据进行提交
测试地址：http://httpbin.org/post

表单标签：input，一般配合table，lalbel的for要和input的 id 一致
type：
        text：文本
        password：密码
        submit：提交
        reset：重置
        radio：单选
        checkbox：多选
        color：颜色
        file：文件
select：下拉选项，name写在select上，结合option，value写在option上，带有select默认选中
textarea：多行输入框，可以更改大小，需要提交到服务器的表单标签一定要有name
input的value就是需要提交给服务器的值，当type等于text，passwd之类的可输入内容，不需要写value，radio,checkbox需要写value
表单按钮：input
        submit：提交
        reset：重置
input属性
        placeholder：提示信息
        required：必填项目
        checked：默认选中
        select：下拉默认选中
隐藏域：看不见的也会提交到服务器中，type为hidden
        name：csrf_token
        value：口令

2.html5的语义化标签

        就是div，只是换了个名字
header：头部
nav：导航栏
main：主体
section：区域
article：文章
aside：侧边栏
footer：底部栏

3.html的标准属性

id：单个html文件内部一定唯一
class：一个标签可以有多个类名，多个类名可以使用空格隔开，一个类名可以用于多个标签
style：样式
{key:value;key:value}
title：鼠标划入提示信息

4.html快速生成

>：嵌套
*：重复
+：拼接
{}：内容
$：出现在{}中代表数字
( )：分组，不能出现在最后一个
lorem：随机段落内容
lorem5：随机5个单词
lorem5-10：随机5-10个单词