笔记三：HTML常用标签总结_<li><a title 什么代码-CSDN博客

本文链接：https://blog.csdn.net/m0_54249336/article/details/118366180

一、基本标签

<html>…</html> 定义 HTML 文档
<head>…</head> 文档的信息
<meta> 用于提高各种（元信息）
<title>…</title> 文档的标题
<body>…</body> 可见的页面内容
<link> 文档与外部资源的关系，一般外部引入CSS文件
<style>…</style> 文档的样式信息

二、文本标签

<a href=”…”>…</a> 超链接（anchor）
href 属性决定：要不要跳转，往哪里跳转
target属性决定：要不要在新的窗口打开，一般都要设置target="_blank"在新窗口打开

    <!-- href属性： href必须填写完整的带有http的url，以后url尽量完整，不会错-->
    <a href="https://www.baidu.com">普通a标签</a>

    <!-- href属性： href=“#” 阻止跳转但是会导致点击之后返回顶部，可用“##”或者“#！阻止跳转”-->
    <a href="##">阻止跳转</a>

    <!-- target属性：target="_blank"在新窗口打开文档，默认是在当前窗口打开-->
    <a href="https://www.baidu.com" target="_blank">target="_blank"</a>
    
    <!-- 邮件链接：href中mailto:邮箱地址，会自动唤醒邮箱发送页，并且收件人邮箱已经填好-->
    <a href="mailto:1257167416@qq.com">点击发送邮件</a>

    <!-- 图片链接：直接在图片外侧嵌套a标签即可-->
    <a href="http://www.baidu.com"><img src="./image/QQ20210630-130457@2x.png" alt="DTD频率图"></a>

<h1>...</h1> 标题字大小 （header）
<b>...</b> 粗体字（bold）
<strong>...</strong> 粗体字(并且带有HTML5语义强调)
<i>...</i> 斜体字 (incline)
<em>...</em> 斜体字(并且带有HTML5语义强调)
<ul>…</ul> 无序列表，父元素标签 (unordered list)
<ol>…</ol> 有序列表，父元素标签（ordered list）
<li>…</li> 列表项目，子元素标签 (list item)

    <!-- 列表一般都是带链接的，如下 -->
    <ul>
        <li><a href="链接">列表项1</a></li>
        <li><a href="链接">列表项2</a></li>   
    </ul>
    
    <ol>
        <li><a href="链接">列表项1</a></li>
        <li><a href="链接">列表项2</a></li>   
    </ol>

<font> 定义文本字体尺寸、颜色、大小
<br> 换行（break）
<hr> 水平线（horizontal rule）
<p> 段落（paragraph）

三、图形标签

<img src=’”…”> 定义图像

    <img src="./image/QQ20210630-130457@2x.png" alt="DTD频率图">

四、表格标签

<table>…</table> 定义表格
<caption> 定义表格标题
<tr>…</tr> 定义表格中的行（table row）
<td>…</td> 定义表格中的每行的单元（table data cell）
rowspan属性：合并几行/单独占了几行（row）
colspan属性：合并几列/单独占了几列（column）

<!-- table标签 table默认没有边框 -->
    <table border="1">
        <caption>课程表</caption>
            <tr>
                <!-- colspan属性： 合并几列/单独占了几列-->
                <td colspan="2">时间</td>   
                <td>星期一</td>
                <td>星期二</td>
                <td>星期三</td>
                <td>星期四</td>
                <td>星期五</td>
            </tr>
            <tr>
                <!-- rowspan属性： 合并几行/单独占了几行-->
                <td rowspan="2">上午</td>
                <td>1</td>
                <td>思想</td>
                <td>语文</td>
                <td>语文</td>
                <td>数学</td>
                <td>数学</td>   
            </tr>
            <tr>
                <td>2</td>
                <td>思想</td>
                <td>语文</td>
                <td>语文</td>
                <td>数学</td>
                <td>数学</td>   
            </tr>
            <tr>
                <td colspan="7">休息</td>
            </tr>
            <tr>
                <!-- rowspan属性： 合并几行/单独占了几行-->
                <td rowspan="2">下午</td>
                <td>3</td>
                <td>思想</td>
                <td>语文</td>
                <td>语文</td>
                <td>数学</td>
                <td>数学</td>   
            </tr>
            <tr>
                <td>4</td>
                <td>思想</td>
                <td>语文</td>
                <td>语文</td>
                <td>数学</td>
                <td>数学</td>   
            </tr>
    </table>

五、表单标签

<form>…</form> 父元素，用于收集所有input标签输入，并且处理
<input> 子元素，输入标签
<textarea>...</textarea> 子元素，文本域标签

    <!-- form用于收集所有input标签输入，action为提交的后端接口 methed为提交方式-->
    <form action="http://hongli/accept" method="GET">
        
        <!-- 三大必备属性：type定义类型，name用于分组区分，value定义发送给后端的值-->

        <!-- type="text" 一般用来输入用户名，账号等 -->
        <input type="text" name="username"> <br>

        <!-- type="password" 一般用来输入密码 -->
        <input type="password" name="pasword"> <br> 

        <!-- type="radio" 圆圈型单选框，只能选择其中的一个，注意：一组单选框必须用相同的name-->
        <input type="radio" name="sex" value="1">男生 <br>
        <input type="radio" name="sex" value="2">女生 <br>
        <input type="radio" name="sex" value="3">中性人 <br>

        <!-- type="checkbox"方框多选框，可以选择其中多个，注意：一组单选框必须用相同的name-->
        <input type="checkbox" name="course" value="math">数学 <br>
        <input type="checkbox" name="course" value="chinese">语文 <br>
        <input type="checkbox" name="course" value="english">外语 <br>

        <!-- select下拉框，类似于单选框-->
        <select name="sex"> 
            <option value="0">请选择性别</option>
            <option value="1">男</option>
            <option value="2">女</option>
        </select> <br>

        <!-- 文本域 -->
        <textarea name="comment" cols="30" rows="10"></textarea> <br> 

        <!-- 提交按钮 -->
        <input type="submit" name="submit"> <br>

    </form>

六、块级元素整理

<div> 典型的块级元素
<p> 块级段落
<h1~h6> 块级标题
<hr> 块级水平线
<form> 块级表单，但其子标签是行内元素，如<input>标签
<ol> 块级无序列表，但其子标签是行内元素，如<li>标签
<ul> 块级有序列表，但其子标签是行内元素，如<li>标签
<table> 块级表格，但是其子标签是行内元素，如<tr><td>标签

七、实体字符

&nbsp;  空格
&lt;    小于号<
&gt;    大于号>
&#169   ©