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

最新推荐文章于 2021-08-09 14:21:05 发布

PyPio-Mr•Li

最新推荐文章于 2021-08-09 14:21:05 发布

阅读量241

点赞数 1

分类专栏：前端文章标签： html html5 css css3 javascript

本文链接：https://blog.csdn.net/weixin_45497004/article/details/109335224

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

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；——商标™

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

PyPio-Mr•Li

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
自学整理之HTML5常用标签和知识——小白篇

自学完后整理出来的一些内容，希望能帮到同样是小白的你们HTML介绍编译规范常用标签块级和行内元素小知识大用处HTML介绍超文本标记语言（Hyper Text Markup Language，简称HTML），是一种标识性的语言，利用一系列标签绘制浏览器中显示的内容（文字如何处理，画面如何安排，图片如何显示等）编译规范每一种语言都有各自的规范，我们先来看看HTML在编码时不可或缺的部分<!DOCTYPE html> //文档声明，漏写时，浏览器进入怪异渲染模式（简单说就是乱码）<
复制链接

扫一扫