HTML学习回顾

HTML

---

常用标签

---

标题标签 <h1> - <h2>

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

---

段落标签<p></p>和换行标签<br />

段落就是个屁，但再多的空格不如一个<p></p>

强制换用<br/>

段落和行之间的距离不同

<p>Do not go gentle into that good night,<br />
        不要温和地走进那良夜，
    </p>
<p>Old age should burn and rave at close of day;<br />
        老年应当在日暮时燃烧咆哮；
    </p>
<p>Rage, rage against the dying of the light.<br />
        怒斥，怒斥光明的消逝。
    </p>

---

文本格式化标签

<strong>加粗</strong>
<b>加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>
<ins>下划线</ins>
<u>下划线</u>

---

<div></div>和<span></span>标签

无语义，装内容的盒子,用于布局

<div>大盒子</div>竖向排列
<span>小盒子</span>横向排列

---

图像标签<img>

<img src="图片路径">

src是<img>标签的必须属性，用来指定图像文件的路径和文件名

其他属性：

---

超链接标签 <a></a>（页面跳转）锚点

<a href="" target="">文本或图像</a>

链接分类

1. 外部链接
2. 内部链接
3. 空链接
4. 下载链接
5. 网页元素链接
6. 锚点链接<a href="#live"></a> <p id="live">跳转的目标</p>

---

注释

ctrl + /

---

特殊字符

特殊字符查询

---

表格标签 <table></table> (展示数据)

<table>
        <tr> <td>姓名</td> <td>性别</td> <td>年龄</td></tr>
        <tr> <td>张三</td> <td>男</td> <td>23</td></tr>
    </table>

<table></table>用于定义表格

<tr></tr>用于定义表格里的行，必须嵌套在<table></table>中

<td></td>用于定义表格里的单元格，必须嵌套在<tr></tr>中

td就是table data

表头单元格标签<th></th>（突出重要性）

对于普通单元格来说，表头单元格会加粗并居中显示

<table>
        <tr> <th>姓名</th> <th>性别</th> <th>年龄</th></tr>
        <tr> <td>张三</td> <td>男</td> <td>23</td></tr>
    </table>

表格属性（不常用）

表格结构标签<thead></thead>头部区域和<tbody></tbody>主体区域

为了更好地表示表格的语义

<table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>男</td>
                <td>23</td>
            </tr>
        </tbody>
    </table>

合并单元格

合并单元格方式

• 跨行合并：rowspan=“合并单元格的个数”
• 跨列合并：colspan=“合并单元格的个数”

<table width="500" height="249" border="1" cellspacing="0">
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td rowspan="2"></td>
        <td colspan="2"></td>
        <!-- <td>3</td> -->
    </tr>
    <tr>
        <!-- <td></td> -->
        <td></td>
        <td></td>
    </tr>
</table>

---

列表标签

1. 无序列表
2. 有序列表
3. 自定义列表

无序列表<ul></ul>和<li></li>

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

有样式属性，可以更改前面的小圆点

有序列表<ol></ol>和<li></li>

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ol>

也有属性样式，可以更改前面的计数

自定义列表<dl></dl>和<dt></dt>还有<dd></dd>

<dl>
        <dt>关注我们</dt>
        <dd>新浪微博</dd>
        <dd>官方微信</dd>
        <dd>关于我们</dd>
    </dl>

<dt>和<dd>是兄弟关系,不是包含关系

---

表单标签(为了收集用户信息)<form></form>

完整的表单是由表单域，表单控件(表单元素)和提示信息三个部分组成

 <form action="url地址" method="提交方式" name="表单域名称">
        
    </form>

表单元素

<input></input>输入表单元素

<input type="属性值">

<input></input>表单元素

<label></label>标注标签

为input元素定义标注(标签)

用于绑定<label>标签中的文字时,浏览器会自动将焦点转到或者选择到对应的表单元素上,有助于增加用户体验

<label for="这个属性要与绑定的input的表单元素的id相同">男</label>

<select></select>下拉表单元素

<select name="" id="">
        <option value="">山东</option>
        <option value="">北京</option>
        <option value="" selected="selected">浙江</option>
</select>

selected属性

用于默认当前选中项

<textarea></textarea>文本域元素

当用户输入内容较多时,使用这个,比如评论,留言

<textarea name="" id="" cols="30" rows="10">
        文本内容
</textarea>

cols为"每行字符数"

rows为"每列字符数"

---

转载：https://blog.csdn.net/qq_43479203/article/details/106582670