一 Index解析
1. 注释
// 单行注释 js
/* 注释内容 */ css
注释内容快捷键: Ctrl+/? 可空行注释,选中某行注释,多行注释
注释:是代码的解析文本,被注释的内容或者代码将不被进行
注释的作用:
1.为了便于阅读代码,更好理解代码
2.将代码注释起来后,代码就不会执行,可以方便删除,或者还原代码
3.注释可以作为初学者的笔记使用
2.快捷键
html:5 生成基本代码块
标签名+ Teb/Enter 快速生成标签
Ctrl+s 保存
Ctrl+c 复制
Ctrl+v 粘贴
Ctrl+x 剪切
Ctrl+z 撤回
Ctrl+y 反撤回
Ctrl+b 打开/关闭编辑器资源管理器
Ctrl+f 查找
Ctrl+h 替换
Ctrl+“+” 增大字体
Ctrl+“—” 减小字体
Alt+z 自动换行
Alt+鼠标左键 多行输入
Alt+b 快捷打开浏览器
3.标准代码块介绍
DOCTYPE:版本标记,在HTML文件中,第一行都是DOCTYPE;
声明文档类型,浏览器用标准模式解析文件
html:html技术告诉浏览器这是一个html5文件
根标签,是整个html页面的第一个标签,文档的所有内容都在这个标签中
标签嵌套: 形成父子关系 外层为父元素,内层为子元素
标签属性:在开始标签内添加的,一般都以属性名="属性值"的形式存在,属性都是给标签添加一些解释说明的
lang:longuage,语言,说明文档的语言类型
head:头标签,设置网页的头部信息。在标签内添加说明标签,不会显示在网页中
meta:说明标签
charset:会在head标签第一行,防止页面中出现乱码
UTF-8:一种编码格式,解决中文乱码问题
title:标题。显示在页面标题的标题栏上
style:内部设置css样式,需要配合选择器使用
body:设置网页的主体内容
script:添加js内容(在body的下面添加或者放置在body标签内的最下方)
4.html文档字符编码&语言设置
1.编码的重要性:编码可以导致浏览器通过IE时候网页乱码,也可以导致css的兼容性Hack。
2.编码的位置:(一般这段网页编码放在html文件的head标签内的第一行)。
3.编码的样式:通过charset="UTF-8"中的UTF-8就可以改变网页编码。
4.编码的种类:国内常用的流行编码格式有UTF-8,gb2312这两种,一般这两种类型就可以满足国内所有的网页编码需求。程序和数据库中也会用到这两种编码类型处理网页和储存数据类型。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>index</title>
</head>
<body>
<!-- 文本内容 -->
第一个网页
<!-- 双标签 -->
<div> </div>
</body>
<script>
</script>
</html>
二 HTML标签
html标签按照标签的构成可以分为单标签和双标签
1.单标签: <xxx> 在html5之前,单标签需要写闭合斜杠,但在html5之后就不这样写了
<xxx/>
2.双标签:
<xxx>YYY</xxx>
3.开始标签 标签内容 结束标签
<标签名 标签属性 标签属性>标签内容<闭合斜杠标签名>
不能自定义标签
html标签的开始标签可以添加标签属性,就是在标签名后面添加一个空格然后开始添加属性,一个标签可以添加多个属性,多个属性之间需要使用空格隔开,属性值最好使用双引号包裹起来。属性可以没有属性值,例如p3.
三 标签解析
1.html标题:
标题 heading
是通过<h1>~<h6>标签定义的
<h1>为最大标题,用于显示主标签<h6>为最小标题
默认样式:
标题标签带有上下外间距,撑出元素之间的间距
2.html水平分割线:
hr:创建水平线,用于分割内容
默认样式:1px的边框线,8px的上下外间距
3.html段落:
p:段落标签,块元素
注意:在文本p标签内标签属于特殊的文本标签,文本标签都是行内元素除了p
默认样式:文本大小16px,根据文本大小调整上下外边距
注意:浏览器会自动添加的,在段前段后添加空行
4.html换行标签:
br:换行标签,空元素
5.html图片插入标签:
img:砸死网页插入图片
html属性:
src:来源,图片的路径(网络图片,本地图片)
图片路径查找:相对路径(相对于当前文件的路径)
图片与文件同级:1,直接写图片名
2,./ 会关联出同级的所有文件
图片与文件上级兄弟:../ 会关联出上一级所有文件
绝对路径(包括盘符的路径,叫做绝对路径) 可以直接在网络上复制图片地址
alt:图片加载失败时的替换文字
title:图片标题(鼠标移入图片的提示文字)
6.html超链接标签:
a:超链接标签
作用:实现页面的跳转,点击标签内的内容,跳转到指定链接地址
注意:当a标签没有添加href属性时是链接占位符(标签内容为普通文本)
href:超文本的指向,设置跳转的网页的链接地址
target:目标,设置网页的打开方式,默认值是当前页面打开
_blank:作用是在新窗口打开
7.html块
div:标准的块标签
块元素在没有设置宽高的情况下,宽度默认是父元素的100%,高度靠内容撑开
(如果没有内容,则高度为0)
8.html文本
span:普通文本标签,文本默认大小为16px,靠文本内容撑出大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html常用标签</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<hr/>
<span>普通文本</span>
<p>
张万森,下初雪了吗? <br/>暗恋天花板
</p>
<img src="../img/1.jpg" alt="图片加载失败" title="向往自由与和平">
<img src="../img/2.jpg" alt="图片加载失败">
<img src="../img/3.jpg" alt="图片加载失败">
<img src="../img/4.jpg" alt="图片加载失败">
<br>
<a href="http://www.baidu.com" target="_blank" title="链接标题">百度一下,就知道了</a>
<div>你好呀 世界</div>
</body>
</html>
四 格式化标签
b: 加粗文本,没有特殊意义
strong:加粗文本,具有很强的强调意义,用于表达文本的重要性
i: 斜体文本,没有特殊意义
em:斜体文本,具有很强的强调意义,用于表达文本的重要性
sup:定义上标
sub:定义下标
s: 删除线文本,没有特殊意义
del:删除线文本,具有很强的删除意义,用于表达被遗弃的内容
u:下划线文本,没有特殊意义
ins:添加,插入文本,具有很强的添加意义,用于表达新增的内容
small:定义小号文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>格式化标签</title>
</head>
<body>
<b>加粗文本</b>
<strong>加粗文本</strong>
<br>
<i>斜体文本</i>
<em>斜体文本</em>
<br>
<p>这是<sup>上标</sup>和<sub>下标</sub></p>
<s>删除线文本</s>
<del>删除线文本</del>
<br>
<u>下划线文本</u>
<ins>下划线文本</ins>
<br>
<small>小号文本</small>
<!-- <big>大号文本</big> -->
</body>
</html>
五 语义化标签
1.html语义化标签:
根据内容的结构(内容语义化),选择合适的标签(代码语义化)
便于开发者阅读和写出更好的代码
让浏览器的爬虫和机器更好的解析
2.html语义化好处:
1,为了在没有css的情况下,页面也能呈现出更好的内容结构,代码结构
2,代码结构清晰,方便阅读,有利于团队开发
3,方便搜索引擎识别页面,有利于搜索引擎优化(SEO)
4,方便其他页面解析(屏幕浏览器,盲人浏览器,移动设备等),以语义化的方式渲染页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>语义化标签</title>
</head>
<body>
<!-- 页面结构语义化标签 -->
<nav>标记导航,仅对页面中重要的链接群使用</nav>
<header>页眉,通过包括页面的logo,主导航,全站链接以及搜索框</header>
<main>页面的主要内容,一个页面只能使用一次,如果是一个web应用,则包括其主要功能</main>
<section>定义文档的节点(section区段),比如:章节,页眉或文档中的其他部分</section>
<footer>页脚,只有当父元素为body的时候,整个页面的页脚</footer>
<aside>定义所有内容之外的部分,如侧边栏,广告等</aside>
</body>
</html>
六 转义字符
在html中,如果需要显示<或>等其他字符时,不要直接使用,否则会被误认为是一个标签,需要使用转义字符进行转义
空格 | |   | |
< | 小于号 | < | < |
> | 大于号 | > | > |
& | 和号 | & | & |
" | 引号 | " | " |
' | 撇号 | ' | ' |
¢ | 分 | ¢ | ¢ |
£ | 镑 | £ | £ |
¥ | 人民币/日元 | ¥ | ¥ |
€ | 欧元 | € | € |
§ | 小节 | § | § |
© | 版权 | © | © |
® | 注册商标 | ® | ® |
™ | 商标 | ™ | ™ |
× | 乘号 | × | × |
÷ | 除号 | ÷ | ÷ |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>转义字符</title>
</head>
<body>
<p>在html中,使用<hr>表示水平分割线</P>
<p>在html中,使用&表示和</P>
<p>在html中,使用 表示中文空格</P>
<p>在html中,使用 表示英文空格</P>
<p>在html中,使用©表示版权</P>
<p>在html中,使用®表示注册商标</P>
<p>在html中,使用¥表示人民币</P>
<p>在html中,使用°表示度°</P>
</body>
</html>