快捷搜索: 长连接 前端 源码 pan

HTML入门学习笔记


一、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:邮件地址"





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

经验分享 程序员 微信小程序 职场和发展