HTML标签day2

HTML标签

1：标题标签

    h1 - h6
    注：h1 - h6 不能互相嵌套

2：字体加粗：

	 <b></b>    ->   H5里面不被推荐使用
	 <strong></strong>   ->  表示着重音

3：字体的倾斜：

    <i></i>
    <em></em>   表示着重音

4：下划线标签

    <u></u>

5：强制换行符

    <br>
    说明：浏览器只要遇到br，把后面的内容放在下一行显示。

6：水平线

    <hr>
    （不常用：后期线条都是用css边框实现）

7：上标与下标

    <sup></sup>
    <sub></sub>

8：字符标签

    <span></span>
    表示一个字符或者是一小段文本

9：段落标签：

    <p></p>
    注：p标签里面不能嵌套h1 - h6

10：常用的转义字符

    不换行的空格     
    左右尖角号      >    <
    网站的备案图标  ©

11：div

    划分网页区域：
    每一个div就是一个版块

12：列表

无序列表

    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    注：
        1：所有的列表符号都需要清除
        2：应用： 新闻条、网页主导航条

有序列表

        <ol>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>

        注：
            列表符号可以通过type属性更改：属性值  a  A   i  I
            制定开始的序号  start  属性值必须是数字，表示从第几个开始

自定义列表

        <dl>
            <dt>名词</dt>
            <dd>对名词的解释</dd>
        </dl>

13：超链接：

    <a></a>
        属性：
            href=""  跳转目标地址
            target=""   是否弹出新窗口打开连接
                属性值：_blank    _self (默认值)

            title=""  提示信息 （大部标签都能支持title属性）
    空连接：
        <a href="#">空连接</a>
    如果用a模拟按钮的时候，a是可以绑定一些其他的功能
        <a href="javascript:void(0);"></a>
    默认样式：字体是蓝色、点击的时候是红色、点击过后是紫色、下划线
    拓展：
        a里面属性     rel="nofollow"
        自己的网站有其他网站的连接，可以再其他网址a上面 添加rel="nofollow"防止权重外流。
        
        网站排名的PR值：
            a 跳转 到 B ，a给b投了一票。

14：图片

    网页中图片的展示形式：
        1：导入的图片  html
        2：背景图      css
    图片的导入
        <img>
            html属性：
                src="路径"   图片的路径
                width=""     图片的宽
                height=""    图片的高
                border=" "   图片的边框

                alt=""
                title=""

        alt属性的作用：
            1：当图片加载不出来用alt里面的文本替换图片
            2：alt里面的文本小于100个字符
            3：alt属性是img标签里面必须的属性，如果没有文本空着即可
            4：搜索引擎是检索不到图片上面的文字，alt就是做优化。

        title属性作用：
            1：title属性不是必须的
            2：增加用户体验，鼠标放在图片上面有提示信息。

    相对路径的写法：./   当前路径   ../   返回上一级

        同级文件找同级文件 ./目标文件.后缀
        
        父级文件找子级文件 ./进入文件夹的名称/目标.后缀

        子级文件找父级文件 ../目标.后缀

15：表格：行和列 单元格

    表格的作用：显示数据

    table是表格    tr行    td列
    th标签    ->    每一列的标题  默认的样式：文本加粗、左右居中
    caption标签   ->  表格标题    
    结构示例：
            <table  cellspacing="0" cellpadding="0">
                <caption>表格标题表格标题表格标题</caption>
                <tr>
                    <th>代号</th>
                </tr>
                <tr>
                    <td></td> 
                </tr>
            </table>

(1) table表格里面的html属性：

            width
            height
            border
            bordercolor   边框颜色
            bgcolor    背景颜色

            cellspacing=""  单元格与单元格之间的间距
            cellpadding=""  单元格和内容之间的间距

            align=""   水平对齐方式
                    属性值：left  right   center

            valign=""  垂直对齐方式
                    属性值： top   bottom  middle

(2) 表格html属性：

        colspan="所合并的单元格数量"   合并列
        rowspan="所合并的单元格数量"   合并行

        注：无论colspan还是rowspan  操作的都是td

        怎么判断合并行还是列：
            只要跨行的都是合并行
            没有跨行的都是合并列
            和哪个td合并，就删除哪个td
            如果既合并行又合并列，尽量先合并列，再合并行 

(3) 数据行分组：

        <thead></thead>  表头
        <tbody></tbody>  表体
        <tfoot></tfoot>  表尾

        注：在一个表格内部 只能有一个thead\tfoot  但是可以出现多个tbody

        数据列分组（了解）
        <colgroup span="把几列分成一组"></colgroup>  
        列分组示例：（前两列为黄色，后两列为粉色）
        <table wcellspacing="0" cellpadding="0">
            <colgroup span="2" bgcolor="yellow"></colgroup>
            <colgroup span="2" bgcolor="pink"></colgroup>
            <thead>
                <tr>
                    <th>列标题</th>
                    <th>列标题</th>
                    <th>列标题</th>
                    <th>列标题</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                
            </tbody>
            <tfoot>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tfoot>
        </table>                 

16：表单（作用：收录用户信息）

(1) 每一个表单是form

        属性：
            action=""  接口地址
            name=""    表单的名称
            method="get/post"  数据提交方式
    
        表单元素：
            文本框(输入框)   <input type="text">
            密码框          <input type="password">
            提交按钮        <input type="submit">
            重置按钮        <input type="reset">
            空按钮          <input type="button">
            单选按钮        <input type="radio">  注：每一组单选按钮，name属性保持一致
            多选按钮        <input type="checkbox">
            上传文件框      <input type="file">
            下拉菜单        <select>
                                <option></option>
                                <option selected></option>
                                <option></option>
                            </select>
            多行文本域       <textarea></textarea>
                            cols="30" rows="10"   字符为单位的宽高
                            禁止用户拖拽框的大小  resize:none;  css属性
            
        input里面的属性:
            type属性：决定了input在页面中的显示状态
            value属性：根据input显示状态的不同，作用也是不一样的、input的值
            maxlength属性： 内容的最大长度
            name属性：  当前表单元素的名称
            size属性：  字符为单位控制input的大小

        单选、多选按钮的属性：
            默认选中    checked="checked"
            禁止选中    disabled="disabled"

(2)fieldset

        表单字段集
        对表单元素进行分组，fieldset之间可以互相嵌套
        默认样式：有边框
        示例：

 <form action="">
                <fieldset>
                    <legend>其他信息</legend>
                    <fieldset>
                        <legend>喜欢这个表单</legend>
                    </fieldset>
                    <fieldset>
                        <legend>运动</legend>
                    </fieldset>
                    <fieldset>
                        <legend>建议</legend>
                    </fieldset>
                </fieldset>
            </form>

        legend
            表单字段集标题
            一般放在fieldset第一个子元素位置

        label 标签
            做提示信息的：把提示信息放在label里面
            有个for属性 属性值为一个元素的ID名（暂时不用管）