自学整理之HTML5常用标签和知识—

自学完后整理出来的一些内容，希望能帮到同样是小白的你们

HTML介绍
编译规范
常用标签
块级和行内元素
小知识大用处

HTML介绍

超文本标记语言（Hyper Text Markup Language，简称HTML），是一种标识性的语言，利用一系列标签绘制浏览器中显示的内容（文字如何处理，画面如何安排，图片如何显示等）

编译规范

每一种语言都有各自的规范，我们先来看看HTML在编码时不可或缺的部分

<!DOCTYPE html>  //文档声明，漏写时，浏览器进入怪异渲染模式（简单说就是乱码）
<html lang="en">   //规定文本所用的语言为English,”en”代表英语，”zh-CN”代表中文
<head><meta charset="UTF-8">  //说明字符编码格式，“UTF-8"国际编码，最常用，常见的字符编码有：gb2312、gbk、unicode<meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>   //用于添加网页标题和LOGO
</head> <body>//标签绘制页面的地方，除了标签外，所写内容显示在页面上
</body></html>

我们在书写代码时，也有应该要注意的规范

1、所有书写均在英文半角状态下的小写；
2、起id、class名是以字母开头；
3、所有标签必须闭合；
4、注意html、css、js的注释方式不同；
5、书写时，用tab键缩进，做到代码整洁；
6、嵌套标签时，a标签不能嵌套a标签，p标签里不能嵌套块级元素，行内元素只能嵌套行内元素，块级元素可以嵌套任意元素
7、尽可能的做到标签语义化
…

看到这里，是不是很好奇什么是块级元素，什么是行内元素呢？不要着急，再往下就能找到你想要的答案！

常用标签

HTML中有一系列的标签，在我看来，并不是所有标签都需要深记在脑海中的，现在，让我们来学习一下有哪些需要我们深记的常用的标签：

a标签——定义超链接


//超链接跳转   href=""指定跳转目标地址
<a href="wwww.baidu.com">点击</a> //点击跳转到百度首页//锚点  href=""指定跳转目标ID
<a href="#demo">点击</a>  //点击跳转到标签id="demo"的内容中//发送邮件  href=""指定发送目标邮箱  %20代替空格是浏览器能显示文本
<a href="mailto:a1078285789@163.com? subject=Hello%20again">文本</a>  //发送Hello到指定邮箱//target属性
<a href="www.baidu.com" target="">
//target="_blank"   在新窗口中打开百度首页
//target="_self"    默认，在当前窗口打开百度首页

ul标签——定义无序列表

//ul内嵌套多个li标签
<ul>  <li></li><li></li><li></li>
</ul>

ol标签——定义有序列表

//start属性规定有序列表起始值   type属性规定有些列表使用的标记类型
<ol start=""  type="">    //type中属性值：1-阿拉伯数字；A-大写字母；a-小写字母；I、i-罗马数字；<li></li><li></li>
</ol>

h1\h2\h3\h4——定义标题

默认字体加粗，字体大小h1>h2>h3…h1常用于页面主标题，h2为次标题，以此类推

input标签——用于收集用户信息

<!-- //type属性定义元素类型，属性值不同，呈现不同的样式与功能 --><!-- //name属性定义元素的名称 --><input type="text" name=""> //文本框<hr><input type="password" name=""> //密码框，默认密码打码<hr><input type="submit" name=""> //提交按钮!<hr><input type="reset" name=""> //重置按钮<hr><input type="button" name="">   //按钮<hr><input type="number" name="">   //数字输入框<hr><input type="search" name="">   //搜索框<hr><!-- 单选属性时，name属性属性值要相同 --><input type="radio" name="A">认真<input type="radio" name="A">耐心<hr><!-- 多选时，name属性值要相同 --><input type="checkbox" name="A">认真<input type="checkbox">耐性<!-- 不常用的属性：image-上传图片；file-上传文件；hidden-隐藏；data-日期选择；rage-滑块；color-颜色选择框；step-步进 ；-->

-效果展示

常用属性：checked-默认选中聚焦；readonly-只读；placeholder=""–设置提示文本，聚焦是消失；
HTML5中新增属性：autofocus：规定加载页面是按钮自动聚焦；disabled：规定是否禁用这个按钮

img标签——向页面中嵌入图片

//src属性规定图片地址，alt属性规定图片替换文本<!-- 图片相对地址方式，“./”表示与HTML文件同级，“.././”表示比HTML文件高一级 --><img src="./img/1.png" alt="图片一"><!-- 图片绝对地址方式，简单来说就是图片网络地址 --><img src="https://timgsa.baidu.com/timg?i411.jpg" alt="图片二">

video标签——用于页面引入视频内容***（H5新增）***

<!-- controls属性：允许用户控制视频的播放 --><!-- autoplay属性：视频自动播放 --><video controls autoplay><!-- 引用多个不同格式的资源，以便在不同浏览器支持格式不同的情况下都能播放视频 --><!-- mp4格式的视频资源 --><source src="myVideo.mp4" type="video/mp4">   <!-- webm格式的视频资源 --><source src="myVideo.webm" type="video/webm"></video>

audio标签——用于页面映入音频内容***（H5新增）***

<!-- controls属性：允许用户控制音频的播放 --><!-- autoplay属性：音频自动播放 --><audio controls autoplay><!-- 引用多个不同格式的资源，以便在不同浏览器支持格式不同的情况下都能播放音频 --><!-- mp3格式的音频资源 --><source src="myVideo.mp3" type="audio/mpeg">   <!-- ogg格式的音频资源 --><source src="myVideo.ogg" type="audio/ogg"></audio>

p标签——定义文档段落
div标签——定义文档分区
button标签——定义按钮
span标签——用于组合行内元素，以便通过样式来格式化它们
部分HTML5语义化标签

标签语义化利于搜i索引擎的抓取（SEO的优化）
section标签——定义划分区域；
heander标签——定义页面头部；
nav标签——定义导航栏；
footer标签——定义页面尾部；
aside标签——定义侧边栏；
article标签——定义文本区域；

到这里，已经介绍了不少的常用标签，接下来，让我们对它们进行分类吧！

块级和行内元素

元素有很多，可以将它们分为两大类：块级元素和行内元素，那什么是块级元素，什么是行内元素呢？它们有着不同的特性：

1、块级元素：占据其父元素（容器）的整个空间，给其添加宽度和高度时，默认独自占据一行，能自由设置所占空间的宽度和高度，支持所有的CSS样式；
2、底层原因：默认有displa: block 这个CSS样式；
3、常见的块级元素有：p、div、h1\h2\h3、ul、li、header、nav、footer、article、ol…

1、行内元素：只占据其内容的空间，即文本撑开高度和宽度，设置宽高无效，代码换行被解析元素间有空隙，不支持上下margin、padding、border的样式设置（CSS部分会学到以上样式）
2、底层原因：默认有display: inline 这个CSS样式；
3、常见的行内元素有：span、strong、a、em、img、button、input…

小知识大用处

HTNL5元素部分介绍的差不多了，接下来，这里有一份作为程序猿需要收下的知识卡，快来接受下吧！

常见浏览器

IE（internet explorer）内核：Trident
FireFox（火狐）内核：GeCko
Chrome（谷歌）内核：WebKit（原形）\Blink（当下）
Safari 内核：WebKit
Opera 内核：Persto（原形，已弃用）\Blink（当下）

实体字符（使用时不能漏写&和；符号，注意的是；为英文状态下写入）

&nbsp；——空格
&lt；——小于号
&gt；——大于号
&amp；——和号&
&yen；——元¥
&copy；——版权©
&reg；——注册商标®
&trade；——商标™

最后，这是小白本人第一次编写文章，有什么不足之处或者漏掉之处，希望多多指出来！

自学整理之HTML5常用标签和知识——小白篇相关推荐

04-前端技术_HTML与HTML5常用标签
目录一,HTML与HTML5常用标签学前准备 1,HTML简介 1.1 HTML是什么 1.2 HTML发展历史 1.3 HTML⽂档类型的设定 2,HTML基础语法 2.1 HTML基本结构: ...
HTML5常用标签【知识点整理】
目录 1.HTML概念 2.HTML文档基本结构 3.HTML常用标签 3.1.标签的使用 3.2.常用标签 3.2.1.文本标签h1-p-br-hr-span 3.2.2.图片标签-img 3.2. ...
html5常用的属性标签,HTML5常用标签及其属性设置
一.Html5的基本结构网页的内容二.head标签内常用标签 1.meta标签:设置元数据信息(metadata),用来描述HTML文档的信息,为网页提供用户不可见的信息.常用属性: ⑴chars ...
20-HTML与HTML5常用标签(前端)
感谢你的路过,希望学生的笔记能给你一点微不足道的参考 Java基础思维导图,完整Java体系的链接目录标题一,B/S: Browser/Server 浏览器/服务器端二, HTML 2.1. 概 ...
HTML和HTML5常用标签
文章目录 1.HTML简介 2.HTML基础语法 3.HTML文本标签 4.HTML格式化标签 5.HTML图像标签 6.HTML超链接标签 7.HTML表格标签 8.HTML表单标签 8.1.for ...
HTML与HTML5常用标签
目录学前准备一.HTML简介 1.1 HTML是什么 1.2 HTML发展历史 1.3 HTML⽂档类型的设定二.HTML基础语法 2.1 HTML基本结构 2.2 注释 2.3 HTML注释 ...
HTML 与HTML5 常用标签
基本结构 <!DOCTYPE html> <html> < ...
HTML5常用标签~
标签描述 header 头部 footer 尾部 nav 导航 aside 侧边栏 video 视频 aud ...
HTML5常用标签及特殊字符表
*http://html5doctor.com/nav *http://html5doctor.com/article *http://html5doctor.com/section *http:// ...

自学整理之HTML5常用标签和知识——小白篇