首页 >web前端 >H5教程 >HTML的基本结构与标签的初步了解

HTML的基本结构与标签的初步了解

巴扎黑原创: 2017-06-23 14:51:112300浏览

一、初步了解HTML

HTML是一种超文本标签语言，浏览器则是用来“解释和执行”HTML源码的工具。

HTML的基本结构

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body></body></html>

其中是文档类型声明，声明这个文件必须是HTML5文件，让浏览器按照HTML5准备进行解析，必须在HTML5中，必须要有，且是一定要写在文件的最上方滴。

是网页的标题，显示在最上方的文字：

<span style="font-size: 16px"><span style="font-family: 宋体"><head> </head>是用来描述网页的一些关键信息。例如网页的配置、设置、关键字等等。</span>。</span><span style="font-size: 18px"><span style="font-size: 16px">。这些信息，大多在浏览器看不到，但是对网页的解析至关重要！</span><br></span>

<span style="font-family: 宋体; font-size: 16px"> <body> </body>则是所有的代码都写在其中。<br><span style="font-size: 18pt; background-color: #cc99ff">二、初步了解标签<br></span></span>

1、头部部分

1）link：网页标题的图标

链接网页的小图标，网页选项卡上面的小图片

其中rel="icon"表示当前link的作用是链接网页图标

href="img/ss.gif"表示图标的地址所在的位置

<link rel="icon" href="img/sss.gif" />

2)meta:用于描述网页的各种信息

<span style="font-family: 宋体; font-size: 16px; background-color: #ffffff"><span style="font-family: 宋体"><span style="line-height: 36px"><span style="color: #ff6600; background-color: #ffffff">①</span>其中<meta charset="utf-8" />设置网页的编码格式为utf-8格式<br>常见的中文编码格式：GB2312：国标码，简体中文；GBK：扩展国标码，简体中文<br><span style="color: #ff0000">utf-8：万国码，兼容各种语言编码，常用！<br></span></span></span></span>

<meta charset="utf-8" />

<br>

②可以设置网页的关键字有助于搜索引擎的搜索，多个关键字用英文逗号分开

<meta name="keywords"content="杰睿教育,网页开发" />

③设置网页的详细信息，搜索引擎时标题下面的一段文字！

name="description" 表示这个meta标签设置的是网页的描述信息； content="" 表示描述信息的详细内容！！

<br>

<meta name="description"content="这是我在，，，，"/>

<br>

2、主体部分

1）标签的分类

①块级标签：显示为块状，独占一行，自动换行。 ②行级标签：在一行中，从左往右依次排列，不会自动换行。

2）块级标签

常见的块级标签有：

a.标题标签：

......

特点:h1最大，h6最小且自动加粗。

b.水平线标签：

c.段落标签：

d.换行标签：

e.引用标签：

要的cite属性表明引用的来源，一般为网址，且网址不会在网页中展示，浏览器一般显示为首行缩进

f.预格式标签：

浏览器默认显示样式：①显示为等宽字体

②代码中的换行，空格等元素可在浏览器中直接显示。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>HTML基本块级标签</title></head>
    <body><h1>这是h1标签</h1><h2>这是h2标签</h2><h3>这是h3标签</h3><h4>这是h4标签</h4><h5>这是h5标签</h5><h6>这是h6标签</h6><hr/><p>这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！这是一段文字！
            
            哈哈啊哈哈哈啊哈哈哈哈啊哈！<br/>这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！</p><p>这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！</p><pre class="brush:php;toolbar:false">if(entity != null){  
    tring result = EntityUtils.toString(entity,"UTF-8");//HttpEntity转为字符串类型  
    jsonObject = JSONObject.fromObject(result);//字符串类型转为JSON类型  
}

光明正大的不要脸！这段话就是抄的！你能咋地！

g.有序列表

h.无序列表

i.定义描述列表

一般只有一项: 可以有很多项; 132; 123

g.组合标签显示效果：上面是图片，下面是图片的标题，同时图片和标题前代缩进。

k.分区标签

可以包裹任何标签，也可以被包裹进任何标签。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>HTML基本块级标签</title></head>
    <body><ul><li>这是无序列表第一项</li><li>这是无序列表第二项</li><li>这是无序列表第三项</li><li>这是无序列表第四项</li></ul>
        <ol><li>这是无序列表第一项</li><li>这是无序列表第二项</li><li>这是无序列表第三项</li><li>这是无序列表第四项</li></ol>
        <dl><dt>这是dl列表的标题</dt><dd>这是dl列表的描述项1</dd><dd>这是dl列表的描述项2</dd><dd>这是dl列表的描述项3</dd></dl>
        <figure><img src="img/icon.jpg" /><figcaption>图片的描述标题</figcaption></figure>
        <div style="width: 500px; height: 100px; background-color: yellow;">这是div里面的文字！！！<p>11111</p></div>
                <div style="height: 500px;"></div></body></html>

3)行级标签

常见的行级标签：

（1）文本标签span

① span标签只是包裹作用，没有任何其他含义； ② span作用与div类似，需配合CSS使用。只不过div是块级标签、span是行级标签

（2）强调标签em与strong；倾斜标签i；加粗标签b；四个之间的区别

① em和i都能倾斜。strong和b都能加粗！但是，i和b仅仅是单纯的倾斜加粗，而em和Strong多了强调的语义。 ② em和strong都表示强调，但是strong强调的级别更高！！ 注意： 1、强调的目的：让搜索引擎知道网页重点强调的内容！便于搜索引擎显示！ 2、Strong和em都可以多层嵌套，表示强调程度的递增！

（3）短引用标签q：表示短引用。 cite属性：用于声明引用的来源。

【常用的引用标签】

用于引用一段内容

用于引用一句话 常用于引用作品名、书画名等 相同点：三个引用标签，都用cite属性表示引用来源 不同点：① 引用的内容不同。 blockquote->一段话，q->一句话，cite->作品名 ② 显示的默认效果不同。 blockquote->默认整段向右缩进； q->默认加引号； cite->默认倾斜！

（4）缩小标签small：将字体缩小一号；big标签：将字体放大一号。

注意： ① small和big可以多层嵌套，直到字体达到最小或最大为止； ② 这俩标签已经被淘汰，并不建议使用。

（5）图片标签img

① src属性：表示图片的路径 [图片路径的合法方式] A.网络链接：由于图片在其他网站，如果其他网站删除图片，我们也不能访问，所以不建议使用这种方式；

B.绝对路径：使用绝对路径的图片，只有在本机使用file协议才能访问！所以，严禁使用这种方式！

C.相对路径： a、图片与当前文档在同一层文件夹：直接写图片名 b、图片在当前文档的下一层文件夹：文件夹名/图片名 c、图片在当前文档的上一层文件夹： ../图片名 (../表示后退一层) 但是，一定要注意：图片必须包含在项目里面，不能访问项目外的图片。 ② height:图片的高度 width：图片的宽度 ③ title：图片的标题，也就是鼠标指上后看到的提示文字 ④ alt: 图片无法加载时显示的文字 ⑤ align：图片周围的文字相对于图片如何对齐。 可选值：top->图片顶部 center->图片中部 bottom->图片底部 12345

（6）超链接标签a

A、href属性：表示超链接跳转的页面。 ① 可以写网络地址： 这是一个超链接

② 可以打开本地的html文件： 采用相对路径确定文件地址。与img标签确定方式相同。 这是一个超链接

B、title属性：鼠标指上后显示的提示文字 这是一个超链接

C、target属性：设置新页面打开的窗口位置 可选值：_self自身页面打开（默认） _blank 新窗口打开 这是一个超链接 【超链接的特殊应用】 1、功能性链接：（了解） mailto:// 点击链接给指定邮箱发送邮件 点击发送邮件 tencent://message/?uin=1105093212" 还有：tell://手机端点击打电话 message://手机端点击发送短信 ftp://使用ftp协议进行文件的上传下载 2、锚点链接： >>>本页面锚链接 ① 在页面的指定位置中设置一个锚点，用那么属性表示锚点名字： a name="top">

② 将超链接的href属性，设置为#加锚点名字 点击链接，跳转到top锚点位置 >>>页面间锚链接 ① 在新页面的指定位置中设置一个锚点，用那么属性表示锚点名字： a name="top">

② 将超链接的href属性，设置为“新页面地址#加锚点名字”： 点击链接，跳转到锚地.html的top锚点位置

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>HTML基本行级标签</title></head><body><a name="e"></a>
        
        糖糖<span style="color: red; font-size: 48px;">真帅</span>！！！<br />
        <em>这是em标签</em><br /><strong>这是strong标签</strong><br /><i>这是i标签</i><br /><b>这是b标签</b><br /><u>这是b标签</u><br />
        <q cite="http://www.jianghaozhenshuai.com">我是q标签引用</q><blockquote>我是blockqoute的引用！！！！！</blockquote><cite cite="">我是cite标签的引用！！</cite><br />
        <small><small>我比正常小两号</small></small><br /><big>我比正常大一号</big><br />
        
              <img src="img/icon.jpg" align="top" />12345
        --><img src="img/icon.jpg" align="bottom" />12345        <a href="tencent://message/?uin=1105093212"target"_blank">点击发送邮件</a><div style="background-color: aqua;height: 1000px"></div><a href="#e">点击</a><a href="锚点.html#1">1</a><a href="锚点.html#2">2</a><a href="锚点.html#3">3</a></body></html>

4）块级标签与行级标签的区别

1、块级标签：默认宽度100%(占满一行)； 块级标签自动换行(独占一行，右边不能有任何东西)； 块级标签可以使用CSS设置宽度高度！ 2、行级标签：默认宽度由内容撑开(内容多宽、宽度就占多宽)； 行级标签不会自动换行(一行当中，从左往右依次排列)； 行级标签的宽度高度不能设置！

5）表格

（1）表格table

表格用table表示，表格中的每一行tr表示，一行中的每一列用td表示 th表示的是：表头。表头中的文字，默认为加粗居中。th要放在tr中，用于替换掉td。 （2）table的常用属性 A、border：给表格加边框。默认给所有td加边框，并且给整个table加外边框。当增大border的值时，td上的边框不变化，只有最外层大边框变宽。 B、cellspacing：单元格与单元格之间的距离。 cellspacing="0" 表示单元格与单元格之间没有距离，但是边框线的宽度依然是两条线的宽度。 [注意] 表格边框合并的CSS写法： style="border-collapse: collapse;" 这条CSS与cellspacing="0"有什么区别？ cellspacing="0"仅仅是将单元格之间的距离调整为0，实际上单元格之间依然还是两条线； border-collapse: collapse; 是将表格相邻的两条边框进行合并处理，只有一条线存在。(一旦边框合并，cellspace属性将会失效。) C、cellpadding：单元格中的文字与单元格边框的距离。 D、 height：表格的高度 width：表格的宽度 使用表格宽、高属性设置大小：

使用CSS样式设置大小：

 E、align：设置表格在浏览器中的位置。不建议使用了。 可选值：left 表格居左 /center 表格居中/right 表格居右 F、bgcolor：背景色 bordercolor:边框颜色 background:背景图 background="img/computer.jpg" 背景色和背景图同时存在时，背景图会覆盖背景色 （3）tr与td常用属性 A、width：单元格宽度 height：单元格的高度 B、bgcolor：单元格的颜色 C、align:设置单元格中的文字，水平对齐方式。 left、center、right valign:设置单元格中的文字，垂直对齐方式。 top、middle、bottom D、 nowrap="nowrap" 当单元格文字过多时，设置单元格文字不断行显示。但是，会把表格的宽度撑大!!! （4）表格的跨行与跨列 ①跨列：在td上使用属性colspan="n"进行跨列。如果一个单元格跨n列，则，单元格右边的n-1个单元格需要去掉。 ②跨行：在td上使用属性rowspan="n"进行跨行。如果一个单元格跨n行，则，单元格下边的n-1个单元格需要去掉。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>表格</title></head><body><table border="1"><tr><th >标题一</th><th colspan="2">标题二</th></tr><tr><td rowspan="2">1-1</td><td>1-2</td><td>1-3</td></tr><tr><td>2-2</td><td>2-3</td></table>
        
            <table border="10" width="500" height="400" bordercolor="#ff99cc" style="border-collapse: collapse;"><!--1--><tr><td rowspan="7"></td><td rowspan="4"></td><td rowspan="2"></td><td ></td></tr><!--2--><tr><td ></td></tr><!--3--><tr><td rowspan="2"></td><td></td></tr><!--4--><tr><td rowspan="4"></td>
                </tr><!--5--><tr><td rowspan="2"></td><td rowspan="2"></td></tr><!--6--><tr>
                
                </tr><!--7--><tr><td colspan="2"></td>
            
                </tr></table>
        </body></html>

三、写在后面的话

第一次接触博客，第一发文内心还是有些小激动的，对于刚接触不久代码的我，就觉得代码是一个神奇的地方，而且既神奇又觉得很好玩。

之前就一直觉得这些东西很深奥，感觉是我所触及不到的，但是当我接触到后，还是挺喜欢的。

最后请各位多多关照。

以上是HTML的基本结构与标签的初步了解的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：JS案例联系之留言板下一篇：弹性盒模型 flex box的认知与使用

查看更多