html基础知识
html 超文本标记语言,严格意义上来说,不是一个开发语言
html5是html的第五个版本,添加了一些新标签和api,使用H5必须在页面的开头添加以下代码
<!DOCTYPE html>
这是用来声明当前文档类型是html5标准的文档,这样浏览器在解析渲染的时候会按照H5的标准解析。
html文档是由标签组成的,分为头部标签和身体标签两大部分,标签又细分为单标签和双标签,他们的闭合方式不同
单标签: <标签名 />
双标签:<标签名> </标签名>
1.头部标签
标签中的内容,不会渲染在页面中。
1.1双标签
<head>
定义了文档的原信息标签。
<title>
定义了文档的标题,他的SEO权重很大,需要谨慎书写里面的内容。
<base>
定义了页面链接标签的默认链接地址。
<script>
定义了客户端的脚本文件。
<style>
定义了HTML文档的样式文件。
1.2单标签
<meta>
定义了HTML文档中网站的源信息。
meta的写法:
<meta 属性名=“属性值”>
<meta name=“属性名” content(内容)=“属性值” />
<meta>
标签的属性:
-
charset
属性 用来定义文本的编码格式
UTF-8 万国码,目前开发中最常用
gb2312 中文码(可能在IE浏览器上乱码)
通常把charset的值设置成UTF-8,如果不设置charset属性,可能会导致页面乱码,解决方案是设置成UTF-8即可 -
author
属性 用来定义网站的作者,一般是公司的名字 -
keywords
属性 用来定义网站的关键字,如果有多个关键字用英文逗号隔开,关键字最好不要超过10个
精准的keywords值,更有利于SEO(搜索引擎优化) -
description
属性 用来简单的描述网站的内容,不要超过100个字,有利于SEO
<link>
定义了一个文档和外部资源之间的关系。
link 链接外部的 css
link:css
<link rel="stylesheet" href="./css/style.css">
link 链接图片 更改页面标题图标
link:favicon
<link rel="shortcut icon" href="./20180116170135_xevrx.jpg" type="image/x-icon">
2.身体标签
里面的内容会渲染在页面的可视区域
2.1 双标签
- 块属性标签
(1) 独自占据一行空间,支持宽和高的设置,设置完宽和高之后仍然独占一行
(2) 支持上下 padding 和上下 margin- 行属性标签
(1) 不会独占一行,从左至右横向排列
(2) 无法设置宽和高,他的宽和高由内容撑开
(3) 不支持上下 padding 和上下 margin
2.1.1块属性标签
布局标签
没有实际意义,一般用来页面布局
<div>具体内容</div>
段落标签
段落标签,里面一般只包含一段文字
<p>这是一个段落</p>
有序列表
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
可以设置他的 list-style-type
属性
lower-alpha
小写字母
upper-alpha
大写字母
lower-roman
小写罗马文
upper-roman
大写罗马文
无序列表
<ul style="list-style-type:dotted;">
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
可以设置他的 list-style-type
属性
square
实心方块
circle
空心圆
dotted
实心圆
none
取消列表样式
disc
高版本系统下的默认样式
标题标签
在一个页面中h1
最多只能出现1次,h2
最多只能出现20次, h3-h6
次数不限。
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
由于h1的权限较大只能出现在两个地方:
- logo处
- 资讯详情页的大标题
地址标签
一般的,他的内容是一个地址
<address>这是地址</address>
引用标签
一般引用的是一段文字,他的cite属性表示该文字引用的文献名目
<blockquote cite="文献名目">这是一段文字</blockquote>
定义列表
<dl>
<dt>标题项</dt>
<dd>列表项</dd>
<dd>列表项</dd>
<dd>列表项</dd>
</dl>
2.1.2行属性标签
标记标签
没有实际意义,通常用来渲染文字
<span>这是一句话</span>
框架标签
相当于一个窗口
<iframe src="./case.html" height="200" width="200"></iframe>
src="需要显示的页面地址"
height="设置高度"
width="设置宽度
链接标签
<a href="./case.html" target="_self">案例</a>
href属性:用来设置超链接的地址 target属性:设置标签页的打开方式 _blank 在新标签页打开 _self 默认值,在当前页打开
设置一个超链接,点击可跳转到设置页面
<a href="http://www.baidu.com">百度</a>
设置锚点
点击后跳转到相应色块位置
<div id="ye" style="height: 100px;background: #ff0;"></div>
<a href="#ye">黄色块</a>
(1)最常用的效果是,回到顶部,href=“#”,
(2)如果在开发中需要设置a标签点击没有效果,则可以设置href属性为 ##,即href=“##”
(3)不要设置href为空,这样会导致页面刷新
<a href="#">回到顶部</a>
<a href="##">没有效果</a>
<a href="">刷新</a>
下载文件
(1)如果设置的下载文件是音频、视频、图片、文档等,都需要经过压缩之后,再在href上设置文件的路径
(2)如果是文本类型的文件,可以直接把文件路径设置在href属性上,直接由浏览器打开
<a href="./abc.txt">下载文本</a>
<a href="./12.zip">下载文件</a>
强调标签
<strong>强调标签</strong>
强调并斜体
<em>强调并斜体</em>
文本加粗
<b>文本加粗</b>
文本斜体
<i>文本斜体</i>
<var>文本斜体</var>
引用标签
所引用的内容比较简短,内容会添加双引号
<p>引用标签 </p>
格式化标签
内容是格式化输出,代码页的效果即页面显示效果
<pre> 格式化 标签 </pre>
嵌套标签
一般是嵌套代码使用
<
在html中渲染为 小于号
>
在html中渲染为 大于号
在html中渲染为 空格
<code>
<p>陶渊明</p>
陶渊明
</code>
2.2 单标签
<hr/>
分割线
<br/>
换行符
图片标签
<img src="" alt="" width="" height="" >
src 属性:用来设置图片资源路径 文件资源路径 分为三种 (1)网络路径:图片的网络地址 (2)绝对路径:从服务器的根目录开始,直到找到所需文件的整个路径,一般不使用 (3)相对路径:相对于当前文件所在的 资源路径,在开发中最常用 ./ 代表的是当前目录 ../ 代表的是上一级目录
alt 属性:用来解释图片的内容 作用: 1.当图片没有被加载出来的时候,会显示alt的内容 2.通过alt属性,告诉浏览器当前图片的内容
width/height属性:设置图片的宽和高,在实际的开发过程当中,只设计一侧的宽和高,另一侧根据比例显示大小
3.emmet语法
E 代表标签名
E*n 创建n个E标签
E{自挂东南枝}*n 创建n个内容为"自挂东南枝"的 E标签 li{自挂东南枝}*5
E{自挂东南枝$}*n 创建n个内容为"自挂东南枝"+序号 的 E标签 $表示序号,从1开始 li{自挂东南枝$}*5
>表示下一个层级元素 E>a 在E标签中添加子元素 a 标签 li*5>a{百度}
+表示同级 E+p 同时创建兄弟元素,不相互嵌套
^ 表示上一级 E>p^div 创建 div 标签和 E 标签同级,也就是创建 p 标签的上一级
使用[] 设置属性 a[href="##"]*3