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

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

HTML的基本结构

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

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

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

head>
     /head>
    是用来描述网页的一些关键信息。例如网页的配置、设置、关键字等等。。。这些信息，大多在浏览器看不到，但是对网页的解析至关重要！

 body>
     /body>
    则是所有的代码都写在其中。
二、初步了解标签

1、head> 头部部分

1）link：网页标题的图标

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

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

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

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

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

①其中meta charset="utf-8" />
    设置网页的编码格式为utf-8格式
常见的中文编码格式：GB2312：国标码，简体中文；GBK：扩展国标码，简体中文
utf-8：万国码，兼容各种语言编码，常用！

meta charset="utf-8" />
    

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

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

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

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

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

2、body> 主体部分

1）标签的分类

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

2）块级标签

常见的块级标签有：

a.标题标签：h1> /h1> ......h6> /h6> 特点:h1最大，h6最小且自动加粗。

b.水平线标签：hr/>

c.段落标签：p> /p>

d.换行标签：br/>

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

f.预格式标签：PRe> /pre>
浏览器默认显示样式：①显示为等宽字体

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

!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>
if(entity != null){
          tring result = EntityUtils.toString(entity,"UTF-8");
    //HttpEntity转为字符串类型      jsonObject = JSONObject.FromObject(result);
//字符串类型转为JSON类型  }
      /pre>
    blockquote cite="http://www.jredu100.COM">
    光明正大的不要脸！这段话就是抄的！你能咋地！/blockquote>
    /body>
    /html>
    

g.有序列表
ol> （order list）
　　li> .../li> 列表项可以有n多个
　　li> .../li>
　　li> .../li>
/ol>

h.无序列表
ul> (unorder list)
　　li> .../li> n多个
　　li> .../li>
　　li> .../li>
/ul>

i.定义描述列表
dl>
　　dt> 一般只有一项/dt> （列表标题）
　　dd> 可以有很多项/dd> （列表描述项）
　　dd> 132/dd>
　　dd> 123/dd>
/dl>

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

k.分区标签

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

!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属性：用于声明引用的来源。

【常用的引用标签】
blockquote> 用于引用一段内容/blockquote>
q> 用于引用一句话/q>
cite> 常用于引用作品名、书画名等/cite>

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

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

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

（5）图片标签img

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

B.绝对路径：使用绝对路径的图片，只有在本机使用file协议才能访问！所以，严禁使用这种方式！
img src="file:///E:/icon.jpg" />

C.相对路径：
a、 图片与当前文档在同一层文件夹：直接写图片名
img src="icon.jpg" />
b、图片在当前文档的下一层文件夹：文件夹名/图片名
img src="img/icon.jpg" />
c、 图片在当前文档的上一层文件夹： ../图片名 (../表示后退一层)
img src="../icon.jpg" />
但是，一定要注意：图片必须包含在项目里面，不能访问项目外的图片。


② height:图片的高度 width：图片的宽度
img src="img/icon.jpg" height="500" width="10" />

③ title：图片的标题，也就是鼠标指上后看到的提示文字
img src="img/icon.jpg" title="鼠标指上后看到的提示文字" />

④ alt: 图片无法加载时显示的文字
img src="img/icon.jpg" alt="图片无法加载时显示的文字" />

⑤ align：图片周围的文字相对于图片如何对齐。
可选值：top-> 图片顶部 center-> 图片中部 bottom-> 图片底部
img src="img/icon.jpg" align="top" /> 12345

（6）超链接标签a

A、href属性：表示超链接跳转的页面。
① 可以写网络地址：
a href="http://www.baidu.com"> 这是一个超链接/a>

② 可以打开本地的html文件：
采用相对路径确定文件地址。与img标签确定方式相同。
a href="01-HTMLhead部分index.html"> 这是一个超链接/a>

B、title属性：鼠标指上后显示的提示文字
a href="01-HTMLhead部分index.html"title="ttt"> 这是一个超链接/a>

C、target属性：设置新页面打开的窗口位置
可选值：_self自身页面打开（默认）
_blank 新窗口打开
a href="01-HTMLhead部分index.html"target"_blank"> 这是一个超链接/a>

【超链接的特殊应用】
1、功能性链接：（了解）
mailto:// 点击链接给指定邮箱发送邮件
a href="mailto://jianghao@jerei.com"target"_blank"> 点击发送邮件/a>
tencent://message/?uin=1105093212"
还有：tell://手机端点击打电话
message://手机端点击发送短信
ftp://使用ftp协议进行文件的上传下载
2、锚点链接：
> > > 本页面锚链接
① 在页面的指定位置中设置一个锚点，用那么属性表示锚点名字：
a name="top"> /a>
div style="background-color: aqua; height: 1000px"> /div>
② 将超链接的href属性，设置为#加锚点名字
a href="#top"> 点击链接，跳转到top锚点位置/a>
> > > 页面间锚链接
① 在新页面的指定位置中设置一个锚点，用那么属性表示锚点名字：
a name="top"> /a>
div style="background-color: aqua; height: 1000px"> /div>
② 将超链接的href属性，设置为“新页面地址#加锚点名字”：
a href="锚点.html#3"> 点击链接，跳转到锚地.html的top锚点位置/a>

!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：表格的宽度

使用表格宽、高属性设置大小：
table height="400" width="500"> /table>

使用CSS样式设置大小：
table style="height:400px; width:500px; "> /table>


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的基本结构与标签的初步了解的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！