Html5学习笔记(一)

最新推荐文章于 2022-07-26 15:23:35 发布

Ricardo•M•Lu

最新推荐文章于 2022-07-26 15:23:35 发布

阅读量242

点赞数

分类专栏： html5&css3

本文链接：https://blog.csdn.net/weixin_43500988/article/details/94380410

版权

html5&css3 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、什么是Html?
HTML是HyperText Markup Language(超文本标记语言)的简写，它不是一种编程语言，而是一种标记语言，用于告诉浏览器如何构造你的页面。
“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。HTML也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。
推荐使用Sublime文本编辑器。
主流浏览器：google chrome（谷歌）、firefox（火狐）、opera、safari(ios) 、IE（6~11）噩梦。
二、B/S架构
B/S结构（Browser/Server，浏览器/服务器模式），是WEB兴起后的一种网络结构模式，WEB浏览器是客户端最主要的应用软件。这种模式统一了客户端，将系统功能实现的核心部分集中到服务器上，简化了系统的开发、维护和使用。客户机上只要安装一个浏览器，服务器安装服务器软件，数据库软件等。在手机或电脑上用浏览器上百度搜索、看新闻等就是在使用“B/S”结构进行数据交互。
C/S结构（Client/Server），即“客户端/服务器”模式。C/S结构是一种软件系统体系结构，这种结构是将需要处理的业务合理地分配到客户端和服务器端，这样可以大大降低通信成本，但是升级维护相对困难。比如我们手机中安装的微信、qq、王者荣耀等应用程序就是C/S结构。
三、网络基础知识
1.http协议
HTTP即HyperText Transport Protocol（超文本传输协议），用于传送WWW方式的数据，该协议采用了请求/响应模型。
客户端：向服务器发送请求，请求头包括请求的方法、URL、协议版本、以及包含请求修饰符、客户信息等；
请求报文：
请求行：GET /app01/index.html；
请求头：proxy firefox；
请求体：username=terry&password=123
服务器端：以一个状态行作为响应，响应内容包括：协议的版本、成功或错误编码、包含服务器信息、实体元信息以及可能的实体内容。
回应报文：
响应行：200、500、404…
响应头 ContentType:text/html;charset=utf-8；
响应体 index.html(流 io)；
响应行 404 NOT FOUNT
浏览器（css解析器，html解析，js解析器）：
使用内置的html解析器进行解析，使用utf-8进行解码，浏览器将html解析出来。
2.URL
URL（统一资源定位符），每个网页都有自己的Internet地址，在浏览器的地址栏中输入一个URL或者单击一个超链接时，URL就确定了要浏览的地址，浏览器通过超文本传输协议(HTTP)，将Web服务器上站点的网页代码提取出来并翻译成网页。
URL格式：http://192.168.1.101/test/index.html
四、HTML文档
在这里插入图片描述

<!DOCTYPE html>表示当前的html版本为H5；
<head>标签内的内容不会被显示到浏览器视口中；
<meta charset="UTF-8">当前文本的编码方式为utf-8；
<title>用来声明当前文档的标题，标题将会出现在浏览器的选项卡中；
<body>所有想要显示在浏览器中的元素都被包含在该元素中。

1.HTML元素
一个Html元素是由一个开始标签，一个结束标签，以及内容组成，标签决定内容的特性，且可嵌套使用。分为单标签元素和成对标签元素。
2.块级元素
特点：独占一行空间、可以指定宽高，默认宽度为100%、高度由内容决定；
注意：不要将块级元素嵌套在行内元素中；
用法：一般用于布局段落。

元素种类：<div></div>、<p></p>、<ul></ul>、<ol></ol>、<dl></dl>、<h1></h1>

3.行内元素
特点：与其他元素共享一行空间、无法为其指定宽高、宽高默认由内容决定，没有行高，高度一般给子元素设定；
用法：一般被嵌套在块级元素中，作为段落的一部分出现。

元素种类：<span></span>、<a href=""></a>、<img src="" alt="">

4.替代元素

替代元素已经脱离了CSS的范畴，它们的表现不依赖CSS，典型的替换元素有<img>，<object>，<video>，<textare>，<input>，<audio>，<canvas>等。

5.HTML元素属性
与元素相关的特性称为属性，属性由键值对组成。属性信息不会出现在实际内容里。属性应该设置在开始标签内，标签名后，属性名和属性值之间通过’='分割，属性与属性之间通过空格进行分割。属性名大小写不区分，属性值可以使用双引号、单引号、没有引号。建议使用双引号括起来。
6.核心属性
id：唯一标识；
class：标识一类元素；
style：样式；
title：描述信息；
7.特有属性

<img src="" alt="">
<video src=""></video>
...

8.扩展属性

<li data-url="/user"></li>
data-* 属性用于存储页面或应用程序的私有自定义数据。

9.HTML语法
空白：在文档中无论出现多少个空白或者换行，浏览器都解析为一个空格；
实体：在HTML中，某些字符是预留的，无法直接使用所以必须在 HTML 源代码中使用字符实体，实体以&符开始，以;结尾。
注释：注释会被浏览器忽略而不被解析；

<!-- 空白/空格 -->
<div>空格</div>
<div>空  格</div>
<!-- 空格实体 -->
<div>空&nbsp;&nbsp;格</div>
<!-- <  > 符号 -->
<div>&lt;空格&gt;</div>
<!-- "" ''符号 -->
<div>&quot;空格&quot; &apos;空格&apos;</div>
<!-- & 符号 -->
<div>&amp;</div>
<!-- 显示屏上显示出&amp; -->
<div>&amp;amp;</div>

10.HTML标签

段落：
<p>I am a paragraph, oh yes I am.</p>
标题：
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
列表：
	 有序列表（ol）：子元素 li，序号默认从1 开始；
     无序列表（ul）：子元素 li；
     列表（dl）：子元素 dt（标题），子元素dd（列表项）。
超链接：
<a href=" ">超链接标签</a>
其中href 表示跳转的目的地，取值如下：
（1）ID值：用于锚点跳转；
（2）URL：使用path来定位文件path又分为相对路径和绝对路径；
（3）Emial：<a href="mailto:licy@briup.com">发送邮件给licy@briup.com </a>。
图片：
<img src="" alt="">：异步交互
（1）src表示图片的URL地址（取值必须为URL）；
（2）alt 表示替换图片的文本内容，当url地址出错时，将会显示alt的内容。
表格：
（1）<table>在Html文档中代表表格；
（2）<thead>表示表头，包含了<tr>以及<th>（也可使用<tr><t>）；
（3）<tfoot>表示表脚，包含了对表的总结信息；
（4）<caption>表示表格的标题信息；
（5）<tr> 表示表格的行，可以包含<td>,<th>元素；
（6）<td>表示表格用来包含数据的单元格、<th>常用于表头。
属性：
colspan：跨列数；
rowspan：跨行数；
width：宽度，当宽度太窄以至于无法正确显示单元格内容时，在 页面显示的时候会适当的调整。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表格</title>
</head>
<body>
	<table>
		<caption>表格信息</caption>
		<thead>
			<tr>
				<th>表头</th>
				<th>表头</th>
				<th>表头</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>一</td>
				<td>二</td>
				<td>三</td>
			</tr>
			<tr>
				<td colspan="3">跨列</td>
			</tr>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
			</tr>
			<tr>
				<td rowspan="2">跨行</td>
				<td>one</td>
				<td>one</td>
			</tr>
			<tr>
				<td>two</td>
				<td>two</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td>表脚</td>
				<td>表脚</td>
				<td>表脚</td>
			</tr>
		</tfoot>	
	</table>
</body>
</html>

在这里插入图片描述
11.H5新增标签

（1）<header>：具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含搜索表单或logo；
（2）<nav>：可以用作页面导航的链接组，其中导航元素链接到其他页面或当前页面的其他部分；
（3）<article>：代表文档，页面或应用程序中独立的，完整的，可以独自被外部引用的内容，也可以嵌套使用；
（4）<section>：作为Html文档独立的功能（类似<div>标签）；
（5）<aside>：表示当前页面或文章的附属信息部分，它可以包含当前页面或主要内容相关的引用，用于有别于主要内容的部分；
（6）<footer>：作为其上层父级内容区块或是一个根区块的脚注。footer通常包括其相关区块的脚注信息，如作者，相关阅读连接以及版权信息等。同一页面中未限定footer元素的个数。
（7）<address>：用来在文档中呈现联系信息，包括文档作者或文档维护者名字、网站链接、电子邮箱等跟文档相关的联系人的所有联系信息。

Ricardo•M•Lu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html5学习笔记(一)

一、什么是Html?HTML是HyperText Markup Language(超文本标记语言)的简写，它不是一种编程语言，而是一种标记语言，用于告诉浏览器如何构造你的页面。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。HTML也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如...
复制链接

扫一扫

专栏目录