HTML总结

HTML标签

常用标签

标题标签h1~h6

数字越大字体越小

<h1>1<h2>2<h3>3<h4>4<h5>5<h6>6</h6></h5></h4></h3></h2></h1>

段落标签p

<p>这是一段</p>
   <p>这是另一段</p>

换行标签br

br:表示换行 是一个单标签 没有p段落标签那么大的间隙

<p>这是一行 <br> 这是另一行</p>

格式化标签

加粗标签: strong 和 b

倾斜标签: em 和 i

删除线标签: del 和 s

下划线标签: ins 和 u

<strong>I love you</strong> <br>
   <b>I love you</b><br>
   <em>I love you</em><br>
   <i>I love you</i><br>
   <del>I love you</del><br>
   <s>I love you</s><br>
   <ins>I love you</ins><br>
   <u>I love you</u><br>

图片标签img

src:图片的路径

alt:当图片不能正确显示时,会显示输入的文字

title:鼠标放在上面显示输入的文字

width/height:控制宽度和高度

border 边框

 <img src="https://ts1.cn.mm.bing.net/th/id/R-C.466bb61cd7cf4e8b7d9cdf645add1d6e?rik=YRZKRLNWLutoZA&riu=http%3a%2f%2f222.186.12.239%3a10010%2fwmxs_161205%2f002.jpg&ehk=WEy01YhyfNzzQNe1oIqxwgbTnzY7dMfmZZHkqpZB5WI%3d&risl=&pid=ImgRaw&r=0"

 alt="风景" title="这是一张风景图" width="500px" height="800px" border = "5px">

超链接标签a

href:点击后跳转到输入页面

target:

默认_self 当前页面打开页面

_blank在新窗口打开页面

<a href="http:www.baidu.com" target="_blank"> 百度 </a>

注释标签

<!-- 注释标签 -->

快捷键

Ctrl  + / 

表格标签

table:表格标签

tr:表格其中的一行

th:表头单元格加粗

td:单元格

thread:表格的头部区域

tbody:表格主体区域

table标签内属性

aligen:表格对于周围元素的对齐方式

border:边框

cellpadding:内容距离边框的距离

cellspacing:表示单元格之间的距离

width/height:表格的宽高

<table align="center" border="20" cellpadding="100" cellspacing = "10" weight = "500" height = "250">
    <tr>
        <th>姓名</th>
        <th>班级</th>
        <th>学号</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>2001班</td>
        <td>200103050113</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>2002班</td>
        <td>200104020115</td>
    </tr>

   </table>

合并单元格

合并列colspon = "n"

<table align="center" border="20" cellpadding="100" cellspacing = "10" weight = "500" height = "250">
    <tr>
        <th>姓名</th>
        <th>班级</th>
        <th>学号</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>2001班</td>
        <td>200103050113</td>
    </tr>
    <tr>
        <td>李四</td>
        <td colspan="2">2002班</td>
    </tr>

   </table>

合并行rowspan="n"

<table align="center" border="20" cellpadding="100" cellspacing = "10" weight = "500" height = "250">
    <tr>
        <th>姓名</th>
        <th>班级</th>
        <th>学号</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>2001班</td>
        <td rowspan="3">200103050113</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>2002班</td>
    </tr>

   </table>

列表标签

有序列表

ol li

无序列表

ul li

自定义列表

dl:总标签

dt:标题

dd:内容

<h1>有序列表</h1>
    <ol>
        <li>性别</li>
        <li>年龄</li>
        <li>班级</li>
    </ol>
    <h1>无序列表</h1>
    <ul>
        <li>性别</li>
        <li>年龄</li>
        <li>班级</li>
    </ul>
    <h1>自定义列表</h1>
    <dl>
        <dt>学生信息</dt>
        <dd>性别</dd>
        <dd>年龄</dd>
        <dd>班级</dd>
    </dl>

表单标签

form标签

表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息。

input标签

<!-- text文本框 password密码框 -->
    <input type="text"><br>
    <input type="password"> <br>
    请选择性别
    <!-- radio单选框 -->
    <input type="radio"> 男
    <input type="radio"> 女 <br>
    <!-- 只能选一个 --> 
    <!-- name 属性相同 的单选框值之间是互斥的 -->
    <!-- checked默认选中 -->
    <input type="radio" name="gender"> 男 <br>
    <input type="radio" name="gender" checked> 女 <br>
    <!-- checkbox复选框 -->
     <input type="checkbox"> 跑步 <input type="checkbox"> 看小说 <input type="checkbox"> 睡觉 <br>
     <!-- button按钮 -->
     <input type="button" value="我是按钮"> <br>
     <!-- submit提交按钮 -->
     <!-- 提交按钮必须放在form标签内,点击提交给服务器 -->
     <form action="input.html">
        <input type="text" name="UserName">
        <input type="submit" value="提交">
     </form><br>
     <!-- reset情况按钮 -->
     <form action="input.html">
        <input type="text" name="UserName">
        <input type="submit" value="提交">
        <input type="reset" value="清空">
     </form> <br>
     选择文件
     <input type="file">

label标签

 <!-- 指定lable for 和 id 的标签对应,此时才能选中 -->

     <label for="male">男</label>

     <input type="radio" id="male" name="sex">

select标签

<select >

         <option>武汉</option>

         <option selected = "select">上饶</option>

      </select>

textarea标签

标签定义多行的文本输入

 <textarea cols="30" rows="10"></textarea>

练习

展示博客

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fish_teng的简历</title>
</head>
<body style="border: 5px solid black;">
    <h1>fish_teng</h1>
    <h2>基本信息</h2>
    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fad3943b0-82c2-49c8-a49f-b00e3b75b335%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1695199816&t=aa425363463ceab76427f3c056af5f61" alt="" height="500px">
    <p>
        求职意向:软件开发工程师
    </p>
    <p>
        联系电话:123456789
    </p>
    <p>
        邮箱:12444546@123
    </p>
    <p>
        <a href="https://www.csdn.com">我的博客</a>
    </p>
    <p>
        <a href="https://github.com">我的github</a>
    </p>
    <h2>教育背景</h2>
    <ol>
        <li>2008 - 2014 希望小学</li>
        <li>2014 - 2017 希望初中</li>
        <li>2017 - 2020 希望高中</li>
        <li>2020 - 2024 希望大学</li>
    </ol>
    <h2>专业技能</h2>
    <ul>
        <li>java基础语法扎实</li>
        <li>熟练应用常见数据结构</li>
        <li>熟悉计算机网络理论</li>
        <li>掌握web开发能力</li>
    </ul>
    <h2>我的项目</h2>
    <ol>
        <li>
            <h3>留言墙</h3>
            <p>开发时间: 2022年6月 - 2022年9月</p>
            <p>功能介绍</p>
            <ul>
                <li>支持留言发布</li>
                <li>支持匿名留言</li>
            </ul>
        </li>
        <li>
            <h3>学习小助手</h3>
            <p>开发时间: 2022年6月 - 2022年9月</p>
            <p>功能介绍</p>
            <ul>
                <li>支持错题检索</li>
                <li>支持同学讨论</li>
            </ul>
        </li>
    </ol>
    <h2>个人评价</h2>
    <p>在校期间,学习优异,多次获得奖学金</p>
</body>
</html>

结果显示

填写博客

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table width ="500px">
        <thead>
            <h3>请填写简历信息</h3>
        </thead>
        <tbody>
            <tr>
                <td><label for="name">姓名</label></td>
                <td><input type="text" name="UserName" id="name"></td>
            </tr>
            <tr>
                <td>性别</td>
                <td>
                    <input type="radio" name="sex" id="male" checked = "checkbox">
                    <label for="male">男</label>
                    <input type="radio" name="sex" id="female">
                    <label for="female">女</label>
                </td>
            </tr>
            <tr>
                <td>出生日期</td>
                <td>
                    <select>
                        <option>请选择年份</option>
                        <option>2001</option>
                        <option>2002</option>
                        <option>2003</option>
                        <option>2004</option>
                    </select>
                    <select>
                        <option>请选择月份</option>
                        <option value="">1</option>
                        <option value="">2</option>
                        <option value="">3</option>
                        <option value="">4</option>
                        <option value="">5</option>
                        <option value="">6</option>
                        <option value="">7</option>
                        <option value="">8</option>
                        <option value="">9</option>
                        <option value="">10</option>
                        <option value="">11</option>
                        <option value="">12</option>
                    </select>
                    <select name="" id="">
                        <option value="">请选择日期</option>
                        <option value="">1</option>
                        <option value="">2</option>
                        <option value="">3</option>
                        <option value="">4</option>
                        <option value="">5</option>
                        <option value="">6</option>
                        <option value="">7</option>
                        <option value="">8</option>
                        <option value="">9</option>
                        <option value="">10</option>
                        <option value="">11</option>
                        <option value="">12</option>
                        <option value="">13</option>
                        <option value="">14</option>
                        <option value="">15</option>
                        <option value="">16</option>
                        <option value="">17</option>
                        <option value="">18</option>
                        <option value="">19</option>
                        <option value="">20</option>
                        <option value="">21</option>
                        <option value="">22</option>
                        <option value="">23</option>
                        <option value="">24</option>
                        <option value="">25</option>
                        <option value="">26</option>
                        <option value="">27</option>
                        <option value="">28</option>
                        <option value="">29</option>
                        <option value="">30</option>
                        <option value="">31</option>
                    </select>           
                </td>
            </tr>
            <tr>
                <td>就读学校</td>
                <td><input type="text" name="" id=""></td>
            </tr>
            <tr>
                <td>应聘岗位</td>
                <td>
                    <input type="checkbox" id="front-end">
                    <label for="front-end">前端开发</label>                              
                    <input type="checkbox" id = "back-end">
                    <label for="back-end">后端开发</label>                         
                    <input type="checkbox" id="STDE">
                    <label for="STDE">测试开发</label>                         
                    <input type="checkbox" id="Devops">
                    <label for="Devops">运维开发</label>
                </td>  
            </tr>
            <tr>
                <td>掌握的技能</td>
                <td>
                    <textarea name="" id="" cols="30" rows="10"></textarea>
                </td>
            </tr>
            <tr>
                <td>项目经历</td>
                <td>
                    <textarea name="" id="" cols="30" rows="10"></textarea>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="checkbox" id="declaration">
                    <label for="declaration">我已仔细阅读过公司的招聘要求</label>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <a href="#">查看我的状态</a>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <h3>请应聘者确认:</h3>
                    <ul>
                        <li>以上信息真实有效</li>
                        <li>能够尽早去公司实习</li>
                        <li>能接受公司的加班文化</li>
                    </ul>
                </td>      
            </tr>
        </tbody>
    </table>
</body>
</html>

结果显示