小白学html

标题段落换行

标题 h1-h6

段落 p

换行 br hr(带分割线的换行)

有序列表和无序列表

有序列表 ol

无序列表 ul

列表项 li

例：

<ol>
        <li>数据类型</li>
        <li>变量</li>
        <li>流程控制</li>
        <li>函数</li>
        <li>面向对象</li>
</ol>

超链接

        a

          href:用于定义要跳转的目标资源的地址

               ①完整的url http://www.baidu.com/

               ②相对路径 以当前资源的所在路径为出发点找目标资源

                         相对路径可以以./(表示当前资源的所在路径,可省略不写)

                         ../(表示当前资源的上一层路径,需要时必须显式写出)开头

               ③绝对路径 无论当前资源在哪里,始终以固定的位置（当前项目）作为出发点找目标资源

                        以/开头

                        **当自己位置发生改变的时候目标路径不用频繁改变     

          target:用于定义目标资源的打开方式

               ①_self 当前窗口打开目标资源

               ②_blank 重新开启新窗口打开目标资源

例：

<!-- 相对路径写法 -->
<a href="02标题段落换行.html" target="_blank">02标题标签</a>
<!-- 绝对路径写法 -->
<a href="/demo1-html/a/b/test.html" target="_blank">test</a>

图片

     img

           src 定义图片的路径

               ①url

               ②相对路径

               ③绝对路径

           title 定义鼠标悬停时提示的文字

           alt 定义图片加载失败时提示文字

例：

<img src="./img/chenyi.jpeg" width="300px" title="成毅" alt="图片不见啦"/>

表格

table 整张表格

              thead 表头

              tbody 表体

              tfoot 表尾

                   tr 表格中的一行

                   td 行中的一个单元格

                   th 自带加粗居中效果的td

注：列侵占colspan和行侵占rowspan

例：

<table border="1px" style="margin: 0px auto; width: 400px;">
        <!-- <thead> -->
            <tr>
                <th>排名</th>
                <th>姓名</th>
                <th>分数</th>
                <th>备注</th>
            </tr>
        <!-- </thead> -->
        <!-- <tbody> -->
            <tr>
                <td>1</td>
                <td>zhangxiaoming</td>
                <td>100</td>
                <td rowspan="6">前三名升职加薪</td>
            </tr>
            <tr>
                <td>2</td>
                <td>lixiaohei</td>
                <td>99</td>   
            </tr>
            <tr>
                <td>3</td>
                <td>wangxiaodong</td>
                <td>98</td>  
            </tr>
            <tr>
                <td>总人数</td>
                <td colspan="2">2000</td> 
            </tr>
            <tr>
                <td>平均分</td>
                <td colspan="2">90</td>   
            </tr>
            <tr>
                <td>及格率</td>
                <td colspan="2">80%</td>     
            </tr>
        <!-- </tbody> -->
        <!-- <tfoot>
            <tr>
                <td>平均分</td>
                <td>99</td>
                <td></td>
            </tr>
        </tfoot> -->
     </table>

表单

   form 表单标签

            action 定义数据的提交地址

                      ①url

                      ②相对路径

                      ③绝对路径

            method 定义数据的提交方式

                   get

                     ①参数会以键值对形式放在url后提交 url?key=value&key=value&key=value

                     ②数据直接暴露在地址栏 相对不安全

                     ③地址栏长度有限制 提交的数据量不大

                     ④地址栏只能字符 不能提交文件

                     ⑤相比于post效率高一些

                   post

                     ①参数默认不放到url后

                     ②数据不会直接暴露在地址栏 相对安全

                     ③数据单独打包通过请求体发送 提交的数据量比较大

                     ④请求体中 可以是字符也可以是字节数据 可以提交文件

                     ⑤相比于get效率略低一些

                   delete

                   put

                   ...

        表单项标签

        表单项标签一定要定义name属性，该属性用于明确提交时的参数名

        表单项标签还需要定义value属性，该属性用于明确提交时的实参

        input

            type 输入信息的表单项类型

                 text 单行普通文本框

                 password 密码框

                 submit 提交按钮

                 reset 重置按钮

                 radio 单选框 多个选项选其一

                       多个单选框使用相同的name属性值 就会有互斥效果

                 checkbox 复选框 多个选项选多个

                 hidden 隐藏域 不显示在页面上 但是提交时会携带

                 file 文件上传框

        textarea 文本域 多行文本框

        select 下拉框

             option 定义选项

注：希望用户提交一些特定的信息，但是考虑安全问题或者是用户操作问题，不希望该数据发生改变

           readonly 只读 提交时携带

           disabled 不可用 提交时不携带

例：

<form action="./08welcome.html" method="get">
        <!-- 添加表单项标签 用户输入信息的标签 -->
        <!-- 希望用户提交一些特定的信息，但是考虑安全问题或者是用户操作问题，不希望该数据发生改变 
             readonly 只读 提交时携带
             disabled 不可用 提交时不携带
        -->      
        <input type="hidden" name="id" value="123">
        <input type="text" name="pid" value="456" readonly> <br>
        <input type="text" name="tid" value="789" disabled> <br>
        用户名：<input type="text" name="username" value="xiaoming"/> <br/>
        密码：<input type="password" name="userPwd"> <br/>
        性别：<input type="radio" name="gender" value="1" checked>男 
              <input type="radio" name="gender" value="0">女 <br>
        爱好：
              <input type="checkbox" name="hobby" value="1" checked>篮球 
              <input type="checkbox" name="hobby" value="2" checked>乒乓球 
              <input type="checkbox" name="hobby" value="3">羽毛球 
              <input type="checkbox" name="hobby" value="4">足球 <br> 
        个人简介：
             <textarea style="width: 300px; height: 100px;" name="intro"></textarea>
             <br>
        籍贯：
             <select name="pro">
                <option value="1">四川省</option>
                <option value="2">云南省</option>
                <option value="3">贵州省</option>
                <option value="0" selected>-请选择-</option>
             </select>
             <br>
        选择头像：
             <input type="file">
        <br>
        <input type="submit" value="登录">
        <input type="reset" value="清空">
     </form>

布局

        css 设置样式

            通过元素的style属性进行设置 style="样式名:样式值; 样式名:样式值;..."

        块元素：自己独占一行的元素 块元素的css样式的宽高往往都是生效的

            div h1-h6

        行内元素：不会自己独占一行的元素 行内元素的css样式的宽高等等很多都是不生效的

            span img a

特殊字符

        有特殊含义的符号：字符实体

        对于HTML代码来说，某些符号是有特殊含义的，如果想显示这些特殊符号需要进行转义