web的学习（一）-CSDN博客

本文链接：https://blog.csdn.net/qq_57815472/article/details/131094538

初识html

1.<head>

meta标签中填写元数据，设置当前网页的部分属性的，其中charset属性设置当前网页的编码方式，有UTF-8、GBK、ISO等。

<meta charset="UTF-8">

title标签内部文本内容是标签页的标题。

    <title>标签页的标题</title>

2.<body>

body中任何内容就是网络页面上显示的内容。

<body>
任何文字 就是其中的内容显示的文字
在body中书写需要显示的内容 包括一些文件的引用
</body>

3.结构标签

结构标签就是对于网络页面排布进行设计提示该区域应该放什么东西。主要有header、article、aside、footer等标签。具体用法如下：

<header>
    这是当前区域的头部
    <nav>导航栏</nav>
</header>
<article>
    文本区域
    <section>第一章</section>
    <section>第二章</section>
    <section>第三章</section>
</article>
<aside>
    侧边栏
</aside>
<footer>
    这是当前区域的尾部
</footer>

预期结果图：

实际结果图：

4.标题标签和段落换行

标题标签表示的是当前这个部分的标题，一共分为6级，使用h1~h6表示。

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

注：标题标签在chrome浏览器中可能存在显示问题，h4~h6差别不明显。

段落标签<p>和换行标签<br>都具备换行效果，但因为p标签是块级元素，一个容器，自己本身有着内边距和外边距，效果显示上行距不同。

<!--段落标签-->
<p>p这是一个段落</p>
<p>p这是一个段落</p>

<!--换行标签-->
这是一个段落br<br>
这是一个段落br

5.列表标签

列表标签分成三种，1.无序列表<ul>，2.有序列表<ol>、3.自定义列表<dl>

无序列表ul 中，列表项前面的符号可以根据type属性的值来设定。主要有disc圆点、circle空心圆点、square方块。因为版本更替，更推荐使用css即style属性中list-style-type的值设立样式。另外，更多样式可去官网list-style-type - CSS: Cascading Style Sheets | MDN (mozilla.org)获取。

<!--
无序列表 ul
列表符号 也可以通过唐type属性进行交换
type -- 更加推荐使用CSS的方式来操作
circle
square
disc
-->
<ul type="circle">
    <li>列表项一</li>
    <li>列表项二</li>
    <li>列表项三</li>
</ul>

有序列表ol中，可通过type属性值设立顺序表示形式，其中a 或A 表示是以小写字母表示顺序或以大写字母表示顺序，i或 I 表示是以小写罗马数表示顺序或以大写罗马数表示顺序，1表示是以数字表示顺序。另外通过设立start的值表示从第几个位置开始。

<!--
有序列表 ol
type    顺序表示形式是字母、数字、罗马数字（大小写）
start 从第几个位置开始
-->
<ol type="A" start="5">
    <li>有序列表项一</li>
    <li>有序列表项二</li>
    <li>有序列表项三</li>
    <li>有序列表项四</li>
    <li>有序列表项五</li>
</ol>

自定义标签dl与其他列表标签不同，由两个元素<dt>、<dd>表示列表内容，一个表示自定义标题，一个表示自定义描述。

<!--自定义列表 dl-->
<dl>
    <dt>自定义标题</dt>
    <dd>自定义描述</dd>
    <dt>周一</dt>
    <dd>周一做的事</dd>
    <dt>周二</dt>
    <dd>周二做的事</dd>
</dl>

6.表格标签

表格标签<table>有标题<caption>、表头<thead>、表体<tbody>、<tr>、<td>，在html中表格是由一行一行，行中一个一个单元格的形式组成。<tr>包裹<th>或<td>（<th>中的内容加加粗居中）表示表格的一行内容，若再被<thead>或<tbody>包裹，则表示表头或表体。

<!--
表格标签<table>
style中text-align：center表示表格标签内的所有文本居中表示
boder：表格线粗细
align：表示整个表格在容器中的水平位置（这里容器是body）表示，center 表示水平居中
cellpadding：单元格的内边距
cellspacing：单元格的外边距

表格中 rowspan属性表示竖直方向的单元格合并，值表示合并多少个单元格；colspan表示水平方向
-->
<table style="text-align: center;" width="600" height="400" border="1" bgcolor="aqua" align="center" cellpadding="0" cellspacing="0">
    <!--    行和列-->
    <!--    行中分列-->
    <caption>
        <h2>一周日程表</h2>
    </caption>
    <thead>
    <tr>
        <th>周一</th>
        <th>周二</th>
        <th>周三</th>
        <th>周四</th>
        <th>周五</th>
        <th>备注</th>
    </tr>
    </thead>

    <tbody>
    <tr>
        <td>包子</td>
        <td>馒头</td>
        <td>馄饨</td>
        <td>饺子</td>
        <td>饼子</td>
        <td rowspan="3"></td>
    </tr>
    <tr>
        <td>面条</td>
        <td>米饭</td>
        <td>粥</td>
        <td>泡面</td>
        <td>面包</td>
    </tr>
    <tr>
        <td>蛋糕</td>
        <td>馕</td>
        <td>馍</td>
        <td>饿</td>
        <td>忍着</td>
    </tr>
    <tr>
        <td>备注</td>
        <td colspan="5">一周美食没事就没逝</td>
    </tr>
    </tbody>
</table>