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

2023.11.6

第三章:基本标签

3-1HTML结构

网页设计——第一次课后作业_第1张图片

head,body标签

网页设计——第一次课后作业_第2张图片

网页设计——第一次课后作业_第3张图片

3-2head标签

title标签

网页设计——第一次课后作业_第4张图片

.网页设计——第一次课后作业_第5张图片

mate标签

1.name属性

网页设计——第一次课后作业_第6张图片

2.http-equiv属性

网页设计——第一次课后作业_第7张图片 网页设计——第一次课后作业_第8张图片

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

3-3 body标签

网页设计——第一次课后作业_第9张图片

网页设计——第一次课后作业_第10张图片

3-4 HTML注释

不会显示在浏览器中 

2023.11.7

第四章:文本

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

4.2标题标签

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

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

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

网页设计——第一次课后作业_第11张图片

网页设计——第一次课后作业_第12张图片

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

4.3段落标签

4.3.1 段落标签

网页设计——第一次课后作业_第13张图片

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

4.3.2 换行标签
 

网页设计——第一次课后作业_第14张图片

网页设计——第一次课后作业_第15张图片

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

使用两个p标签

网页设计——第一次课后作业_第16张图片

网页设计——第一次课后作业_第17张图片

使用br标签

网页设计——第一次课后作业_第18张图片

网页设计——第一次课后作业_第19张图片

使用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标签”来对文本进行加粗。

网页设计——第一次课后作业_第20张图片

网页设计——第一次课后作业_第21张图片

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

4.4.2斜体标签

网页设计——第一次课后作业_第22张图片

网页设计——第一次课后作业_第23张图片

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

'4.4.3上标标签

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

网页设计——第一次课后作业_第24张图片

网页设计——第一次课后作业_第25张图片

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

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

网页设计——第一次课后作业_第26张图片

4.4.5中划线标签

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

网页设计——第一次课后作业_第27张图片

网页设计——第一次课后作业_第28张图片

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

网页设计——第一次课后作业_第29张图片

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

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

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

网页设计——第一次课后作业_第30张图片

网页设计——第一次课后作业_第31张图片

网页设计——第一次课后作业_第32张图片

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

网页设计——第一次课后作业_第33张图片

网页设计——第一次课后作业_第34张图片

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

无div标签 

网页设计——第一次课后作业_第35张图片

网页设计——第一次课后作业_第36张图片

有div标签

网页设计——第一次课后作业_第37张图片

网页设计——第一次课后作业_第38张图片

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

2023.11.8

4.7 自闭合标签

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

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

自闭合标签:

网页设计——第一次课后作业_第39张图片

4.8块元素和行内元素 

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

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

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

4.8.1块元素

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

常见块元素

网页设计——第一次课后作业_第40张图片

网页设计——第一次课后作业_第41张图片

 网页设计——第一次课后作业_第42张图片

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

 4.8.2行内元素

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

网页设计——第一次课后作业_第43张图片

行内元素的特点:

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

4.9 特殊符号

4.9.1 网页中的“空格”

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

网页设计——第一次课后作业_第44张图片

网页设计——第一次课后作业_第45张图片

1个汉字约等于3个“ ”

4.9.2 网页中的“特殊符号”

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

第5章 列表

5.1 列表简介

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

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

2023.11.9

5.2 有序列表

5.2.1 有序列表简介
在HTML 中,有序列表中的各个列表项是有顺序的。有序列表从 开始,到结束。

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

语法:


  1. 列表项

  2. 列表项

  3. 列表项

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

网页设计——第一次课后作业_第46张图片

网页设计——第一次课后作业_第47张图片

5.2.2 type 属性

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

语法:


  1. 列表项

  2. 列表项

  3. 列表项

  4. 网页设计——第一次课后作业_第48张图片

     网页设计——第一次课后作业_第49张图片

    网页设计——第一次课后作业_第50张图片

    5.3无序列表

    5.3.1 无序列表简介

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

    语法


    • 列表项
    • 列表项
    • 列表项

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

    网页设计——第一次课后作业_第51张图片

    网页设计——第一次课后作业_第52张图片

     5.3.2 type属性

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

    网页设计——第一次课后作业_第53张图片

     网页设计——第一次课后作业_第54张图片

    网页设计——第一次课后作业_第55张图片

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

    2023.11.10

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


    名词

    描述

    ....

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

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

    网页设计——第一次课后作业_第56张图片

    5.5 HTML语义化

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

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

    第6章 表格

    6.2 基本结构

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

    语法:


         
             

             

     


     

             


             
       
    单元格1 单元格2
    单元格3单元格4

    说明:

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

    表示整个表格的开始和结束,和表示行的开始和结束,和表示单元格的开始和结束。

    在表格中,有多少组“”,就表示有多少行

    网页设计——第一次课后作业_第57张图片

    网页设计——第一次课后作业_第58张图片

    6.3 完整结构

    6.3.1 表格标题:caption

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

    语法










    表格标题
    单元格1 单元格2
    单元格3 单元格4

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

    2023.11.13

    网页设计——第一次课后作业_第59张图片

    网页设计——第一次课后作业_第60张图片

    6.3.2 表头单元格: th

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













    表格标题
    表头单元格1 表头单元格2
    表行单元格1 表行单元格2
    表行单元格3 表行单元格4

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

    区别:

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

    
     
        
            
            表头单元格
    
    
        
        
            
    考试成绩表
    姓名 语文 英语 数学
    小明 80 80 80
    小红 90 90 90
    小杰 100 100 100
    平均 90 90 90

    网页设计——第一次课后作业_第61张图片

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

    6.5 合并行: rowspan

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

    语法:

你可能感兴趣的:(其他,笔记)