网页设计——第一次课后作业

hinxx

已于 2023-11-13 20:55:23 修改

阅读量171

点赞数

文章标签：其他笔记

于 2023-11-06 18:22:03 首次发布

本文链接：https://blog.csdn.net/hinxx/article/details/134251578

版权

2023.11.6

第三章：基本标签

3-1HTML结构

head，body标签

3-2head标签

title标签

mate标签

1.name属性

2.http-equiv属性

style标签（CSS)，script标签(javaScript)，link标签(CSS), base标签(无意义)

3-3 body标签

3-4 HTML注释

不会显示在浏览器中

2023.11.7

第四章：文本

静态文本和动态文本的区别是在于是否与服务器进行数据交换

4.2标题标签

在HTML中，共有6个级别的的标题标签: h1、h2、h3、h4、h5、h6

6个标题标签在页面中的重要性是有区别的，其中h1 标签的重要性最高，h6 标签的重要性最低。

一个页面一般只能有一个h1 标签，而h2到 h6 标签可以有多个

title 标签和h1标签是不一样的，title 标签用于显示地址栏的标题，而 h1 标签用于显示文章的标题

4.3段落标签

4.3.1 段落标签<p></p>

HTML用于控制网页的结构，CSS 用于控制网页的外观。

4.3.2 换行标签 <br/>

进行换行有两种方法：一种是“使用两个p标签”，另外一种是“使用br标签”

使用两个p标签

使用br标签

使用p 标签会导致段落与段落之间有一定的间隙，而使用 br标签则不会。

br标签是用来给文字换行的，而 p 标签是用来给文字分段的。如果你的内容是两段文字，则不需要使用 br 标签换行那么麻烦，而是直接用两个 p 标签就可以了。

4.4文本标签

在HTML中，我们可以使用“文本标签”来对文字进行修饰，如粗体、斜体、上标、下标等。

常用的文本标签有以下 8 种。

粗体标签:strong、b。

斜体标签:i、em、cite。

上标标签:sup。

下标标签:sub。

中划线标签:S。

下划线标签: u。

大字号标签: big。

小字号标签:small。

4.4.1 粗体标签

在HTML中，我们可以使用“strong 标签”或“b标签”来对文本进行加粗。

strong 标签和b 标签的加粗效果是一样的。在实际开发中，如果想要文本实现加粗效果，尽量使用 strong 标签

4.4.2斜体标签

在实际开发中，如果想要实现文本的斜体效果，尽量使用 em 标签，而不要用i标签或 cite 标签。

'4.4.3上标标签

在HTML 中，我们可以使用“sup 标签”来实现文本的上标效果。

如果你想要将某个数字或某些文字变成上标，只要把这个数字或文字放在<sup></sup>标签内就可以了。

4.4.4下标标签
在HTML中，我们可以使用“sub标签”来实现文本的下标效果。

4.4.5中划线标签

在HTML中，我们可以使用“s 标签”来实现文本的中划线效果。

4.4.6下划线标签
在HTML中，我们可以使用“u 标签”来实现文本的下划线效果。

等学了CSS之后，对于下划线效果，一般会用CSS 来实现，几乎不会用u 标签来实现。

4.4.7 大字号标签和小字号标签

在HTML中，我们可以使用“big 标签”来实现字体的变大效果，还可以使用“small 标签”来实现字体的变小效果。

4.5水平线标签
在HTML 中，我们可以使用“hr 标签”来实现一条水平的效。

4.6 div标签
在HTML中，我们可以使用“div 标签”来划分HTML结构，从而配合CSS来整体控制某一块的样式。

无div标签

有div标签

这两段代码的预览效果是一样的，不过实际代码却不一样。使用 div 标签来划分区域，使得码更具有逻辑性。当然，div 标签最重要的用途是划分区域，然后结合 CSS 针对该区域进行样式控制。

2023.11.8

4.7 自闭合标签

在HTML 中，标签分为两种:一般标签和自闭合标签。

“一般标签”和“自闭合标签”的特点。
一般标签:由于有开始符号和结束符号，因此可以在内部插入其他标签或文字。
自闭合标签:由于只有开始符号而没有结束符号，因此不可以在内部插入标签或文字。所谓的“自闭合”，指的是本来要用一个配对的结束符号来关闭，然而它却“自己”关闭了。

自闭合标签：

4.8块元素和行内元素

在浏览器预览效果，有些元素是独占一行的，其他元素不能与这个元素位于同一行，如p、div、hr等;而有些元素不是独占一行的，其他元素可与这个元素位于同一行，如strong、em 等。

这里所谓的“独占一行”，并不是HTML代码里独占一行，而是在浏览器显示效果中独占一行。

标签也叫作“元素”，如p 标签又叫 p 元素。

4.8.1块元素

在HTML 中，块元素在浏览器显示状态下将占据整一行，并且排斥其他元素与其位于同一行，一般情况下，块元素内部可以容纳其他块元素和行内元素。

常见块元素

块元素具有以下两个特点。
1.块元素独占一行，排斥其他元素(包括块元素和行内元素)与其位于同一行。
2.块元素内部可以容纳其他块元素和行内元素。

4.8.2行内元素

行内元素是可以与其他行内元素位于同一行，此外，行内元素内部(标签内部只可以容纳其他行内元素，不可以容纳块元素。

行内元素的特点：

1.行内元素可以与其他行内元素位于同一行。
2.行内元素内部可以容纳其他行内元素，但不可以容纳块元素

4.9 特殊符号

4.9.1 网页中的“空格”

在 HTML 中，空格也是需要用代码来实现的。其中，空格的代码是" "

1个汉字约等于3个“ ”

4.9.2 网页中的“特殊符号”

在 HTML 中，如果想要显示一个特殊符号，也是需要通过代码来实现的。这些特殊符号的代码，都是以“&”开头，并且以“;”(英文分号)结尾的。

第5章列表

5.1 列表简介

列表是网页中最常用的一种数据排列方式。

在HTML中，列表共有3 种:有序列表、无序列表和定义列表。

2023.11.9

5.2 有序列表

5.2.1 有序列表简介
在HTML 中，有序列表中的各个列表项是有顺序的。有序列表从<oI> 开始，到</oI>结束。

在有序列表中，一般采用数字或字母作为顺序，默认采用数字顺序

语法：

注意：ol 标签和 li 标签需要配合一起使用，不可以独使用、而且 <oI> 标签的子标签也只是li 标签，不能是其他标签。

5.2.2 type 属性

在HTM_中，我们可以使用 type 属性来改变列表项符号。在默认情况下，有序列表使用数字作为列表项符号。

语法：

5.3无序列表

5.3.1 无序列表简介

无序列表的列表项是没有顺序的。默认情况下，无序列表的列表项符号是，我们可以通过 type 属性来改变其样式。

语法
<ul>
<li>列表项</li>

注意:ul标签和li标签也需要配合一起使用，不可以单独使用，而且ul标签的子标签也只是li

5.3.2 type属性

与有序列表一样，我们可以使用 type 属性来定义列表项符号

对于无序列表来说，还有以下两点需要注意
1.ul元素的子元素只能是li，不能是其他元素。
2.ul元素内部的文本，只能在元素内部添加，不能在li元素外部添加

2023.11.10

5.4定义列表
在HTML 中，定义列表由两部分组成: 名词和描述。

dl即 definition list( 定义列表 )dt 即 definition term( 定义名词)，而 dd 即 definition description(定义描述)。

dt标签用于用解释的名词，而 dd 标签用于添加该名词的具体解释

5.5 HTML语义化

HTML的精髓就在于标签的语义。在 HTML 中，大部分标签都有它自身的语义。

我们学习 HTML 的目的并不是记住所有的标签，而是在你需要的地方能使用正确的语义化标签。把标签用在对的地方，这才是学习 HTML的目的所在。

第6章表格

6.2 基本结构

在HTML 中，一个表格一般由以下3个部分组成
表格: table 标签。
行: tr 标签。
单元格: td 标签。

语法：
<table>
<tr>
<td>单元格1</td>

</tr>
<tr>

说明：

tr 指的是 table row(表格行)。 td 指的是 table data cell ( 表格单元格)。

<table>和</table>表示整个表格的开始和结束，<tr>和</tr>表示行的开始和结束，<td>和</td>表示单元格的开始和结束。

在表格中，有多少组“<tr></tr>”，就表示有多少行

6.3 完整结构

6.3.1 表格标题:caption

在 HTML 中，表格一般都会有一个标题，我们可以使用 caption 标签来实现

语法
<table>
<caption>表格标题</caption>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>

一个表格只能有一个标题，也就是只能有一个 caption 标签。在默认情况下，标题位于整个表格的第一行。

2023.11.13

6.3.2 表头单元格: th

在HTML 中，单元格其实有两种:一是“表头单元格”，使用的是th标签:另一种“行单元格”，使用的是 td 标签。
th 的是 table header cell (表头单元格)。td指的是table data cell(表行单元格)。

<table>
<caption>表格标题</caption>
<tr>
<th>表头单元格1</th>
<th>表头单元格2</th>

</tr>

<tr>
<td>表行单元格1</td>
<td>表行单元格2</td>
</tr>
<tr>
<td>表行单元格3</td>
<td>表行单元格4</td>
</tr>
</table>

th 和 td 在本质上都是单元格，但是并不代表两者可以互换

区别：

显示上: 浏览器会以“粗体”和“居中”来显示 th 标签中的内容，但是 td 标签不会
语义上: th 标签用于表头，而 td 标签用于表行。

<!DOCTYPE html>
 <html>
    <head>
        <meta charset="utf-8" />
        <title>表头单元格</title>
<!--这里使用css为表格加上边框-->
<style type="text/css">
table,tr,td,th{border:1px solid silver;}
</style>
    </head>
    <body>
        <table>
            <caption>考试成绩表</caption>
           <thead>
            <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>英语</th>
            <th>数学</th>
        </tr>
    </thead>
    <tbody>
            <tr>
                <td>小明</td>
                <td>80</td>
                <td>80</td>
                <td>80</td>
            </tr>
            <tr>
                <td>小红</td>
                <td>90</td>
                <td>90</td>
                <td>90</td>
            </tr>
            <tr>
                <td>小杰</td>
                <td>100</td>
                <td>100</td>
                <td>100</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
            <td>平均</td>
            <td>90</td>
            <td>90</td>
            <td>90</td>
            </tr>
            </tfoot>
        </table>
    </body>
 </html>

表脚(tfoot)往往用于统计数据。对于 thead、tbody 和 tfoot 标签，不一定需要全部都用
如 tfoot 就很少用。

6.5 合并行: rowspan

所谓的合并行，指的是将“纵向的 N个单元格”合并。

语法：

hinxx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页设计——第一次课后作业

style标签（CSS)，script标签(javaScript)，link标签(CSS), base标签(无意义)2.http-equiv属性。--注释的内容-->head，body标签。3-3 body标签。3-4 HTML注释。
复制链接

扫一扫