HTML入门学习笔记

最新推荐文章于 2024-08-18 23:01:41 发布

烈烈不是咧咧

最新推荐文章于 2024-08-18 23:01:41 发布

阅读量156

点赞数

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

本文链接：https://blog.csdn.net/yeol_/article/details/109499451

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、Html是什么？

Html是一种超文本标记语言，它用来描述页面的结构。

二、HTML的标准格式

1.标准格式

标准格式：

<!doctype html>                      /*文档头信息声明*/
<html>                               /*根标签（一个网页内，只能有一个根标签）*/
   /*
   *head标签中的内容不会在网页中直接显示，
   *它会帮浏览器解析网页
   */
    <head>                            /*头部标签*/
    <meta charest : "utf-8">          /*字符编码*/
    
    /*网页标题标签*/
    /*
    默认显示在标题栏中，
        搜索引擎检索页面时，会首先搜索title标签里的内容
        故该标签会影响网页在搜索引擎中的排名
    */
    <title>此处输入网页标题</title>    
    </head>
    
    /*
    *网页中所有展现的内容全部写在body标签中
    */
    <body>                           /*网页主体标签*/
    在此处输入网页内容
    </body>
</html>

2.细节解析

(1).文档声明

代码如下：

<!doctype html>                      /*HTML5文档头信息声明*/

HTML版本中至少有三个版本正在广泛使用，为了让浏览器知道我们使用的HTML版本，就需要添加一个文档声明。

若不写文档头信息声明，浏览器可能会进入怪异模式
进入怪异模式后，浏览器的解析页面可能会导致页面无法正常显示

(2). 字符编码【乱码问题】

 <meta charest : "utf-8">          /*字符编码*/

计算机仅认识二进制数，故在计算机中的任何内容都要转换成二进制编码，在读取时要将二进制编码转化为内容。

【编码】：根据一定的规则将字符转化为二进制编码的过程。
【解码】：根据一定的规则将二进制编码转化为字符的过程。
【字符集】：编码和解码所采用的规则。

I . ASCII码：美国编码
II . ISO-8859-1:欧洲编码
III . GB2312：中文默认编码
IV . UTF-8：万国码【支持全球语言】
V . ANSI：系统默认编码保存编码

【产生乱码的根本原因】：编码和解码所采用的字符集不同。

(3). meta标签

·1.【设置网页的关键字】

<meta name :"keywords" concent : "此处输入关键字"/>

·2.【指定网页的描述】

<meta name : "description" concent : "此处输入关键字"/>

·3.【做请求的重定向】
*语法：<meta http-equiv:“refresh” content:“秒数; url:目标路径”>

<meta http-equiv:"refresh" content:"5; url:www.baidu.com">

·4.搜索引擎在检索页面时，会同时检索页面中的关键词和描述，但这两个值不会影响页面在浏览器器中的排名

(4). 标签的id属性

·在HTML中有一个id属性，每个元素都可以设置，该属性作为该标签独一无二的标识
一个确定的id属性在页面中只能出现一次，不可以重复

三. 常用标签

1.标题标签<h1>…<h6>

·在HTML中有六级标题标签，从h1到h6，重要性依次递减
·在六级标签中，h1最重要，重要性仅次于title
在搜索引擎检索完title后，紧接着就会检索h1标签，故h1标签会影响网页在搜索引擎中的排名
·一个页面按道理讲只能写一个h1标签，若写多个，会被浏览器默认为垃圾网页，不予收录

2. 段落标签<p>

·该标签用于表示一个自然段
·p标签中的内容，会默认独占一行，且段与段之间会有间距

3. 换行标签<br/>

·在html中字符间再多的空格，浏览器都会当做一个空格解析（换行也会当做一个空格解析），所以在页面中引入br标签来表示换行
·该标签是一个自结束标签

4. 水平线标签<hr/>

·作用是在网页中引入一条水平线
·该标签是一个自结束标签

5. 图片标签<img/>

（1）该标签用于引入外部图片，且该标签是一个自结束标签
（2）属性
      ·src:设置一个外部图片的路径。
      ·alt:在图片不能显示时，显示的对图片的描述。
            浏览器可以通过alt属性来识别不同的图片，不写alt浏览器就不收录该图片
      ·width:修改图片的宽度。【单位：像素px】
      ·height:修改图片的高度。【单位：像素px】

6. 超链接<a><a/>

·使用a标签可以创建一个超链接
·使用超链接可以从一个页面跳转至另一个页面
·（1）属性
            href：指向超链接跳转的地址（可以是相对地址也可以是一个完整的地址）
            target：用于指定打开网页的位置

                    可选值:  _self:[默认值]，在当前窗口打开
                                  _blank:在新的窗口打开链接

·（2）占位符
            创建超链接后，没有目标网址时，可以将超链接的href属性设置为“#”，那样超链接会变的可以点击，且点击后页面自动跳转至当前页面的顶部

·（3）利用id属性实现跳转
            ·语法：在href属性中添加**#id属性值**
                        点击超链接会跳转到该id属性所在的位置

·（4）发送邮件
            ·语法：href="mailto:邮件地址"

//a标签的属性
<a href="http://www.baidu.com">点击链接打开百度</a>  //设置a标签的href属性
<a href="http://www.baidu.com" target："_self">点击链接打开百度</a>  //点击链接后在当前页面打开链接
<a href="http://www.baidu.com" target："_self">点击链接打开百度</a>  //点击后，新建一个页面打开链接

//a标签的占位符
<a href="#">点击跳转至页面的顶部</a>  //设置a标签的href属性为“#”作为占位符

//利用id属性实现跳转
<a id:"bottom" href="#">点击跳转至页面的顶部</a>
<a id:"top" href="#bottom">点击跳转至页面的底部</a>

//a标签发送邮件功能
<a href="mailto：1361645965@qq.com">点击链接发送邮件联系我</a>

7. 居中标签<center></center>

·作用：center标签中的内容会在页面中默认居中显示
·语法：<center>
要居中的内容
</center>

四.实体

·在HTML中，一些如“>“、”<”这种特殊的字符不能直接使用，需要一些特殊的符号来表示这些字符，这些特殊符号我们叫做实体（或叫做转义字符串）
·语法：& + 实体的名字 + ；
【常见的实体】（本图截自W3SCHOOL离线手册）

五. XHTML语法规范

·1.HTML中不区分大小写，但我们一般使用小写
·2.HTML中注释不能嵌套
·3.HTML中，标签结构必须完整，要么成对出现，要么是自结束标签
浏览器会尽最大努力正确的解析页面，所有不符合语法规范的内容，浏览器都会尽最大的努力自动修正，但仍旧有可能会出现错误。
·4.HTML中，标签可以嵌套，但是标签不能交叉嵌套
·5.HTML标签中的属性必须有值且必须有引号

<div class :"wrong"><span>这是一个错误的交叉嵌套的标签</div></span>  //错误写法
<div class :"right"><span>这是一个正确的交叉嵌套的标签</span></div>  //正确写法

六. 记录

学习时间：2020.9.20—2020.9.22

记录时间：2020.11.04

烈烈不是咧咧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML入门学习笔记

Html学习笔记一、Html是什么？二、HTML的标准格式1.标准格式2.细节解析(1).文档声明(2). 字符编码【乱码问题】(3). meta标签(4). 标签的id属性三. 常用标签1.标题标签<h1>...<h6>2. 段落标签<p>3. 换行标签<br/>4. 水平线标签<hr/>5. 图片标签<img/>6. 超链接<a><a/>7. 居中标签<center></center>
复制链接

扫一扫