HTML&CSS笔记

最新推荐文章于 2021-03-04 21:42:56 发布

钝刀刀斩杂思

最新推荐文章于 2021-03-04 21:42:56 发布

阅读量1k

点赞数 3

分类专栏：笔记 Html+CSS网页设计文章标签： html css 笔记

本文链接：https://blog.csdn.net/qq_43328585/article/details/103153968

版权

HTML&CSS笔记

现在是HTML5和CSS3的天下了！！

此笔记为李立超老师网课内容
插件名称：Tilt.3d-1.0-1-fx.xpi
IDE开发软件：Hbuilder
画图软件：FastStone Draw

课程简介

前端工程师：开发软件
1、软件开发流程
网页设计师根据需求设计网页.jpg–>前端工程师将设计做成静态网页.html–>后台工程师将静态网页修改为动态网页.aspx
2、根据W3C标准，网页主要由三部分组成：结构、表现、行为

结构：HTML用于描述页面的结构
表现：CSS用于控制页面中元素的样式
行为：JavaScript用于响应用户操作

HTML简介

HTML（Hypertext MarkUp Language）超文本标记语言

它负责网页的三个要素之中的结构。
HTML使用标签的的形式来标识网页中的不同组成部分。
所谓超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另一个页面。
以纯文本进行编写网页

标签
标签都是成对出现的，以<>括起来，有开始有结束
以<标签名>括起来，结尾为</标签名>
如<h1>content</h1>//标题
根标签：有且只有一个<html></html>
html的子标签：head、body

<!--
	h5的文档声明，声明当前的网页是按照HTML5标准编写的编写网页时一定要将h5的文档声明写在网页的最上边如果不写文档声明，
	则会导致有些浏览器会进入一个怪异模式，进入怪异模式以后，浏览器解析页面会导致页面无法正常显示，
	所以为了避免进入该模式，一定要写文档声明
-->
<!doctype html>			//在最上面，必须写，声明当前网页是html5标准
<html>					//根标签，有且只有一个，所有的内容都包含在该标签中
	<head>				//head标签，不会直接在页面直接显示，帮助浏览器去解析网页
		<meta charset=”UTF-8”/>	//用来告诉浏览器网页采用的编码字符集是什么，一般为utf-8/GB2312
		<!--
			Title网页的标题标签，默认会显示在浏览器的标题栏中
			搜索引擎在检索页面时，会首先检索title标签中的内容
			它是网页中对于搜索引擎来说最重要的内容，会影响到网页在搜索引擎中的排名
		-->	
		<title>网页的标题</title> 
	</head>
	<body>				//页面中所有可视的内容
		<!-- 
			属性：	可以通过属性来设置标签，如果要处理标签中的内容
					在开始标签中添加属性
					属性需要写在开始标签中，实际上就是一个名称/值对的结构
					属性名 = “属性值” 一个标签中可以同时设置多个属性，属性之间需要使用空格隔开
		-->
		<h1>网页的所有的内容</h1>
	</body>
</html>

注：
在
文本注释标签：<font></font>
文本颜色的设置：<font color=”red”>文字</font>
文本大小的设置：<font size=”1”>文字</font>
字体大小有范围1~7

乱码问题

出现的原因：编码和解码采用的字符集不同
编码：依据一定的规则，将字符转换为二进制编码的过程
解码：依据一定的规则，将二进制编码转换为字符的过程
字符集：编码和解码所需的规则
见的字符集：ASCII（美国）、ISO-8859-1（欧洲）、GBK、GB2312（中文系统默认编码）、UTF-8（万国码）、ANSI（自动编码，智能转换为系统的编码）
解决方法：
在head中添加meta标签，用来告诉浏览器网页所采用的编码字符集
meta标签用来设置网页的一些元数据，比如网页的字符集，关键字、简
meta是一个自结束标签，编写一个自结束标签时，可以在开始标签中添加一个/
e.g. <meta charset=”utf-8”/>

常用标签

标题标签
1、HTML中，一共有六级标题标签：<h1></h1>最高，<h6><h6/>最低
2、使用HTL标签时，关心的是标签的语义，我们使用的标签都是语义化标签
3、6级标题中，h1的最重要，表示一个网页中的主要内容，h2~h6重要性依次降低
对于搜索引擎来说，h1的重要性仅次于title，搜索引擎检索完title，会立即查看h1的内容
h1标签非常重要，它会影响到页面在搜索引擎中的排名，页面只能写一个h1
一般页面中标题标签只使用h1,h2,h3；h3以后基本不使用
段落标签<p></p>
1、p标签
段落标签，段落标签用于表示内容中的一个自然段
使用p标签来表示一个段落
p标签中的文字，默认会独占一行，并且段与段之间会有一个间距
2、换行标签<br />
在TL中，字符之间写再多的空格，浏览器也会当成一个空格解析，换行也会当成一个空格解析。
在页面中可以使用br标签来表示一个换行，br标签是一个自结束标签。
3、水平线标签<hr />
hr标签也是一个自结束标签，可以在页面中生成一条水平线
实体
1、在HTML中，一些如<>这种特殊字符是不能直接使用，需要使用一些特殊的符号来表示这些特殊字符，这些特殊符号我们称为实体（转义字符串）
·浏览器解析到实体时，会自动将实体转换为其对应的字符
2、实体的语法：

&实体的名称;
<	&lt;
>	&gt;
空格	&nbsp;
版权符号	&copy;

3、实体的名称查看搜索W3School离线手册
图片标签
1、使用img标签来向网页中引入一个外部的图片
Img标签也是一个自结束标签
2、属性：

src：设置一个外部图片的路径
src属性配置的是图片的路径，目前我们所要使用的路径全部都是相对路径
相对路径：
相对路径指相对于当前资源（网页文件）所在目录的位置
使用 / 来进入下一级目录，使用 …/ 来返回上一级目录，返回几级目录就写几个
alt：可以用来设置在图片不能显示时，对图片的描述
搜索引擎可以通过alt属性来识别不同的图片
如果不写alt属性，则搜索引擎不会对img中的图片进行收录
width：可以用来修改图片的宽度，一般使用px作为单位
height：可以用来修改图片的高度，一般使用px作为单位宽度和高度两个属性
如果指设置一个，另一个也会同时等比例调整大小
如果两个值同时指定则按照设定的值来设置
一般开发中除了自适应的页面，不建议设置width和height

3、例：（在<body>中） px指的是像素，图片放在上一级目录中的abc文件夹中
<img src=”../abc/文件名.后缀名” alt=”对图片的描述” width=”100px” height=”200px” />
*-*-*此种情况为将图片放在和网页相同的文件路径中
4、图片的格式

JPEG（JPG）
JPEG图片支持的颜色比较多，图片可以压缩，但是不支持透明
一般使用JPEG来保存照片等颜色丰富的图片
GIF
GIF支持的颜色少，只支持简单的透明，支持动态图
图片颜色单一或者是动态图时可以使用gif
PNG
PNG支持的颜色多，并且支持复杂的透明
可以用来显示颜色复杂的透明的图片

5、图片的使用原则：
效果不一致，使用效果好的
效果一致，使用小的
meta标签

meta中有两个属性：name 和 content
meta标签中name中的值是对content中的值的描述

1、使用meta可以用来设置网页的关键字
如：<meta name=”keywords” content=”HTML5,JavaScript” />
2、使用meta可以用来指定网页的描述
搜索引擎在检索页面时，会同时检索页面中关键字和描述，但是这两个值不会影响页面在搜索引擎中的排名
如：<meta name=”description” content=”发布H5、js等相关信息” />
3、使用meta可以用来做请求的重定向
如：
<meta http-equiv=”refresh” content=”5”;url=http://www.baidu.com” />
<meta http-equiv=”refresh” content=”秒数”;url=目标路径” />

xHtml语法规范

1、HTML中不区分大写小写，一般我们都使用小写
2、HTML中的注释不能嵌套
3、HTML标签必须结构完整，要么成对出现，要么自结束标签
4、HTML标签可以嵌套，但是不能交叉嵌套
5、HTML标签中的属性必须有值，且值必须加引号（双引号或单引号都行）
注：浏览器会尽最大的努力去正确的解析页面，你所有的不符合语法规范的内容浏览器会为你自动修正，但是有些请情况会修正错误

内联框架

1、使用内联框架可以引入一个外部的页面
2、使用iframe来创建一个内联框架
属性：

src：指向一个外部页面的路径，可以使用相对路径
width：
height：
name：可以为内联框架指定一个name属性

3、在现实开发中不推荐使用内联框架，因为内联框架中的内容不会被搜索引擎所检索
如：<iframe src=”demo02.html” name=”tom”>

超链接

1、使用超链接可以让我们从一个页面跳转到另一个页面
2、使用a标签来创建一个超链接
3、属性：

herf：指向链接跳转的目标地址，可以写一个相对路径，也可以写一个完整的地址
target属性可以用来指定打开连接的位置
可选值：
_self，表示在当前窗口中打开（默认值）
_blank，表示在新的窗口中打开链接

可以设置一个内联框架的name属性值，链接将会在指定的内联框架中打开
如：

<a href=”demo03.html” target=”tom”>我是一个超链接</a>
<!--tom为内联框架的name属性值-->
<iframe src=”demo02.html” name=”tom”></iframe>

4、超链接的地址设置：
地址为#时：如果将链接地址设置为#，则点击超链接以后，会自动跳转到当前页面的顶部
一般情况下，如果创建超链接地址不确定时，可以直接写一个#作为占位符
地址为页面中某个元素的id时，在href属性中#后添加想要跳转的位置的id值
5、通过超链接发送电子邮件
发送电子邮件的超链接，点击链接以后可以自动打开计算机中默认的邮件客户端
<a href=”mailto:邮件地址”>name</a>
当点击这个超链接时，会默认打开计算机的默认电子邮件客户端，并且将收件人设置为mailto后的邮件地址
6、为超链接去除下划线
在文本样式中，设置text-decoration属性为none
<a hreaf="#" text-decoration: none>name</a>
7、超链接的伪类选择器

link
hover
selection
actived

id属性：
html中有一个属性，每一个元素都可以设置，该属性可以作为标签的唯一标识，这个属性是id
id属性在页面中只能有一个，不能重复
id属性名称不能以数字开头
如：<a id=”bottom” href=”#”>name</a>
总结（一）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-08" />
        <meta name="keywords" content="图片，风景" />
        <title>风景图片</title>
    </head>
    <body>
        <center>
            <h1><font color="red" size="5">风景图片鉴赏</font></h1>
            <hr/><br />
            <p size="2">
                这是一幅美丽的风景图片，<br/>
                展现的是祖国的大好江山，<br />
                就像下面的古诗一样：<br />
                山有木兮木有枝，心悦君兮君不知。<br />
                今夕何夕兮，搴舟中流。<br />
                今日何日兮，得与王子同舟。<br />
                蒙羞被好兮，不訾诟耻。<br />
                心几烦而不绝兮，得知王子。<br />
                山有木兮木有枝，心悦君兮君不知。<br />
            </p><br/>
            <img src="风景壁纸14.jpg" width="500px" alt="风景图片01">
            <br />
            <img src="风景壁纸12.jpg" width="500px" alt="风景图片02">
            <br /><hr/>
            <a href="#top">回到顶部</a>
            <br/>
            <iframe src="https://www.baidu.com" width="1000px" height="1000px">百度的界面</iframe><br/>
            <a href="https://wwww.baidu.com" target="_blank">百度</a>
        </center>
    </body>
</html>
<!--
    在当前的内容中主要有以下的内容：
    1.首先是声明这是一个HTML5为标准的网页<!DOCTYPE html>
    2.说明当前的网页的编码字符集是什么<meta charset="utf-08" />
        注意meta是自结束标签
    3.设置该网页的标题，出现在网页的标题栏中  <titlt>标题&l