尚硅谷_HTML基础 笔记

@

目录

HTML基本格式

<html> /* html为根标签 */
	<head> /* head中的内容不会显示在网页上，是用来帮助浏览器解析页面的 */
			<title> /* title中的内容显示网页的标题，搜索引擎在检索页面时，会首先检索title标题中的内容，并影响排名 */
			</title>
	</head>
	<body> /* body中的内容是用来显示在网页上的 */
	</body>
</html>

/* 
	此外，将一个完整的标签称为元素，可以将元素和标签认为是一个同义词 
	<h1>一级标题</h1>
	上边的h1我们就称为元素
	<p>我是一个<em>段落</em></p>
	p也是一个元素，em是p的子元素，p是em的父元素。
*/

HTML注释

在这里插入图片描述

标签的属性

在这里插入图片描述

文档声明

![在这里插入图片描述]( https://img-blog.csdnimg.cn/20190728112855223.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2VhcnRoT0x0YWluYW53YW4=,size_16,color_FFFFFF,t_70)

乱码问题

在这里插入图片描述

常用的标签

![在这里插入图片描述]( https://img-blog.csdnimg.cn/20190728113640218.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2VhcnRoT0x0YWluYW53YW4=,size_16,color_FFFFFF,t_70)
百度百科标签列表

实体(转义字符)

![在这里插入图片描述]( https://img-blog.csdnimg.cn/20190728114208605.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2VhcnRoT0x0YWluYW53YW4=,size_16,color_FFFFFF,t_70)
HTML 实体符号参考手册

图片标签

图片标签的格式

![在这里插入图片描述]( https://img-blog.csdnimg.cn/20190728114336743.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2VhcnRoT0x0YWluYW53YW4=,size_16,color_FFFFFF,t_70)

src中的路径问题

在这里插入图片描述
关于相对路径和绝对路径

图片格式的选择

![在这里插入图片描述]( https://img-blog.csdnimg.cn/20190728114521577.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2VhcnRoT0x0YWluYW53YW4=,size_16,color_FFFFFF,t_70)

meta标签

![在这里插入图片描述]( https://img-blog.csdnimg.cn/20190728115110574.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2VhcnRoT0x0YWluYW53YW4=,size_16,color_FFFFFF,t_70)

XHTML语法规范

在这里插入图片描述

网页间的跳转

内联框架

![在这里插入图片描述]( https://img-blog.csdnimg.cn/20190728115541685.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2VhcnRoT0x0YWluYW53YW4=,size_16,color_FFFFFF,t_70)
效果如图所示：

超链接

![在这里插入图片描述]( https://img-blog.csdnimg.cn/20190728121155619.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2VhcnRoT0x0YWluYW53YW4=,size_16,color_FFFFFF,t_70)

文本标签

![在这里插入图片描述]( https://img-blog.csdnimg.cn/2019072812133334.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2VhcnRoT0x0YWluYW53YW4=,size_16,color_FFFFFF,t_70)
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20190728121355759.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2VhcnRoT0x0YWluYW53YW4=,size_16,color_FFFFFF,t_70)
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20190728121423443.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2VhcnRoT0x0YWluYW53YW4=,size_16,color_FFFFFF,t_70)

列表

无序列表

![在这里插入图片描述]( https://img-blog.csdnimg.cn/20190728121503942.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2VhcnRoT0x0YWluYW53YW4=,size_16,color_FFFFFF,t_70)

有序列表&定义列表

![在这里插入图片描述]( https://img-blog.csdnimg.cn/20190728121603393.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2VhcnRoT0x0YWluYW53YW4=,size_16,color_FFFFFF,t_70)

列表的相互嵌套

![在这里插入图片描述]( https://img-blog.csdnimg.cn/20190728121654766.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2VhcnRoT0x0YWluYW53YW4=,size_16,color_FFFFFF,t_70)

posted @ 2019-08-15 18:29  PursuingtheLight  阅读(537)  评论(0)    收藏  举报