web前端——初识HTML

最新推荐文章于 2025-11-16 15:22:52 发布

原创最新推荐文章于 2025-11-16 15:22:52 发布 · 5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#web #html

web前端专栏收录该内容

1 篇文章

订阅专栏

1、只要你的电脑装上服务器软件（如apache），你的电脑就可以当作服务器，别人就可以在有网的情况下，通过浏览器访问你的网页或文件。

2、为什么第一次访问浏览器比较慢，第二次比较快，因为浏览器自带缓存功能，会缓存网页信息，在谷歌浏览器地址栏输入chrome://version，或在Edge浏览器地址栏输入edge://version，可以查看浏览器缓存位置，如：用户配置路径C:\Users\86177\AppData\Local\Microsoft\Edge\User Data\Default，Cache是缓存的意思，浏览器缓存的数据都在这个文件夹里面。

3、txt是纯文本文件，docx是非纯文本文件，相同的内容（i love you），txt文件大小为10字节，而docx文件大小为12192字节，所以纯文本文件更小，传输速度更快。

4、网页中插入h1标签，代表的含义是向网页中插入一个一级标题，同理，网页中插入h2标签，代表的含义是向网页中插入一个二级标题，标题等级不同字体大小也不同。

5、安装sublime
5.1 打开链接，点击DOWNLOAD FOR WINDOWS，下载并安装；
5.2 打开链接，下载Package Control.sublime-package，放在C:\Users\86177\AppData\Roaming\Sublime Text\Installed Packages里面；
5.3 打开链接，下载Emmet.sublime-package，放在D:\Program\Sublime Text\Packages里面

6、使用sublime快捷键
!+Tab：快速生成网页骨架
h1+Tab：自动补齐<h1></h1>
h1*3+Tab：自动补齐<h1></h1><h1></h1><h1></h1>

7、html标签：根标签，网页制作的其他标签必须在它里面书写；
title标签：①收藏网页的时候，当作标题用；②网页排名的时候，当作关键字用；

8、<!DOCTYPE html>：表示使用的是HTML5骨架；
<html lang="en">：表示使用英文书写标签；
<meta charset="UTF-8">：表示标签里面的文字内容支持使用汉字；

9、双标签：既有开始标签，也有结束标签，也有显示内容，如<h1>第一主标题</h1>；
单标签：有开始标签，但没有结束标签，也没有显示文字内容，如<hr/>；

10、文本级别标签，如p、img、a等，只能显示文字内容和其他级别的文本标签，否则网页布局会受到影响；
容器级别标签，如h1、ul、ol等，可以显示文字内容、文本标签和其他级别的容器标签；

11、标签属性。标签可以添加属性，属性由属性名和属性值两部分组成，标签属性可能对于整个网页有影响，也可能只对某一标签有影响。标签属性放置在开始标签里，标签名和属性名之间用空格隔开，属性名和属性值用等号连接，如<h1 class="box"></h1>，一个属性名可以有多个属性值，属性值之间用空格隔开，如<h2 class="box1 box2"></h2>，一个标签可以有多个属性，属性之间用空格隔开，如<h3 class="box3" id="box4"></h3>。

12、标签与标签之间对于换行、空格不敏感，效果是一样的，但是为了美观，最好对齐。

13、想制作精美的网页，一是要学习好标签，二是要学习好样式。

14、h标签。h1~h6，他们都是兄弟关系，不是父子关系，所以不要嵌套。一般网页只有一个h1标签，h1权重最高，一般网页logo使用h1标签。

15、img标签。img标签为文本级别标签，把它当作一个文字使用即可，同时它是单标签。img标签常用属性：
src：图像路径，可以是相对路径，也可以是绝对路径，<img src="imgs\logo.jpg" alt="图像丢失">；
width：图像宽度；
height：图像高度；
title：图像标题，当用户鼠标移到图像上时显示的提示文字；
border：边框，设置图像外层边框的宽度;
alt：当没有图像的时候，用文字进行替代;

16、a标签。a全称anchor，锚点，俗称超链接，它的作用是实现不同页面跳转，或同一页面不同位置跳转。a标签是文本级别标签，同时它是双标签。a标签常用属性：
href：即将跳转到的网页的地址，可以是相对路径，也可以是绝对路径，<a href="http://www.baidu.com">跳转到百度</a>。即将跳转到的锚点的属性值，任意标签都可以当作锚点，多个锚点的属性值不能重名，<p id="001">首段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <a href="#001">返回首段落</a>；
title：锚点标题，当用户鼠标移到锚上时显示的提示文字；

17、ul标签。ul全称unorder list，无序列表。li标签。li全称list item，容器中的每一项。ul标签里面只能嵌套li标签，li标签不能脱离ul标签单独使用，li里面可以放任意内容。ul和li都是容器级别标签，同时它们都是双标签。

	<h1>四大名著</h1>
	<ul>
		<li>红楼梦</li>
		<li>西游记</li>
		<li>水浒传</li>
		<li>
			<h2>三国演义</h2>
			<ul>
				<li>刘备</li>
				<li>关羽</li>
				<li>张飞</li>
			</ul>
		</li>
	</ul>

18、ol标签。ol全称order list，有序列表，用法与ul一样。

	<h1>四大名著</h1>
	<ol>
		<li>红楼梦</li>
		<li>西游记</li>
		<li>水浒传</li>
		<li>
			<h2>三国演义</h2>
			<ol>
				<li>刘备</li>
				<li>关羽</li>
				<li>张飞</li>
			</ol>
		</li>
	</ol>

19、定义列表。dl全称definition list，列表最外层容器；dt全称definition term，列表主题；dd全称definition description，对列表主题的解释。在使用定义列表时，dl标签需要嵌套dt和dd一起使用，而dt和dd是兄弟级别关系。

	<dl>
		<dt>长城</dt>
		<dd>
			<p>中国古代用作军事防御的一项宏伟建筑。其修筑史之久，工程规模之大，堪称世界建筑史上一大奇迹，亦为宇航员从月球上所能看到地球上的人工构筑物之一。</p>
			<p>长城最早伊始，因文献记载不详，学术界历来持论不一。一说始齐，一说始楚。大约出现于公元前7～前5世纪。及至战国，尤其秦、赵、燕所筑长城工程规模远较其他诸侯国为大。</p>
		</dd>
		<dt>故宫</dt>
		<dd>
			<p>故宫是中国明清两代的皇家宫殿，旧称紫禁城，位于北京中轴线的中心。北京故宫以三大殿为中心，占地面积约72万平方米，建筑面积约15万平方米，有大小宫殿七十多座，房屋九千余间。</p>
		</dd>
	</dl>