HTML学习第二天

励志做一名码农_

已于 2023-04-21 22:46:04 修改

阅读量26

点赞数

文章标签：学习前端 html

于 2023-04-20 20:15:23 首次发布

本文链接：https://blog.csdn.net/qq_58791266/article/details/130270408

版权

1.注释标签和特殊字符

注释

快捷键: ctrl + /

一句话: 注释标签里面的内容是给程序猿看的, 这个代码是不执行不显示到页面中的.

特殊字符

特殊字符	描述	字符的代码
	空格符
<	小于号	<
>	大于号	>
&	和号	&

2.表格标签

2.1表格标签基本语法

<table>

<tr>

<td>单元格内的文字</td>

.......

</tr>

......

</table>

2.2表头单元格标签

一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示。

<th>标签表示 HTML 表格的表头部分(table head 的缩写)

<table>

<tr>

<th>姓名</th>

.......

</tr>

......

</table>

2.3表格属性

<table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="250">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>刘德华</td>
            <td>男</td>
            <td>56</td>
        </tr>
        <tr>
            <td>张学友</td>
            <td>男</td>
            <td>58</td>
        </tr>
        <tr>
            <td>郭富城</td>
            <td>男</td>
            <td>51</td>
        </tr>
        <tr>
            <td>黎明</td>
            <td>男</td>
            <td>57</td>
        </tr>
    </table>

2.4表格结构标签

1.<thead></thead>用于定义表格的头部。<thead>内部必须拥有<tr>标签。一般是位于第一行。

2.<tbody></tbody>用于定义表格的主体，主要用于放数据本体。

3. 以上标签都是放在<table></table>标签中。

3.合并单元格

跨行合并：rowspan="合并单元格的个数"

跨列合并：colspan="合并单元格的个数"

合并单元格三部曲:

1. 先确定是跨行还是跨列合并。

2. 找到目标单元格. 写上合并方式 = 合并的单元格数量。比如：<td colspan="2"></td>。

3. 删除多余的单元格。

<table width="500" height="250" border="1" cellspacing="0">
        <tr>
            <td></td>
            <td colspan="2"></td>
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>

4.列表标签

4.1无序列表（重点）

无序列表的基本语法格式如下：

<ul>

<li>列表项1</li>

<li>列表项2</li>

<li>列表项3</li>

<li>

<p> 123 </p>

</li>

...

</ul>

 <h4>您喜欢的食物？</h4>
    <ul>
        <li>荔枝</li>
        <li>火锅</li>
        <li>螺蛳粉</li>
    </ul>

4.2有序列表（理解）

<ol>

<li>列表项1</li>

<li>列表项2</li>

<li>列表项3</li>

<li>

<p> 123 </p>

</li>

...

</ol>

<h4>票房排行榜</h4>
    <ol>
        <li>长津湖</li>
        <li>满江红</li>
        <li>少年的你</li>
    </ol>

4.3自定义列表（重点）

其基本语法如下：

<dl>

<dt>名词1</dt>

<dt>名词1解释1</dt>

<dt>名词1解释2</dt>

</dl>

1.<dl></dl>里面只能包含<dt>和<dd>

2.<dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>。

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

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