HTML常用标签

一、排版标签

1、标题标签
    <hn></hn>，n是由文字来表示的，取值范围是1~6，1代表一级标题，6代表6级标题
            h1~h6
            <h1>helle</h1>
            <h2>helle</h2>
            <h3>helle</h3>
            <h4>helle</h4>
            <h5>helle</h5>
            <h6>helle</h6>
            <h7>helle</h7>
2、横线标签
    <hr/>,水平线标签，该标签可以通过属性分隔线的宽度、粗细、以及颜色
    <hr width="50%" size="15px" color="blur"></hr>

        前端长度表示的方法：
            1.像素的方式，单位是px
                分辨率:1280 * 960 表示水平方向有1280个像素点，垂直方向有960个像素点
            2.百分比的方式，占父标签的百分之多少
        color：颜色的表示方法：
            1.英文表示法，需要写一个颜色的英语单词
            2.十六进制的表示【#FFF3EA】，开发中一般使用的都是16进制
            3.RGB的方式，【0-255,0-255,0-255】

3、段落标签和换行标签
    <p></p>每一个p标签就是一个段落
    <p>
        这里就随便写点东西。这里就随便写点东西。这里就随便<br/>写点东西。这里就随便写点东西。这里就随便写点东西。这里就随便写点东西。
    </p>
    <p>
        这里就随便写点东西。这里就随便写点东西。这里就随便写点东西。这里就随便写点东西。这里就随便写点东西。这里就随便写点东西。
    </p>
4、文字标签
    文字标签，【font】，这个标签已经过时了，我们之后如果要使用文字标签的话，基本使用的是css样式来对文字进行修饰的，比如文字颜色，文字字体，文字样式...
    虽然过时，但我们依然可以使用，我们可以通过<font/>标签里面的一些属性对文字进行简单的修饰
    属性color，可以设置font标签里面的文字颜色
    属性size，可以设置font标签里面的文字大小，最大可以设置7号
    属性face，可以设置font标签里面的为你字体
5、粗体标签
    <b>内容</b>
    一般也会使用<strong>我也是粗体</strong>
6、斜体标签
    <i>我是斜体</i>

二、图片标签

图片的格式有哪些？
    .jpg、
    .png、
    .jpeg、
    .gif
在html标签里面，我们使用的图片标签【img】，其实就是代表的image单词过来的

    使用img标签显示图片，需要用到一些属性来规则图片
        1、必须的属性，【src】表示要显示的图片的路径
            路径：
                    相对路径：每次都是从.html所在的文件的文件夹开始查找
                    同级：就是【图片资源】和【img标签的html文件】在同一个文件夹下，ps：src="a.png"
                    上级：就是【图片资源】所在的文件夹在【img标签的html文件】所在的文件夹在同一个文件夹下,ps="../images/a.png"
                绝对路径：一般不会使用
        2、尺寸属性，
            width属性表示图片的宽度
            height属性表示图片的高度
        3、其他属性
            alt属性，表示当前图片在加载的时候失败了，提示的文字信息
            title，表示当鼠标悬停在图片上的时候显示的文字信息
        <img src="../images/a.png" width="300px" alt="这是图片" title="命中带苦" />

三、链接标签

        超链接标签，超链接
            作用：就是用于控制页面于页面【服务器资源】之间跳转的
            a标签，超链接，点击能够实现跳转的链接
                属性href就是用来指定跳转到的路径
                    1.可以实本项目的资源
                    2.可以实服务器的资源
                属性target，指定新页面的打开方式
                    _self，表示在本页面的打开方式
                    -blank，表示在空白页面打开
                如果href属性值设置成“#”的话，表示假链接
                a标签修饰的文字会在文字下方加上下划线，表示可点击，前提是需要加上href属性

        <a href="http://www.baidu.com">跳转到百度</a>

四、列表标签

        列表标签
            作用：一般以列表的形式展示内容
            无序列表
                ul标签,使用的最广泛的，
                    type属性，表示列表的类型
                        属性值，circle空心圆，square实心圆
            有序列表
                ol标签
                    type属性，表示的是列表的类型
                        属性值：阿拉伯数字【1】、小写英文字母【a】、大写英文字母【A】，小写罗马字母【i】、大写罗马字母【I】
    <ul type="square">
        <li>随便写点</li>
        <li>随便写点</li>
        <li>随便写点</li>
    </ul>
    <hr/>
    <ol type="I">
        <li>随便写点</li>
        <li>随便写点</li>
        <li>随便写点</li>
    </ol>

五、表格标签

【table】来定义表格标签
    里面都时一个个的单元格组成
    单元格又是由行和列组成的
    子标签：
    行：每个表里有若干行<tr></tr>
        单元格：每行被分割为若干个单元格<td></td>

        就形成了单元格，单元格里有【td】标签中可以存放哪些标签：文本、图片、段落、表单、水平线、表格等
    表格标签的属性
        标签名称            标签描述            常用属性            属性描述                属性取值
        table                      表格               border                     边框                   1：有边框 0：无边框
                                                             width                      表格的宽                尺寸
                                                             align                      表格的水平高度           left、center、right
                                                             bgcolor               表格的背景颜色           合法的颜色
                                                             cellspacing        单元格之间的间隔          尺寸
        tr                           行                    align                  行里面内容的水平位置      left、center、right
        td/th                      单元格             align               单元格里的内容的水平位置   left、center、right
                                                             colspan             跨列合并单元格            数字值
                                                             rowspan             跨行合并单元格            数字值

六、表单标签

        input标签
            <input></input>、<input/>
            ps:<input type="xxx"/>
                1.text(默认类型)文本框
                2.password 密码框
                    密码框输入的数据全部默认都是小圆点
                3.radio 单选框
                    【注意】
                        1、需要有一个共同的属性name，只有当name的属性值相同的单选框，才是同一组单选框实现的单选效果
                        2、一般会给每一个单选框提供value属性，指定其被选中后提交的值
                        3、checked属性，可以指定默认值
                        4.checkbox复选框
                    【注意】
                        1.同一组复选框中，也应该具备相同的name属性值
                        2、一般会给每一个单选框提供value属性，指定其被选中后提交的值
                        3、checked属性，可以指定默认值
                        5.file 文件选择框
                        6.data 日期选择框
                        7.hidden 隐藏域
                        8.submit 提交按钮：内置了提交表单的功能
                        9.button 普通按钮，没有内置任何功能，我们需要再学习了JS之后，再给其绑定点击事件
                        10.reset 重置按钮，内置了重置表单数据的功能
                        11.image 图片提交按钮 src的属性，用于执行图片的路径