前文: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文本标签
<p>
段落标签,自动换行.
<br>
手动换行
特殊字符, 例如 空格, <, >… 需要使用实体字符格式: &xx;
<hr>
分割线
<font>
字体标签,color:颜色,size:大小,face:字体
<font color="#3286BB" size="6" face="arial">Lorem ipsum dolor sit amet.</font>
Lorem ipsum dolor sit amet.
加粗<b>
, 变斜<i>
, 下划线<u>
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>
- 苹果
- 香蕉
- 桃
- type 符号类型 circle disc(默认) square
<ul type="square" >
<li>苹果</li>
<li>香蕉</li>
<li>桃</li>
</ul>
- 苹果
- 香蕉
- 桃
<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:合并列数