第一节：认识标签

来源：爱问旅游网

第一节：认识标签

1、什么是html文件

2、html的作用

html 是一种超文本传输协议，规定了浏览器与服务端的数据传输格式，一种标签识别性的代码语言，他的中文翻译超文本标签语言 ，主要通过html标签对网页中的文本、图片、声音、视频以及动画等内容进行描述。html 有许多标签。如段落标签、标题标签、超文本标签、超链接标签、图片标签等，网页中需要定义什么内容就用相应的html标签描述。

html之所以成为超文本标记语音，不仅因为它通过标签描述网页内容，同时也用于文本中包含了超，通过超将网页中各种元素连接起来，构成了丰富多彩的的页面视图。

html元素是构建网站的基石。html允许嵌入图像与对象，并且可以用于创建交互式表单，它被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。HTML的语言形式为尖括号包围的HTML元素（如），浏览器使用HTML标签和脚本来诠释网页内容，但不会将它们显示在页面上。html文档主要由HTML网页、头部部分、主体部分构成
<html></html>
<head></head>
<body></body>
html文件特点

简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。
可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。
平台无关性：虽然个人计算机大行其道，但使用 MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上。
通用性： HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

3、初识html–helloword

认识标签

标记特定的内容文字图片视频音频在浏览器上面呈现

标签书写

标签分为单标签和素昂标签
单标签: <标签名/>
双标签:起始标签<标签名> 标记的内容 </标签名>结束标签

鼠标左键–> 创建 – > 文本文件 (helloworld.txt)–>修改后缀名html（helloworld.html）
编辑文本
<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="Keywords" content="xiaoge-education">
  <meta name="Description" content="this is a chapter of xiaoge-education page">
  <title>01-标签的认识</title>
 </head>

 <body>
	HelloWorld !!
 </body>
</html>
保存文本后使用浏览器打开

浏览器显示 HelloWorld !!

4、常用的标签

布局标签 划分网页的一个内容布局展示位置宽高

div:网页内容之间划分若干个矩形区域，存放不同内容可以嵌套其他任何标签(被嵌套的是儿子嵌套的是父级)
ul:无序列表标签
内容相似结构相似布局相似 li标签:列表项一个结构布局小黑圆点标识符商品展示布局公告信息列表布局新闻信息列表布局

ol:有序列表标签
内容相似结构相似布局相似 li标签:列表项一个结构布局

ul,ol内嵌的只能是li标签,li标签能嵌套任何标签元素
dl自定义列表标签：内容不完全一直结构相似布局相似
dt 自定义列表标题
dd 自定义类表的描述
文本标签 就是布局里面填充的内容文字图片

h1,h2,h3,h4,h5,h6:标题标签
权重性:
	h1 权重最高,要么不出现,要么只出现一次
等级次序:标题嵌套规则 由数字小到大
	h2是一个区域的划分
	h3往往标记着商品名称
字体样式:
	由大到小
p 段落标签,网页划分大段内容文本
span 小行文字标注
strong 强调,重要文本标记,字体加粗
em 强调效果弱于 strong ,字体倾斜
i 没有强调作用只是字体样式倾斜

<!doctype html><!--文档类型声明 HTML网页-->
<html><!--根标签-->
 <head><!--整个网页的基本信息 浏览器搜索引擎抓取-->
  <meta charset="UTF-8"><!--字符编码 国际编码-->
  <meta name="Keywords" content="xiaoge-education"><!--网站关键字 浏览器搜索-->
  <meta name="Description" content="this is a chapter of xiaoge-education page"><!--网站描述信息-->
  <title>01-常用标签</title><!--网站的标题-->
 </head>

 <body><!--网页的展示部分-->
	<h1>常用标签</h1>
    <div>
        <h2>这是布局标签</h2>
        <div>这个是一个巨大的盒子</div>
        
        <ul><!--无序列表标签-->
            <li>张三</li><!--列表项-->
            <li>李四</li>
            <li>王二</li>
            <li>麻子</li>
        </ul>
        <ol><!--有序列表标签-->
            <li>猕猴桃</li>
            <li>橘子</li>
            <li>香蕉</li>
            <li>
                <div>这是嵌套的一个盒子</div>
                <ul>
                    <li>这是嵌套的无需列表</li>
                </ul>
            </li>
        </ol>
    </div>
    <div>
        <h2>这是文本标签</h2>
        <div>
            <h3>HUAWEI P30</h3>
            <!-- 常用文本标签应用 -->
            <p>收到<strong>HUAWEI P30</strong>一台，马上送往<em>二手手机店</em>做检测。确定是否一个<span style="color:red;">95新</span>的手机...</p>
        </div>
        <dl><!--自定义列表-->
            <dt>商品</dt><!--标题-->
            <dd>裙子</dd><!--描述信息-->
            <dd>靴子</dd>
            <dd>T恤</dd>
            <dt>家电</dt><!--标题-->
            <dd>电饭锅</dd><!--描述信息-->
            <dd>电磁炉</dd>
            <dd>电视机</dd>
        </dl>
    </div>

 </body>
</html>

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文