HTML5第一周

最新推荐文章于 2022-05-08 12:17:30 发布

藏空满

最新推荐文章于 2022-05-08 12:17:30 发布

阅读量163

点赞数

分类专栏： HTML学习笔记

本文链接：https://blog.csdn.net/weixin_50887531/article/details/113771286

版权

HTML学习笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

怎么写HTML文件

1.新建记事本，在里面写好代码。
2.该记事本的后缀名为.html。
3.用浏览器打开这个文件

重要网站

w3school是html的官方网站。有不懂的地方可以上去找找。

基础模板：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

head元素

包含title元素和meta元素

1.title元素

页面的标题位于<title>标签内，可以包含任何字符或实体。

页面的标题作用：
	1.在标题栏中显示标题
	2.作为浏览器快捷方式或收藏夹默认的名称

2.meta元素

<meta>标签主要分为两大类：一类对页面进行设置，一类对搜索引擎进行设置。

常用的属性有：
	1.name：
		1.keywords：定义页面的关键词。使用content属性提供网页的关键词。
		2.description：定义页面的描述内容。使用content属性提供网页的描述内容。
		3.robots：用来告诉搜索引擎页面是否允许索引与查询。content的参数默认是all。
		4.author：标注网页的作者。
	2.http-equiv：
		1.content-type：设定页面使用的字符集。
		2.refresh：自动刷新并转到新页面。
		3.set-cookie：设置页面缓存过期时间。如果网页过期，那么存盘的cookie将被删除。
		4.expires：用于设定网页的到期时间。一旦网页过期，必须从服务器中重新加载内容。
	3.content
		1.text：内容文本。用来描述name和http-equiv属性的相关内容。

文本元素

包括内容标题、文本修饰以及特殊字符。

1.标题标签

从一级开始（级别最高）逐渐降低至六级。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>一级标题</h1>
		<h2>二级标题</h2>
		<h3>三级标题</h3>
		<h4>四级标题</h4>
		<h5>五级标题</h5>
		<h6>六级标题</h6>
	</body>
</html>

2.文本修饰标签

常用的

标签	描述
<font>···</font>	用于设置文本的字体样式
<b>···</b>	加粗
<i>···</i>	斜体
<s>···</s>	添加删除线
<u>···</u>	添加下划线
<sup>···</sup>	上标
<sub>···</sub>	下标
<strong>···</strong>	加粗，和<b>功能相同
<big>···</big>	元素中的内容显示时比周围文本大一个字体尺寸
<small>···</small>	元素中的内容显示时比周围文本小一个字体尺寸

示例：标签设置字体样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<font face="隶书" size="5" color="blue">通过font标签设置字体的样式</font>
		<font face="等线" size="+2" color "#FF0000">通过font标签设置字体的样式</font>
		<font face="宋体" size="-1" color="red">通过font标签设置字体的样式</font>
	</body>
</html>

详细的标签请访问 HTML 参考手册

3.特殊字符

有些字符不能直接使用，有一些字符不能从标准键盘上输入，又有些字符可能造成浏览器歧义。
因此需要通过特殊编码进行引用，又称为“字符实体”

具体怎么使用可以访问 HTML ISO-8859-1 参考手册

文档结构元素

1.段落标签：

2.换行标签：

 

<br />只是换行功能，而<p>标签会在段落之前形成一定的距离

3.水平线标签：

<hr />

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<hr size = "3" noshade = "noshade" color = "blue" width = "400px" align = "right"/>
		<!--在浏览器中绘制了一条宽度400px、高度3px、颜色为蓝色的水平分割线，并且靠右显示-->
	</body>
</html>

列表元素

1.有序列表

<ol>
<li></li>
</ol>

使用一些数值或字母作为编号，可以通过type属性指定编号的样式。
	1代表阿拉伯数字
	a代表小写英文字母，
	A代表大写英文字母，
	i代表小写罗马数字
	I代表大写罗马数字

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ol type='1' start='1'>
			<li>列表项1</li>
			<!--会显示 1.列表项1 -->
			<li>列表项2</li>
			<!--会显示 2.列表项2 -->
			···
		</ol>
	</body>
</html>

2.无序列表

<ul>
<li></li>
</ul>

使用项目符号作为编号，可以通过type属性设置列表的图形前缀（大部分浏览器默认是disc）
	circle（圆）
	disc（点）
	square（方块）
	none

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul type='disc'>
			<li>列表项1</li>
			<!--会显示 ·列表项1 -->
			<li>列表项2</li>
			<!--会显示 ·列表项2 -->
		</ul>
	</body>
</html>

3.定义列表

<dl>
<dt></dt> 
<dd></dd> 
</dl>

定义列表同时存在1~n个子项，每个子项同时包含标题和描述两个部分。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<dl>
			<!--第一项开始-->
			<dt>标题1</dt>
			<dd>描述1</dd>
			<!--第一项结束-->

			<!--第二项开始-->
			<dt>标题2</dt>
			<dd>描述2</dd>
			<!--第二项结束-->
			···
		</dl>
	</body>
</html>

div 与 span 标签

<div> 标签用来实现区域块的定义
语法：

<div style="块元素的样式" class="类服务器名称" align="对齐方式">
内容部分
···
</div>

style 属性用于设置 div 元素的行内样式；
class 属性用于引用CSS的类选择器；
align 属性用于设置 div 元素中内容的对齐方式，取值范围是 left、right、center、或 justify，目前该属性使用较少，多用CSS样式替代。

标签用来实现行内块的定义
语法：

<span style="块元素的样式" class="类选择服务器名称" align="对齐方式">内容部分</span>

style 属性用于设置 span 元素的行内样式；
class 属性用于引用CSS的类选择器；
align 属性用于设置 span 元素中内容的对齐方式，取值范围是 left、right、center、或 justify，目前该属性使用较少，多用CSS样式替代。

<html>
	<head>
		<title>div 与 span 示例</title>
	</head>
	<body>
    	<div class="bar-content">
    	<span class="c-gray">草稿</span>
    	</div>
	</body>
</html>

URL 简介

统一资源定位符（简称URL）用于指定web资源所在的位置，如同在网络上的门牌。
URL是Internet上标准的资源地址，又称为网页地址或网址。

URL包含3个关键部分：协议、主机地址和文件路径。

协议

网页通常采用 HTTP 超文本传输协议传递信息，对应的网址基本使用 http:// 前缀；
而电子商务等网站对安全性要求更高时，多采用 https 协议（https://前缀）；
文件上传下载时，多采用 ftp:// 前缀。

主机地址

一般是网站的域名，如www.bilibili.com
也可以使用 IP 地址，例如 127.0.0.1

文件路径

绝对路径：指完整的路径，是该资源在 Internet 上唯一地址。
相对路径：相同对路径更加简洁、便于维护。当页面中提供的地址是相对路径时，浏览器会将相对 URL 转成完整的绝对 URL 后再获取资源。
- 相同目录。在页面中，当被访问资源和网页位于同一个目录下时，可以直接进行访问。
- 子目录。当访问子目录中的资源是，路径需包含目录的层级结构。每添加一级子目录，需在路径中添加目录名和 / 。
- 父目录。当访问引用父目录中的资源时，可以使用 “ …/ ” 表示上一级目录。每重复一次 “ …/ ” ，目录就往外一层。
- 根目录。根目录以 “ / ” 符号开始。
注意：
相对路径仅适用于连接相同网站中的内容，不能用于链接其他域名下的资源。而根目录方式在本地访问时无法实现，只有站点内容上传到 Web服务器上才能展示效果。

藏空满

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML5第一周

怎么写HTML文件1.新建记事本，在里面写好代码。2.该记事本的后缀名为.html。3.用浏览器打开这个文件重要网站w3school是html的官方网站。有不懂的地方可以上去找找。基础模板：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body>
复制链接

扫一扫