html入门基础知识

首先我们先直观的认识一下html的基本结构:

<!doctype html>`
    <html>`
        <head>
            <title></title>
            <meta charset="utf-8" />
            <meta name="keywords" content="关于网页的关键词" />
            <meta name="description" content="关于网页内容的描述" />
            <meta http-equiv="refresh" content="5,url=http://baidu.com" />
        </head>
        <body>
            网页主体内容
        </body>
</html>

然后我们根据这个html的基本结构进行分析:

1、<!doctype html>

这个意思是声明当前编辑的页面版本为html5,不同的html版本声明语句不同,其中!必须为英文。

2、是网页的根标签,所有内容都要写在这个标签里面

3、****head标签中的内容都是源数据,不会在网页中显示,但是对搜索引擎和其他地方都有很大的作用

①title标签可以设置为网页标题,搜索引擎会检索该字段。 
②meta标签中的charset属性是来设置字符集的,代码编辑器相当于编码,浏览器相当于解码,如果编码和解码的字符集不一致,就造成了乱码问题,通常我们都是用utf-8,常见的字符集有gbk、gb2312等等 
③meta标签中的keywords和description值,是用来设置有关编写网站的信息,以便于搜索引擎更好的抓取。

4、body标签是网页中的可见内容,都可以在浏览器中看到。

5、标签分类

标签又叫元素,分为双标签和单标签。 
①双标签是有开始有结束的标签,例如等 
②单标签是自结束标签,例如

6、标签属性:

每个标签都有自己的属性以及属性值,例如,其中charset是属性,utf-8是属性值,这样一对简称为名值对或键值对

7、标签关系:

①父元素 
②子元素 
③兄弟元素 
④祖先元素 
⑤后代元素

8、常见基本标签:

结构标签:html、head、title、meta、body 
标题标签:h1—–h6,其中h1标签的重要性仅次于页面的title,且一个页面中只会使用一个h1标签。一般标题标签我们只会使用到h3。 
段落标签:p 
换行标签:br 
水平线标签:hr 
图片标签:img,其中img标签的属性alt一般都要设置,因为可以被搜索引擎抓取到 
超链接标签:a 
其他标签:span、div、ul、li、table、td、tr、th、caption等等

9、标签分类:可以分为块级元素和行内元素

块级元素可以在网页中独占一行,例如div、p、h1—h6等等 
行内元素根据自身内容来决定宽高,例如a、img、span等等

10、常见的文本标签

<em></em>着重 
<strong></strong>强调 
<b></b>和<i></i>没有语义 
<cite></cite>引用书名、电影名等等 
<small></small>比父元素文字小 
<big></big>比父元素大,但是没有语义 
<sup></sup>上标 
<sub></sub>下标 
<del></del>删除文字 
<ins></ins>插入文字 
<q></q>引用短句子 
<blockquote></blockquote>引用长句子 
<pre></pre>预先格式 
<code></code>一般与pre一起使用

 例:<pre>
       <code>代码段</code>
   </pre>

11、标签属性

每个标签都有自己的属性,可以通过css设置属性来设置样式。常用的属性有id 、class、title、等等。

1、id属性具有唯一性,不能重复
2、class属性可以一个元素拥有多个class,同时一个class值可以给多个元素设置
3、title属性设置后,鼠标放在页面上,可以显示title的值

例:<p id="" class="" title=""></p>

常用标签的属性:

1、<a href="" target="">链接文字</a> 
href常用的值: 
①将要链接的地址的路径,一般使用相对路径 
②#id值,可以跳转到当前页面的指定位置 
③mailto:邮箱地址,可以打开当前使用系统安装的邮箱客户端 
target常用的值有: 
①_self,在原来页面打开 
②_blank,在新页面打开 
③iframename的name值,在指定的框架中打开 
2、<img src="" alt=""> 
src的值是图片的路径地址 
alt值必须设置,搜索引擎可以抓取到 
3、iframe内联框架 
<iframe src="" width="" height="" name=""></iframe> 
ifranme不推荐使用,因为不会被搜索引擎检索到


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值