HTML总结

标签：总结班级 love 表格标签单元格 HTML 2022

HTML标签

常用标签

标题标签h1~h6

数字越大字体越小

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

HTML总结_代码实现

段落标签p

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

HTML总结_代码实现_02

换行标签br

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

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

HTML总结_html_03

格式化标签

加粗标签: 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>

HTML总结_html_04

图片标签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">

HTML总结_html_05

超链接标签a

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

target:

默认_self 当前页面打开页面

_blank在新窗口打开页面

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

HTML总结_html_06

注释标签

<!-- 注释标签 -->

快捷键

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>

HTML总结_html_07

合并单元格

合并列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>

HTML总结_代码实现_08

合并行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>

HTML总结_html_09

列表标签

有序列表

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>

HTML总结_代码实现_10

表单标签

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">

HTML总结_代码实现_11

label标签

HTML总结_html_12

select标签

</select>

HTML总结_代码实现_13

textarea标签

标签定义多行的文本输入

HTML总结_html_14

练习

展示博客

代码实现

<!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>

结果显示

HTML总结_html_15

填写博客