01.web入门之-HTML

XYDrestart

已于 2023-10-09 09:49:38 修改

阅读量1.2k

点赞数 2

分类专栏： 04web 文章标签： html html5 javascript

于 2021-09-09 10:08:43 首次发布

本文链接：https://blog.csdn.net/weixin_37636107/article/details/120184182

版权

04web 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

1. 什么是HTML

HTML(Hyper TextMarkup Language):超级文本标记语言，一种文本类型的语言。
作用：创建web页面/文档
使用带有尖括号的”标记”将网页中的内容逐一标识出来！
- 用来设计网页的标记语言
- 用该语言编写的文件，以.html或.htm为后缀
- 由浏览器解释执行
- HTML页面上，可以嵌套使用脚本语言的程序段，如:VBScript,JavaScript
相关工具
- 开发工具：任何一款能够编辑文字的工具
- 运行工具：浏览器，能够解析HTML代码以及解析JS脚本语言

2. 标记语法

HTML用于描述功能的符号为“标记”，
比如	<p>、<html>等 标记在使用时必须使用尖括号（<>）括起来
 
有封闭类型标记也有非封闭类型的标记 封闭类型标记（也叫双标记）;
必须成对出现 <标记>内容</标记> 封闭类型的标记必须成对出现
如果一个应该封闭的标记没有被封闭，则会出现意料不到的错误。

2.1 元素

元素，即标记
每一对尖括号包围的部分

如：<body></body>包围的部分就叫做body元素

元素就像是小标签，用于标识网页文档的不同部分
元素可以包含文本内容和其他元素，也可以是空的，比如前面所描述的空标记。

元素嵌套
- 元素之间可以相互嵌套，形成更为复杂的语法
- 在嵌套元素时需要注意标记的嵌套顺序

2.2 属性和值

属性用来修饰元素
- 属性的声明必须位于开始标记里
- 一个元素的属性可能不止一个，多个属性之间用空格隔开
- 多个属性之间不区分先后顺序
每个属性都有值
- 属性和属性值之间用等号连接
- 属性的值包含在引号中，多个属性间通过空格来区分

align属性：控制文本在标签内的水平对齐方式（left,center,right）

标准属性（公共属性，通用属性）

大部分标签所具备的属性：
- id ：定义所在标签的唯一标识名称
- title：鼠标移入到当前标签所在区域时所显示的文字
- class：引用样式表中的执行类样式
- style：定义当前标签的行内样式
注释

为代码添加适当的注释是一种良好的编码习惯
注释只在编辑文档情况下可见，在浏览器展示页面时并不会显示

添加注释的语法如下：

<!--注释的文本内容-->
<!--注释部分-->
<h1>这是标题</h1>

1“<！–”和“–>”之间的任何内容都不会显示在浏览器中
2.注释不可以嵌套在其他注释中
3.注释不可以嵌在<>中

3. HTML和XHTML以及H5

3.1 HTML和XHTML

1999年12月24日，W3C(万维网联盟)非官方机构推荐标准HTML4.01
XHTML于2000年的1月26日成为W3C标准
与HTML4.01几乎相同,但更严格更纯净的HTML版本

<p>This is a <br>paragraph
		XHTML元素必须被关闭，空标记也要关闭
<p>This is a <br/></p>

3.2 HTML5

HTML5的标准，就是更为简洁的HTML代码

<p align=“right”>This is a <br/>paragraph</p>
或者
<p align=right>This is a <br>paragraph</p>

<input type = “text” readonly=“readonly”>
或者
<input type=“text” readonly/>

不在严格要求，并保证兼容性

4.文档类型声明

html页面
文件头：
文档主体部分：
在这里插入图片描述

在文档的其实用DOTYPE声明指定版本和风格
- 让浏览器清楚文档的的版本，类型和风格
- DTD：数据定义文档（文档类型声明）
  Strict DTD:严格型
  Transitional DTD：过度型
  Frameset DTD：框架集（现在基本不用）
  HTML5

<!DOCTYPE THML>

5. html元素

整个文档的包含元素
在DOCTYPE的文档类型声明之后
按照严格版本（Strict XHMTL1.0），起始的<html>标记中必须包含命名空间标识符

有两个子元素

<head>页面的头部内容
	作用：网页头部，主要包含网页的说明信息
	网页标题
	网页编码格式
	声明内部样式表
	引入外部样式表
	声明内部JS脚本
	引入外部JS
	声明其他元素，如关键字，描述等... ...
<body>页面的主体内容

6.网页标题

<title></title>

标题内容会出现在浏览器最上方（分浏览器）
没有任何属性
只能出现在head中
一个网页最多只能有一个标题
不写默认是请求地址

7.页面编码格式

默认编码：ISO-8859-1支持纯英文
修改编码
- 通过meta标签:文档说明信息

<meta http-equiv= "content-type"	content=“text/html;charset=utf-8">

HTML5中：

<meta charset="utf-8"，字符集：文本编码

常用属性：
- http-equiv, 改编码用
- content,
- name
- 添加关键字

<meta name=“keywords” content=“HTML,CSS,JS,WEB,前端”/>

添加描述

<meta name=“description” content=“描述内容”/>

charset

<meta  charset="utf-8"/>

练习:

创建一个网页，添加标题为“我的第一个HTML文档”，
设置编码为utf-8，
添加网页关键字HTML,CSS,WEB前端，
添加网页描述“这是我的第一个HTML文档，包含了我所学到的一部分内容”。
创建文档并添加html doctype,html,head,body
添加title标签
添加meta，说明编码
添加第二个meta，指定关键字keyworkds，和描述description

8. 文本

8.1文本标记的作用

文本是网页上重要的组成部分
直接书写的文本会用浏览器默认的样式显示
包含在标记中的文本则会被显示为标记所拥有的样式
特殊字符
注释
标题元素
段落元素
换行元素
分区元素
……

8.2 文本与特殊字符

空格折叠
多个空格或制表符压缩成单个空格，即只显示一个空格
特殊字符（如空格），需要进行转义（使用字符实体替换）

&lt;：		less than
&gt;：		greater than
空格：		&nbsp;
企业标识：	&copy;
钱币：		&yen;		
<p>The&lt;p&gt;element&nbsp;&nbsp;&nbsp;&copy;2019 by yxd</p>

在这里插入图片描述

8.3.文本样式

文本样式的作用是对文本进行修饰，如加粗，倾斜等

<b>...</b>：加粗
<i>...</i>:倾斜
<u>...</u>:下划线
<s>...</s>:删除线
<sup>...</sup>:上标
<sub>...</sub>:下标

在这里插入图片描述

8.4 标题元素

标题元素让文字以醒目的方式显示，往往用于文章的标题

基本语法：

<h#>..</h#>
#=1,2,3,4,5,6
从<h1>到<h6>,级标题1-标题6

<h1>h1 text</h1>
<h2>h2 text</h2>

使用场合：多数情况下会使用在网页中文章的标题（h2）

8.5 段落元素

<p></p>

注意：成对出现
p提供了结构化文本的方式
结构化：具备一定的格式。
格式：
- 与其他文本用换行区分
- 添加垂直空白距离，作为段落的间距
常用属性：
align:文本在p标签内水平对齐方式
center
left
right

8.6 换行标记

<br>

在任何地方创建手工换行

8.7 分区元素

多用于布局

块分区元素：

该元素会自动占一行

<div>

行内分区：

众多的行内元素不会换行，在一行显示

<span>

块级：独占一行
div
p
h
… …

作用：多数用在布局上使用
布局：网页上元素所摆放的位置

行内：一行内共存好多个
span,b,i,u,sub,sup，s

作用：包围文本，方便为文本添加效果

8.8 分割线

<hr>		horizontal水平

作用：在网页构建一条水平线
空标记
独占一行，块级元素

常用属性：
	size：尺寸，水平线的粗细程度
	width:水平线的长度
	可以给具体值
	可以给百分比，可随浏览器大小而调整
	align:水平对其方式
	color:颜色

8.8预格式化标签

<pre></pre>

保留源文档中的格式
保留原来的换行和空格

9.图像和链接-URL

9.1URL

URL(Uniform Resource Locator):统一资源定位器
用来表示网络中的任何资源
- 文本，图片，音视频文件，段落，或其他超文本
路径，从当前位置到目标位置所经过的路线
路径在Web页面主要有三种形式：
- 绝对路径
- 相对路径
- 根相对路径

9.2 绝对路径

文件从最高级目录下开始的完整的路径
E:\Spring\SpringTransaction\SpringTransaction.md
特点：无论当前资源路径是什么，使用绝对路径总能找到需要的资源。
完整的URL组成：
服务器:http://www.baidu.com/img/logo.png
组成：http协议://主机名或域名/目录路径/文件

9.3 相对路径-同级

指文件的位置是相对于当前文件的位置，它包括目录名，或执行一个可以从当前目录触发找到该文件的路径

在这里插入图片描述
相对路径-父找子

相对路径-心法
平级用名字
自己进目录
父级向上反

根相对路径

所有的路径表示，都是用“/“
/ 服务器的根目录
/images/user.jpg

9.4 图像

9.4.1 图像格式

JPEG(图形图像联合专家组，Joint Photopraphic Experts Group)
采用有损压缩算法，压缩比较大
GIF(图形接口格式，Graphics Interface Format)
使用256色的方法来压缩图像，色彩会有较大的失真
主要用于线条为主的图像，或者图像面幅很小时，另外GIF支持动画和透视图像
PNG(可移植网络图形，Portable Network Graphic)
采用无损压缩，有8位，24位，32位三种形式
支持透明（PNG24位不支持），但不支持动画
显示颜色可达1670万种

9.5 图像元素

使用<img>元素图像添加到页面
空标记
必须属性：src
常用属性：
	src
	width
	height
	title:鼠标移入时所提示的文字
	alt:图片不显示时提示的文字
<img width=“1000px;”src=“image/rose.jpg”/>

9.6 链接

使用<a>元素创建一个超级链接，语法如下：

<a href=“”target=“”>ClickMe</a>
属性：
href:链接URL
target：目标，可取值为：
_blank（新窗口）
_self（在当前窗口打开链接页面）
name:定义锚点的名称
链接的各种表现形式：
下载资源  <a href=“abc.rar”></a>
页面跳转	<a href=“abc.html”>to abc</a>
电子邮件链接	<a href=“mailto:15319400***@163.com>联系我</a>
返回页面的空链接		<a href=“#”></a>
链接到Javascript	<a href=“javaspript: ;”></a>

通过a定义锚点
HTML中的锚点相当于是html文档中某个位置的记号
定义锚点

<a name=“anchorName”></a>

跳转到锚点处

<a href=“#anchorName”>Return</a>

跳转到其他页面的锚点出

<a href=“RUL#anchorName”>Return</a>

10.表格

10.1 表格的作用

表格通常用来组织结构化的信息
表格是一些被称作单元格的矩形框按照从左到右，从上到下的顺序>- 排列在一起而形成的。
表格的数据保存在单元格里
显示表格数据
设置页面布局

在这里插入图片描述

10.2创建表格

定义表格：使用成对的

标记
创建表行：使用成对的标记
创建单元格：使用成对的标记

<table>元素
width：设置表格宽度
height:是指表格高度
align：设置表格水平对齐方式（left/center/right）
border:设置表格边框宽度
cellpadding:设置内边距（单元格边框与内容之间的距离）
cellspacing:设置外边距（单元格之间的距离）
bgcolor:设置表格背景色

<tr>元素
align:设置水平对其方式（left/center/right）
valign:设置垂直对其方式（top/middle/bottom）


<td>元素
align:设置水平对其方式（left/center/right）
valign:设置垂直对其方式（top/middle/bottom）
width:设置宽度
height:设置高度
colspan：设置单元格垮列
rowspan：设置单元格垮行

10.3 表格标题

使用元素为表格定义标题

标签必须紧随标签之后，且只能对每个表格定义一个标题默认情况下，标题将在表格上方居中显示 ![在这里插入图片描述](https://img-blog.csdnimg.cn/0ae5446f23d148688dec3caa26100f4a.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAd2VpeGluXzM3NjM2MTA3,size_11,color_FFFFFF,t_70,g_se,x_16)

10.4 表格复杂应用-行分组

表格可以划分3个部分：表头，表主体和表尾
表头行分组：<thead></thead>
包含一个或多个<tr>元素
表主体分组：<tbody></tbody>
包含一个或多个<tr>元素
表尾行分组：<tfoot></tfoot>
包含一个或多个<tr>元素
行分组后：
会影响高度分布
会影响跨行，跨行不能跨组

<table border="1px;" width="300">
	<caption>表2</caption>
<thead align="center">
	<tr>
	<td>姓名</td>
	<td>年龄</td>
	</tr>
</thead>
<tbody align="right">
	<tr>
		<td>jeck</td>
		<td>12</td>
	</tr>
	<tr>
		<td>rose</td>
		<td>23</td>
	</tr>
</tbody>
</table>

在这里插入图片描述

10.5 不规格表格

设置单元格<td>的跨行或者跨列属性
跨列：colspan
水平方向延伸单元格，值为整数，代表此单元格水平衍生的单元格数
跨行：rowspan
垂直方向延伸单元格，值为整数，代表此单元格垂直延伸的单元格数

在这里插入图片描述

10.5

嵌套表格
在单元格中放置另外一个表
即元素中再包含

元素
使用嵌套的表格以设计发杂表格或者复杂布局

在这里插入图片描述

11.列表

列表的作用
列表是将具有相似特征或者具有先后顺序的几行文字进行对齐排列
所有的列表都由列表类型和列表项组成

列表类型：
<ol>有序列表
<ul>无须列表
列表项：
<li>:列表项，用于指示具体的列表内容

在这里插入图片描述

11.1有序列表<ol>

<ol>元素编写有序列表，用于列出页面上有特定次序的一些项目
<ol>元素中只能包含列表项元素<li>
属性：
	start属性
	type属性

数字默认
a,小写字母
A，大写字母
i，小写罗马数组
I，大写罗马数字

在这里插入图片描述

11.2无须列表<ul>

<ul>元素表示无须列表，用于列出页面上没有特定次序的一些项目
<ul>元素中只能包含具体的列表项元素<li>
<ul type=“列表类型”>
<li>
	<li>...</li>
	<li>...</li>
	...
</li>

type属性：
disc：实心圆（默认）
circle:空心圆
square:实心矩形

在这里插入图片描述

<ul type="square">
	<li>java基础
		<ol>
			<li>语法基础</li>
			<li>api</li>
		</ol>
	</li>
	<li>web基础
		<ol>
			<li>html基础</li>
			<li>css</li>
		</ol>
	</li>
</ul>

11.3 定义列表<dl>

定义列表往往用于要给出一类事物的定义的情形，如名词解释，字典等

标记定义一个定义列表标记定义一个定义列表中的一个术语

标记定义一个定义列表中的术语提供定义

<dl>
	<dt>计算机</dt>
		<dd>用来计算的仪器...</dd>
	<dt>显示器</dt>
	<dd>以视觉方式显示信息的设备</dd>
</dl>

练习：
使用列表元素为html文档添加导航目录

12.表单

表单用于显示，收集信息，并提交信息到服务器
表单有两个基本部分
- 实现数据交互的可见的界面元素，比如文本框或按钮
- 提交后的表单处理
界面元素
- 使用<form>元素创建表单
- 在<form>元素中添加其他表单可以包含的控件元素

12.1 定义表单

使用成对的<form></form>标记
主要属性
	action:定义表单被提交时发生的动作，通常包含服务方脚本的URL（比如JSP,PHP）
	method：指出表单数据提交的方式，取值为get或者post
	enctype:表单数据进行编码的方式
	name:表单名称

12.2 表单控件

表单可以包含很多不同类型的表单控件
表单控件元素是包含在表单元素中具有可视化外观的表单控件元素有HTML元素，用于访问者输入信息
input元素：文本输入控件，按钮，单选，和复选按钮，选项框，文件选择框和隐藏控件等
textarea元素
select和option元素
其他元素
<input>元素

<input>元素用于收集用户信息
该元素是一个单标记，语法为：<input/>
主要属性
type:根据不同的type属性值，可以创建各种类型的输入字段，比如文本框，复选框等
value：控件的数据
name：控件的名称，用来传递数据到服务器的访问依据
disabled:禁用控件

文本框与密码框

文本框：<input type = “text”/>
密码框 :  <input type=“password”>

主要属性
name:名称
value:由访问者自由输入的任何文本
maxlength:限制输入的字符数
readonly:设置文本控制只读

<form>
<input type="text" value="jeck" 
	name="username" maxlength="6" /><br/><br/>
<input type="password" name="pwd" />
</form>

在这里插入图片描述

单选框：<input type=“radio”/>
复选框：<input type=“checkbox”/>

主要属性：
name：设置名称，并用于分组，一组单选框或者复选框的名称必须相同
value：文本，当提交form时，如果选中了此单选按钮，那么value被发送至服务器
checked：设置默认被选中

性别:
<input type="radio" name="sex" value="1" />女
<input type="radio" name="sex" value="0">男
<input type="radio" name="sex" value="2" checked="checked">保密
<br><br>
喜欢的城市
<input type="checkbox" name="cities" value="1">西安
<input type="checkbox" name="cities" value="1">咸阳
<input type="checkbox" name="cities" value="1">成都
<input type="checkbox" name="cities" value="1">广元

在这里插入图片描述
按钮

提交按钮：<input type=“submit”>
传送表单数据给服务器端或其他程序处理
重置按钮：<input type=“reset”>
清空表单的内容并把所有表单控件设置为最初的默认值
普通按钮：<input type=“button”/>

用于执行客户端脚本

主要属性：
name：名称
value：按钮的标题文本
隐藏域和选择框
隐藏域：<input type=“hidden”/>
在表单中包含不希望用户看见的信息
name 属性：名称
value 属性：值
文本选择框：<input type= “file”/>
name属性：名称

12.3 其他控件

<label>元素
语法：文本
主要属性：
for：表示与元素相联系的控件 ID 值
作用：
将文本与控件联系在一起后，单击文本，效果就等同单击控件一样

12.4 选项框（下拉选)

两种：下拉选项框和滚动列表
name:选项框命名
size：大于1，则为滚动列表
multiple:设置多选
:创建选项框
name：就是将选中的数据发送到服务器去的依据。
<option>：选项
value:选项的值
selected:预选中

选择课程
<select>
	<option value="1">java</option>
	<option value="2">c#</option>
	<option value="3">PHP</option>
</select>

在这里插入图片描述

选择课程<br>
<select size="4">
	<option value="1">java</option>
	<option value="2">c#</option>
	<option value="3">PHP</option>
</select>

在这里插入图片描述

12.5 文本域

<textarea>元素
多行文本输入框

主要属性：
name：名称
cols：指定文本区域的列数
rows：指定文本区域的行数
readonly：只读

多行文本框：<br>
<textarea name="test" rows="4" cols="20"></textarea>

在这里插入图片描述

12.6为控件分组

<fieldset>元素：为控件分组
<legend>元素：为分组指定一个标题

<fieldset>
<legend>地址信息</legend>
地址:<input type="text" /><br>
邮编:<input type="text">
</fieldset>

在这里插入图片描述

13. 其他常用标记

浮动框架<iframe>元素
可以在一个浏览器窗口中同时显示多个页面文档
在页面上使用<iframe>元素
设置<iframe>元素的src属性，指向其他页面的URL

<body>
	<h1>主页</h1>
	<iframe src="iframe2.html"></iframe>
</body>

在这里插入图片描述

13.1 浮动框架<iframe>

语法
开始标记：必须
内容：可以添加文本描述，当浏览器不支持<iframe>元素时，将显示该文本描述信息
结束标记：必须
主要属性
src : 浮动框架中的页面的url
height : 高度
width：宽度

13.2 摘要与细节

网页上经常需要将部分信息进行展开或者收缩
<details>元素用于定义细节
<summary>元素用来包含元素的标题
<details>元素用于定义细节
可以在此元素里添加文本或者图像等元素
需要与<summary>元素配合使用
< summary>元素用来包含<details>元素的标题
必须包含在<details>元素中
作为<details>元素的第一个子元素

<details>
	<summary>发票信息</summary>
	<div>
		发票抬头：<input><br>
		发票内容：<input>
	</div>
</details>

在这里插入图片描述

13.3 度量元素<meter>

<meter>元素用于定义度量衡
比如用于表示投票人数比例，磁盘的使用量或者统计比例
常用于静态比例的显示（已知最大和最小值）
语法

<meter>文本</meter>

主要属性
min:范围的最小值，默认为0
max：范围的最大值，默认为1
value：度量值，默认为0

设备1：
<meter value="10" min="0" max="100" title="10%"></meter>%<br>
设备2：
<meter value="50" min="0" max="100" title="10%"></meter>%<br>
设备3：
<meter value="90" min="0" max="100" title="10%"></meter>%<br>

在这里插入图片描述

13.4 高亮文本显示<mark>元素

<mark>元素用于定义页面中带有记号的文本
常用于需要突出显示的文本
被<mark>元素包围的文本会显示额外的背景色

<h2>搜索<mark>王者</mark>荣耀</h2>
<p><mark>王者</mark>不可阻挡</p>

在这里插入图片描述

XYDrestart

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
01.web入门之-HTML

1. 什么是HTMLHTML(Hyper TextMarkup Language):超级文本标记语言，一种文本类型的语言。作用：创建web页面/文档使用带有尖括号的”标记”将网页中的内容逐一标识出来用来设计网页的标记语言用该语言编写的文件，以.html或.htm为后缀由浏览器解释执行HTML页面上，可以嵌套使用脚本语言的程序段，如:VBScript,JavaScript相关工具开发工具：任何一款能够编辑文字的工具运行工具：浏览器，能够解析HTML代码以及解析JS脚本语言
复制链接

扫一扫