HTML02 meta基本内容、常用标签

1、meta基本内容

<!DOCTYPE html>
<head>

<!--当编码和解码不同时,我们需要告诉浏览器网页所采用的编码字符集
      meta标签用来设置网页的一些元数据(原始的数据)
        比如:网页的字符集、关键字、简介
    charset:字符集
    比如:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-->

<!--
    1、使用meta标签还可以设置网页的关键字
    	    -其中name的值是对content(内容)的值的描述
    <meta name="keywords" content="HTML,JavaScript,前端"; charset=utf-8" /> 
      -- 这里表示content里面的值是关键字(keywords),关键字有:HTML,JavaScript,前端
      
    2、使用meta标签还可以设置网页的描述
    	- 搜索引擎在检索页面时,会同时检索页面的关键词和描述
        - 但是这两个值并不会影响在搜索引擎的排名
    <meta name="description(描述)" content="发布前端信息"; charset=utf-8" /> 
    
    3、使用meta标签还可以设置请求的重定向(就是在多久之后重定向到其他被自己指定的浏览器页面)
    <meta http-equiv="refresh(刷新)" content="5;url=http://www.baidu.com" />
	  --这里的5,是指5秒后跳转(可改),url是指定的目标路径(绝对路径)		
-->

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--编写一个自结束标签时,可以在开始标签中添加一个/
    比如:<meta />
-->

<title>网页标题</title>

</head>

<body>
</body>
</html>

 

2、常用标签

(1)常用标签1

<!--
	标题标签
     - 在HTML中一共有六级标题标签,h1最大,h6最小
     - 文字大写并不用关心,因为在css样式里面可以将h1变得比h6还小

     - 使用HTML时,关心的是标签的语义,使用的标签都是语义化标签

     - 6级标题中,h1最重要,表示一个页面的主要内容,h2~h6重要性依次递减
     - 对于搜索引擎来说,h1的重要性仅次于title  
     - 一般来说,h1在页面里只能写一个(写多了小心被认为是垃圾网站)
     - 一般页面里标签只使用h1~h3,h3以后的不使用
-->

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

<!--
     段落标签
     - 用于表示内容的一个自然段
     - 使用p标签来表示一个段落
     - p标签中的文字会默认独占一行,并且段与段之间有间距
-->

<p>我是一个p标签,我用来表示一个段落</p>
<p>我是一个p标签,我用来表示一个段落</p>
<p>我是一个p标签,我用来表示一个段落</p>

<!--
    在html中,字符中间写再多的空格也会当成一个字符解析
    - 换行也会当成一个空格解析
    - 在页面中可以使用br自结束标签来换行
-->

<p>
    最遥远的距离就是,<br/>
    我在网线这一头,<br/>
    你在网线另一头,<br/>
    而我就在你旁边<br/>
</p>

<!--
	hr也是一个自结束标签,可以在页面中生成一条水平线
-->
<hr/>
<hr/>
<hr/>

 

(2)常用标签2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常见的HTML标签</title>
</head>
<body>
<!--这是JS课程-->
<p>段落</p>
这是<abbr title="JavaScript">虚线</abbr>下面的
<p><b>加粗</b></p>
<em>斜体</em><br/>
<p><i>斜体</i></p>
<p>标签<sup>上</sup></p>
<p>标签<sub>下</sub>下</p>
<p><s>划掉</s></p>
<p><u>下划线</u></p>
<h1>1级标题</h1>
<ul>
    <li>点点点</li>
    <li>点点点</li>
</ul>
<ol>
    <li>项目一</li>
    <li>项目二</li>
</ol>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h6>6级标题</h6>
<img src="1.jpg">
<img src="1.jpg">
<img src="1.jpg" width="200"><br/>
<img src="1.jpg" width="200" height="300"><br/>
<a href="1.jpg">罗小黑</a>
<a href="http://www.baidu.com"><img src="1.jpg"></a>
<iframe src="http://www.baidu.com"></iframe>
<!--1行3列的表格-->
<table>
    <tr>
        <td><a href="http://www.baidu.com">首页</a></td>
        <td><a href="1.jpg">学校概况</a></td>
        <td><a href="http://www.baidu.com">教务处</a></td>
    </tr>
</table>
<!--创建表单-->
<form>
    用户名<br/>
    <input typr="text" name="username" size="20" maxlength="30"><br/>
    用户密码<br/>
    <input typr="password" name="password"><br/>
    <input type="submit" value="登录">
</form>
</body>
</html>

 

相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页