前端-Day-02

少吃一口饭

已于 2023-02-28 15:30:20 修改

阅读量48

点赞数

分类专栏：前端文章标签： html5 前端

于 2023-02-24 13:10:19 首次发布

本文链接：https://blog.csdn.net/weixin_45916025/article/details/129177439

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、文档的使用

<!--
	文档声明，声明当前网页的版本
	-->
<!doctype html>
<!--
	html的根标签（元素），网页中的所有内容都要写在根元素的里边
-->
<html>
	<!--
		head是网页的头部，head中的内容不会在网页中直接出现,主要用来帮助浏览器或搜索引擎来解析网页
	-->
	<head>
		<!--
			meta标签用来设置网页的元数据，这里meta用来设置网页的字符集，避免乱码问题
		-->
		<meta charset = "utf-8">
		<!--
			title中的内容会显示在浏览器的标题栏，搜索引擎会主要根据title中的内容来判断网页的主要内容
		-->
		<title>网页的标题</title>
	</head>
	<!--
		body是html的子元素，表示网页的主体，网页中所有可见的内容都应该写在body里
	-->
	<body>
		<!--
			网页的一级标题
		-->
		<h1>网页的大标题</h1>
	</body>
</html>

文档网址：https://www.w3school.com.cn/

二、一些快捷键

注释：ctrl+/
快补全：标签+tab
生成框架：！+tab 或！+回车
换行：ctrl+回车
复制：alt+shift+方向键

三、实体

1、语法：
&实体的名字;

<!--
在网页中编写多个空格默认情况会自动被浏览器解析为一个空格
 	1.空格：&nbsp;
 	2. 大于号：&gt;
 	3. 小于号：&lt;
 	4. 版权符号：&copy;
 -->
 <p>
 	今天&nbsp;&nbsp;&nbsp;天气真不错！
 </p>
 <p>
 	a&gt;b&lt;c
 </p>

四、meta标签


<!--
	meta 主要用来设置网页中的一些元数据，元数据不是给用户看的。
	charset 指定网页的字符集
	name 指定数据的名称
	content 指定数据的内容
	keywords 表示网站的关键字，可以同时使用多个关键字，关键字用,隔开
	description 用于指定网站的描述，会显示在搜索引擎的搜索结果中
	title 标签的内容会作为搜索结果的超链接上的文字显示
-->
<meta name = "keywords" content = "HTML5,前端，CSS3">
<meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东">
<meta name="description" content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。">
<!--
	将网页重定向到另一个网站
-->
<meta http-equiv="refresh" content="3;url=https://www.baidu.com">

五、语义化标签

<!--
	在网页中html专门用来负责网页的结构，所以在使用html标签时，应该关注的是标签的语义，而不是它的样式
	-标题标签：
		h1-h6 一共6级标题，重要性依次递减。
		h1在网页中的重要性仅次于title标签，一般情况下一个网页只会有一个h1，而且一般只使用h1-h3。
	-在页面中独占一行的元素称为块元素（block element），标题标签也是块元素
-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>

<!--
	块元素（block element）
		-在网页中一般通过块元素来对页面进行布局
		-p元素也是一个块元素
		
	行内元素（inline element）
		-行内元素主要用来包裹文字
		-一般情况下会在块元素中放行内元素，而不会反过来
		-块元素中基本上什么都能放
		-p元素中不能放任何块元素
-->
<p>这是一个段落</p>

<!--
	hgroup标签用来为标题分组，可以将一组相关的标题同时放入到group中
-->
<hgroup>
	<h1>回乡偶书二首</h1>
	<h2>其一</h2>
</hgroup>

<!--
	em标签用于表示语音语调的一个加重
-->
<p>今天也要<em>加油鸭</em></p>

<!--
	strong标签表强调
-->
<p>今天必须<strong>完成学习目标</strong></p>

<!--
	blockquote表示一个长引用
		-在网页中的显示有缩进效果
		-也是块元素，独占一行
-->
<p>鲁迅说<blockquote>时间是海绵里的水。<blockquote></p>

<!--
	q表示一个短引用
		-是行内元素，不独占一行
-->
<p>子曰<q>学而时习之，不亦乐乎</q><p>

<!--
	br标签表示页面中的换行
-->
<br>hello~很高兴认识你！

<!--
	header 表示网页的头部
	main 表示网页的主体部分（一个网页中只有一个main）
	footer 表示网页的底部

	nav 表示网页中的导航
	aside 表示和主体相关的其他内容（侧边栏）
	article 表示一个独立的文章
	section 表示一个独立的区块，上边的标签都不能表示事使用section

	div 没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素
	span 行内元素，没有任何语义，一般用于网页中选中文字
-->
<div></div>
<span></span>