Web学习笔记day1--HTML

原创于 2021-08-03 20:16:33 发布 · 129 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍HTML的基础知识，包括HTML的概念、用途及其基本语法。通过本文你可以了解到如何使用HTML创建静态网页，掌握常用标签如段落、图像、链接及列表等。

前文:Web学习笔记,主要用作自我复习

1.HTML

1.概念

HTML全称:Hyper Text Markup Language 超文本标记语言

超⽂本：图片, 超链接, 视频, 音频等
标记语言：由标签构成的语言，使用标签的方法将需要的内容包括起来.<标签名称> 如 html，xm.
标记语言不是编程语言

2.HTML能干什么

HTML用于编写网页。网页内容包含：HTML代码、CSS代码、JavaScript代码等内容。

HTML代码：用于搭建基础网页，展示页面的内容、需要显示的数据。
CSS代码：用于美化页面，布局页面，使显示的数据更加好看。
JavaScript代码：控制页面的元素，让页面有⼀些动态的效果。

网页根据内容是否可以改变分为：静态页面、动态页面。

静态页面：使用静态网页开发技术发布的资源
特点：
- 编写之后在浏览器不再改变的网页。HTML就是用于编写静态网页的。
- 所有用户访问，得到的结果是⼀样的。
- 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源。
动态页面：使用动态网页及时发布的资源
特点：
- 会根据不同的情况展示不同的内容。例如：登录成功后右上⻆显示用户名。
- 所有用户访问，得到的结果可能不⼀样。
- 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器

HTML是部署在服务器上，运行在浏览器上。

3.Web三要素

浏览器：向服务器发起请求，下载服务器中的网页（HTML），然后执行HTML显示出内容。
服务器：接收浏览器的请求，发送相应的页面到浏览器。
HTTP协议：浏览器与服务器的通讯协议。

2.⽹站信息页面显示

1.HTML语言特点

HTML文件不需要编译，直接使用浏览器阅读即可
HTML文件的扩展名是： *.html 或 *.htm
HTML结构都是由标签组成
- 标签名预先定义好
- 标签名不区分大小写
- 围堵标签：通常情况下标签由开始标签和结束标签组成
- ⾃闭和标签：如果没有结束标签，建议以/结尾
- 标签可以嵌套
- 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号
HTML结构包括两部分：头head和体body

2.标签

2.1 HTML界面的基本结构

<html> //根标签
 <head> //头标签
 <title>这是标题</title> //⼦标签,用于定义⽂档的标题
 <meta charset="UTF-8"> //⼦标签，提供关于HTML⽂档的元数据。用于规定页面的描述、关键词、⽂档作者、最后修改时间以及其他元数据。
 </head>
 <body> //体标签，是整个网页的主体
 这⾥是正⽂
 </body>
</html>

2.2文本标签

段落标签,自动换行.
 手动换行
特殊字符, 例如空格, <, >… 需要使用实体字符格式: &xx;
<hr>分割线

字体标签,color:颜色,size:大小,face:字体

<font color="#3286BB" size="6" face="arial">Lorem ipsum dolor sit amet.</font>

Lorem ipsum dolor sit amet.
加粗, 变斜, 下划线
Lorem ipsum dolor.

2.2 多媒体标签

<img>图片标签,在html页面中引用⼀张图⽚。

<img src="image/registImg.jpg" alt="图片无法显示时的代替文本"
 width="200px" height="200px" title="⿏标移上显示" />

<video>视频标签,在html页面中加入⼀个视频；

<video src="../media/video.mp4" controls loop autoplay ></video>
                               (可控制的,循环播放,自动播放)

<audio>音频标签,在html页面中添加⼀段音乐。

<audio src="../media/audio.mp3" controls></audio>

<iframe>嵌入第三方视频

<iframe height=498 width=510 src='https://.....' frameborder=0 'allowfullscreen'></iframe>

2.3 列表标签

<ol>有序列表,每一项li自动换行

属性:

start起始序号
type 序号类型 (1 ,a ,A ,i ,I)

<ol start="2" type="I">
			<li>苹果</li>
			<li>香蕉</li>
			<li>桃</li>
		</ol>

苹果
香蕉
桃

2.无序列表(没有序号)

type 符号类型 circle disc(默认) square

<ul type="square" >
			<li>苹果</li>
			<li>香蕉</li>
			<li>桃</li>
		</ul>

苹果
香蕉
桃

### 2.4 超链接

<a> 标签 ,属性: href(必备) 链接地址
target 打开方式[_blank _self]—新页面,当前页面

<a href="http://www.baidu.com" target=_blank>百度</a>

百度

用a实现当前页面跳转
准备锚点 <a name=""></a>
进行跳转 href="#name"

<a href="#chap1">跳转到第一段</a>
<a name="chap1">第一段内容</a>

2.4 表格标签

<table>
<caption>标题<caption>
<th>表头<th>
<tr>第一行
<td>第一列</td>
<td>第二列</td>
</tr>
</table>

第一行

标题
表头
第一列	第二列

border: 边框 - 像素
cellspacing: 单元格之间的间隙
cellpadding: 单元格内容和边框之间的距离
align: center 表格居中
width: 表格的宽度
height: 表格的高度
rowspan:合并行数
colspan:合并列数