前端学习日记3

失眠收容站

于 2023-01-10 12:32:30 发布

阅读量575

点赞数 1

分类专栏：前端文章标签： html5 学习前端 css

本文链接：https://blog.csdn.net/qq_53321156/article/details/128592864

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

第二章 HTML基础

前言

本章学习一些HTML的基础

一、HTML简介

HTML（HyperText Mark-up Language）超文本标记语言是一种文本形式的标记符号语言，使用结构化标签来定义网页中的内容及内容元素的性质和特点。所谓超文本可以理解为页面内可以包含图片、音乐、视频等非文本元素。

HTML文档通常以.html或.htm为文件扩展名，能独立于各种操作系统平台的、可供浏览器解释浏览的网页文件。

二、HTML文档结构

1.HTML文档一般包含：头部区域和主体区域。

基本结构由3个标签来组织：<html>、<head>和<body>。

代码如下（示例）：

<!doctype html>
<html>
     <head>
       头部信息
     </head>
     <body>
       主体
     </body>
</html>

2.HTML基本语法

HTML文档实际上就是一个文本文件，它由标签和网页元素混合组成，它们必须遵循一定的组合规则，否则浏览器无法解析。

（1）所有标签都包含在“<”“>”起止标识符中

（2）双标签：绝大多数元素都有起始标签和结束标签

（3）单表签：常见的无结束标记的标签有：换行<br/>、水平分隔线<hr/>、图片<img/> 、表单元素<input/>、下拉菜单项 <option/> 、<meta/>、 <link/>

（4）起始标签包含元素的名称及可选属性，元素的属性包含属性名称和属性值，多个属性之间通过空格分隔。 <标记名称属性名1="属性值" 属性名2="属性值" ….. >

HTML标签的通用属性

属性	描述
class	规定元素的类名
id	规定元素的唯一 id
style	规定元素的行内样式

（5）标签可以相互嵌套，形成文档结构。合法的嵌套应该是包含与被包含关系。

div中可内嵌任何元素

h元素一般不内嵌其它h元素，如<h1><h2> Xihua Univ </h2></h1>，可能会被浏览器解析成：<h1></h1><h2> Xihua Univ </h2>

p元素一般不内嵌其它块级元素

特别注意：网页内容的标签应包含在<body>子标签中

（6）html注释：

注释信息会被浏览器忽略

注释间不可以相互嵌套

<html><!--语法开始-->
   <head>
     <!--头部信息，如<title>标签定义的网页标题-->
   </head>
   <body>
     <tag a1="v1" a2="v2" a3="v3"......an="vn">元素主体</tag>
     <!--多行--
         --注释--
     -->
    </body>
</html><!--语法结束-->

html对标签和属性名称大小写不敏感！如将<hr>写成<Hr>

3.HTML文档结构标签

html 标签包含头尾标签<html> </html>，用来说明文件为html文档，以及文档的起始和结束。

头部标签<head></head>分别表示头部信息的开始和结尾。头部中通常包含页面的标题、编码、关键字、说明、描述信息、CSS样式文件和JS文件等内容，它本身不作为内容来显示，但可能会影响网页的显示和交互效果（比如链接了样式文件和JS脚本文件）。

主体标签<body></body>，网页中显示的实际内容均包含在这2个正文标记符之间。正文标记符又称为实体标记。

（1）HTML头部标签

<head>头部区域通常包含<title>、<meta>、<style>、<link>、<script>和 <base>等元素，用于设置页面标题、字符集、关键字、描述信息、CSS样式和JavaScript脚本。

标签	描述
<head>	定义了文档的信息
<title>	定义了文档的标题
<base>	定义了页面链接标签的默认基准链接地址
<meta>	定义了HTML文档中的元数据
<link>	定义了一个文档和外部资源之间的关系
<style>	定义了HTML文档的样式文件
<script>	定义了客户端的脚本文件

属性	常用值	描述
charset	utf-8 gb2312 iso-8859-1	设置页面的字符编码
name	keywords description author	指定页面描述信息数据项目
http-equiv	content-type refresh expires pragma	http-equiv指定HTTP文件头数据项目
content	文本字符串	设置name和http-equiv所指定元数据项目对应的值

（1）字符编码

<meta charset="utf-8">

（2）关键字

<meta name="keywords" content="HTML,CSS,Javascript"/>

"keywords" 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。

（3）定时自动刷新

<meta http-equiv="refresh" content="1"/>

该语句表示，页面每隔一秒刷新一次，其中属性content的值，代表间隔的时间。

（4）定时自动跳转

<meta http-equiv="refresh" content="3;url=http://www.sohu.com"/>

该语句表示，页面3秒后自动转到搜狐主页。

注意：上述标签一般放在head标签中。

（2）HTML文本与段落标记

标记	说明
<h#></h#>	标题标记，#=1,2,3,4,5,6，定义了6级标题，每级标题的字体大小依次递减，属性align设定对齐方式：left、right、center
<b></b>	黑体标记
<i></i>	斜体标记
<strong></strong>	加重文本标记（通常是斜体加黑体）
<font></font>	字体标记：size属性，设置字体大小，取值从1到7； color属性，设计字体颜色，使用名字常量或RGB的十六进制值， face属性，设计字体字型，例如“宋体”、“楷体”等不建议继续使用，而使用CSS样式来代替
<p></p>	段落标记：属性align指定对齐方式。
<hr/>	水平分隔线标记：属性width设置线的长度（单位像素）， size设置线的粗细（单位像素）， color设置线的颜色，align设置对齐方式，<hr>也可以
<br/>	插入一个回车换行符，<br>也可以
<sup>和<sub>	上、下标，均为双标签

特殊字符标签

特殊字符	符号码	描述
		空格符
<	<	小于号
>	>	大于号
&	&	和号
￥	¥	人民币
©	©	版权
®	®	注册商标
°	°	摄氏度
×	×	乘号
÷	÷	除号
“	"	双引号

练习1:

根据如下页面截图，设计HTML文档：ch02_2.html。请仔细分析所使用的标记及其属性，以及它们的作用。

我自己给出的代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字网页</title>
</head>

<body>
    <h2 align="center">唐诗欣赏</h2>
    <hr width="100%" size="3" color="#00ffee" />
    <h3 align="center">静夜思</h3>
    <p align="center">李白</p>
    <strong>
        <center>
            床前明月光，<br />
            疑是地上霜。<br />
            举头望明月，<br />
            低头思故乡。<br />
        </center>
    </strong>
    <hr width="100%" size="3" color="#00ffee" />
    <strong>[简析]</strong>这是写远客思乡之情的诗，诗以明白如话的语言雕琢出明静醉人的秋夜的意境。<br /><br />
    <hr width="60%" size="3" color="green" align="left" />
    版权&copy;：版权所有，违者必究<br />
    E-mail：abcdef@126.com
</body>

</html>

运行出来结果为：

参考答案为：

比较：

1.之前用DW的时候选择color可以直接跳出颜色形象的选择，但是vscode我还不知道如何方便的选择颜色。

2.忘记使用<font>设置字标签和<b>黑体标签

3.对于width和size两个属性理解不足

4.完全忘记<address>标签的使用，多学多练。

（3）列表标签

列表标签分两类：有序标签和无序标签。

有序列表标签<ol></ol>

格式代码：

<ol type="序号类型">
  <li>......</li>
  <li>......</li>
      ......
</ol>

其中biah，属性type指定列表项前的项目编号的样式，其取值：

“1”：编号为阿拉伯数字（默认值）

“a”：小写英文字母

“A”：大写英文字母

“i”：小写罗马数字

“I”：大写罗马数字

无序列表标签<ul></ul>

格式代码：

<ul type="类型样式”>
    <li>......</li>
    <li>......</li>
        ......
</ul>

其中，属性type指定列表项前的项目符号的样式，其取值为：

disc：实心圆点（默认值）

circle：空心圆点

square：实心方块

练习二：

有序列表与无序列表应用示例，设计图2-3所示的运行界面。

我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>有序列表和无序列表</title>
</head>
<body>
    <p><b>班级新闻</b></p>
    <ul type="disc">
        <li>最新课程表</li>
        <li>关于普通话考试的通知</li>
        <li>div+css高级应用学习</li>
    </ul>
    <hr width="100%" size="1" color="red"/>
    <p><b>报名</b></p>
    <ol type="A">
        <li>报名时间：3月16——21日。</li>
        <li>报名地点：所在院系办公室。</li>
        <li>报名费用：按物价局规定85元/人/次（含培训费用），报名时交齐。</li>
    </ol>
</body>
</html>

我运行出来的结果：

比较：

和源代码大致相同，唯一不同是我列表上的字体加了<b>黑体标签，要多注意细节。

列表只要记住了格式就不难了。

（4）超链接标签

超链接是指从一个网页的信息节点（如一个词语、一段文字、或一张图片）指向另一个目标的连接关系，这些目标可以是另一个网页、一个资源文件，或者是网页内的某个元素。

通过超链接可以实现从一个页面到另一个页面，或从一个页面内的某一部分到另一部分的跳转。因此，超链接是整个万维网应用的核心和基础。

格式：

<a href="url" target="目标窗口弹出方式">超链接文本或图片</a>

target属性：指定链接页面的打开方式，取值包括_self，new，_blank，parent，_top，等等。

href属性：指定链接目标的url地址，设置href后a元素才具备超链接功能。

URL(Uniform Resource Locator），统一资源定位器，通俗讲就是网络资源的位置或路径。

绝对路径：一般是指带有盘符的路径，或完整的网络地址。

例如：c:\HTML5\images\logo.jpg http://www.xhu.edu.cn/images/logo.jpg

相对路径：通常以当前HTML或CSS文档为起点，通过层级关系描述目标资源的位置，主要用于链接当前站点内的文档。

例如：

1.“/”代表根目录，比如html文档在C盘，那么“/name.jpg”就代表name.jpg应在C盘根目录下

2.“./”代表当前目录，此时如果name.jpg与当前html页面在同一目录下，那么 “./name.jpg”与“name.jpg”等价，因此，"./"可不写

3.“../”代表上一级目录，如果设置href="../name.jpg"，那么浏览器就到当前页面的上一级目录中寻找name.jpg

例如：假设当前index.html中有一个链接指向西华大学的LOGO图片，并且该LOGO图片位于与index.html相同目录下的images文件夹中，那么href可设置成如下相对路径：

<a href= " images/name.jpg " >西华LOGO</a>

除了网页之间的链接，还可以在页面内实现部分与部分之间的跳转

例如，在一个超长页面的底部设置一个锚点，然后在页面顶部超链接处设置href属性为"#锚点名称"，当鼠标单击该超链接时，跳转到页面底部（底部在可见窗口区域内）。

代码：

<a href="#btm">跳转到页面底部</head>
               .............
              .............
             .............
<a name="btm">底部锚点位置</span>

锚点设置name和id属性均可

<a id="btm">底部锚点位置</span>

超链接伪协议

例如：

<a href="tel:110">请电话联系警察叔叔</a>

<a href="sms:110">请短信联系警察叔叔</a>

<a href="mailto:110@sina.com">请Email联系警察叔叔</a>

（5）图片标签

格式：

<img src="url" height="" width="">

其中：

属性src：指定图像源的URL路径

alt：替代文本；

height：图片的高度；

width：图片的宽度。

align：设定图像的排列属性

border：设定图片的边框（不常用）

vspace：设定图像的垂直间距（不常用）

hspace：设定图像的水平间距（不常用）

练习三：

设计如图的页面（ch2_4.html），该页面中有超链接和图片链接，当单击其中之一（单击超链接或图片），都跳转到“泰山自然网页”。网址为： http://www.mount-tai.com.cn/nature.shtml）

我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接页面</title>
</head>
<body>
    <p><b>超链接标签的使用</b></p>
    <a href="http://www.mount-tai.com.cn/nature.shtml">泰山风景介绍</a>
    <hr width="100%" size="1" color="red"/>
    <p><b>图片链接标记的使用</b></p>
    <a href="http://www.mount-tai.com.cn/nature.shtml"><img src="images/taishan.jpg" height="100" width="100"></a><br/>
    泰山风景介绍
</body>
</html>

运行结果大致相同

比较：

1.文字的选择参考代码选择的是<h4>标签

2.图片标签的大小设置参考答案的单位设置是height80px,width80px,需要搞明白像素的大小到底是如何设置的

3.图片标签还加载了alt属性：“请点击该图片”，alt属性的作用是替代文本，但是运行出来和我的代码没有差别。

（6）audio音频标签

支持的音频格式 MP3、Wav、Ogg Vorbis (开源、无专利使用费)

audio元素

<audio src="音频文件地址" controls="controls">
</audio>

audio常见属性

属性	值	描述
src	url	要播放的音频的 URL
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮
loop	loop	如果出现该属性，则每当音频结束时重新开始播放
preload	none metadata auto	不进行预加载；部分预加载。全部预加载，为默认值如果使用 "autoplay"，则忽略该属性。

audio允许提供多种格式音频文件

audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。

浏览器将使用第一个可识别的格式

<audio controls="controls">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
  <source src="song.wav" type="audio/wav">
</audio>

（7）video视频标签

支持的视频格式 MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

Ogg和WebM 可免费使用

video元素

<video src="文件地址" controls="controls">
</video>

video 元素允许多个 source 元素。source 元素可以链接不同的音频文件。

浏览器将使用第一个可识别的格式

<video controls="controls">
   <source src="movie.ogg" type="video/ogg">
   <source src="movie.mp4" type="video/mp4">
</video>

video元素属性

属性	值	描述
src	url	视频url地址
width	pixels	设置播放器宽度
height	pixels	设置播放器高度
controls	controls	向用户显示播放控件
autoplay	autoplay	视频就绪自动播放
loop	loop	播放完是否继续播放该视频，循环播放
poster	url	加载等待的画面图片
preload	preload	是否等加载完再播放

注意：video的CSS样式width属性优先级高于video标签的width属性。

（8）表格标签

表格由行、列、单元格组成，一般表格由<table>、<tr>、<th>和<td>标记来定义的，分别表示表格、表格行、表头单元格、单元格。也可使用<caption>设置表格标题，使用<tbody>表标签体包裹除表头之外的单元格数据区域，便于使用JS脚本语言动态增删表格数据。

基本语法：

<table>
   <tr><th>列名一</th><th>列名二</th>......</tr>
   <tr><td>数据一</td><td>数据二</td>......</tr>
    ......
</table>

<table>
   <caption>表格标题</caption>
   <tr><th>列名一</th><th>列名二</th></tr>
   <tbody>
   <tr><td>数据一</td><td>数据二</td></tr>
   ......
   </tbody>
</table>

表格属性（<table>,<td>,<th>属性）

属性	描述	属性	描述
width	宽度	cellpadding	边距(单元格内容与边框之间)
height	高度	cellspacing	间距(单元格之间的距离)
border	边框厚度	bgcolor	背景颜色
align	水平对齐方式：left、center、right	background	背景图像
valign	垂直对齐方式：top、middle、bottom

<td>单元格专有属性：colspan（跨列列数）、rowspan（跨行行数）用于单元格跨行跨列合并。

练习四：

设计如图所示的表格，该表格中有跨行、跨列单元格。

我的代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格标记举例</title>
</head>

<body>
    <table width="80%" height="40%" border="1" align="center">
        <tr><th colspan="3">期中成绩表</th></tr>
        <tr><th>姓名</th><th>语文</th><th>数学</th></tr>
        <tr><td>张三</td><td colspan="2">100</td></tr>
        <tr><td>李四</td><td>98</td><td>43</td></tr>
        <tr><td>王晓彬</td><td rowspan="2">97</td><td>78</td></tr>
        <tr><td>成大才</td><td>94</td></tr>
</body>

</html>

运行出来与结果无差别

比较：

1.对于表格大小的设置，参考代码只写了width70% border1 align"center"

2.需要弄清楚各个表格标签是什么意思，并且掌握单元跨行跨列的用法

表格布局

表格单元格中除文本之外，可以放置绝大多数HTML元素，如图片、视频、表单、表格，等等，因此可以使用表格来作为一个容器管理和布局HTML页面的元素（即内容），称为表格布局。

注意：表格布局中常涉及表格单元格宽高等属性设置，尤其是常需要对某列或某行的跨行跨列合并，和拆分单元格，这些操作会影响到整个表格