Rumah > Artikel > hujung hadapan web > HTML的基本结构与标签的初步了解
一、初步了解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>
链接网页的小图标,网页选项卡上面的小图片
其中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标签设置的是网页的描述信息;<br> content="" 表示描述信息的详细内容!!
<br>
<meta name="description"content="这是我在,,,,"/>
<br>
1)标签的分类
①块级标签:显示为块状,独占一行,自动换行。<br>②行级标签:在一行中,从左往右依次排列,不会自动换行。
2)块级标签
常见的块级标签有:
a.标题标签:...... 特点:h1最大,h6最小且自动加粗。
b.水平线标签:
c.段落标签:
d.换行标签:
e.引用标签:<br> 要的cite属性表明引用的来源,一般为网址,且网址不会在网页中展示,浏览器一般显示为首行缩进
f.预格式标签:<br> 浏览器默认显示样式:①显示为等宽字体
②代码中的换行,空格等元素可在浏览器中直接显示。<br>
<!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.有序列表<br>
h.无序列表<br>
i.定义描述列表<br>
g.组合标签 显示效果:上面是图片,下面是图片的标题,同时图片和标题前代缩进。<br>
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标签只是包裹作用,没有任何其他含义;<br> ② span作用与div类似,需配合CSS使用。只不过div是块级标签、span是行级标签
<br>(2)强调标签em与strong;倾斜标签i;加粗标签b;四个之间的区别
① em和i都能倾斜。strong和b都能加粗!但是,i和b仅仅是单纯的倾斜加粗,而em和Strong多了强调的语义。<br> ② em和strong都表示强调,但是strong强调的级别更高!!<br> 注意:<br> 1、强调的目的:让搜索引擎知道网页重点强调的内容!便于搜索引擎显示!<br> 2、Strong和em都可以多层嵌套,表示强调程度的递增!
(3)短引用标签q:表示短引用 。 cite属性:用于声明引用的来源。
【常用的引用标签】<br> 用于引用一段内容
<br> 用于引用一句话
<br> 常用于引用作品名、书画名等<br><br> 相同点:三个引用标签,都用cite属性表示引用来源<br> 不同点:① 引用的内容不同。 blockquote->一段话,q->一句话,cite->作品名<br>② 显示的默认效果不同。 blockquote->默认整段向右缩进; q->默认加引号; cite->默认倾斜!
(4)缩小标签small:将字体缩小一号;big标签:将字体放大一号。
注意:<br> ① small和big可以多层嵌套,直到字体达到最小或最大为止;<br> ② 这俩标签已经被淘汰,并不建议使用。
(5)图片标签img
① src属性:表示图片的路径<br> [图片路径的合法方式]<br>A.网络链接:由于图片在其他网站,如果其他网站删除图片,我们也不能访问,所以不建议使用这种方式;<br>
<br>B.绝对路径:使用绝对路径的图片,只有在本机使用file协议才能访问!所以,严禁使用这种方式!<br>
<br>C.相对路径:<br>a、 图片与当前文档在同一层文件夹:直接写图片名<br> <br>b、图片在当前文档的下一层文件夹:文件夹名/图片名<br> <br>c、 图片在当前文档的上一层文件夹: ../图片名 (../表示后退一层)<br> <br>但是,一定要注意:图片必须包含在项目里面,不能访问项目外的图片。<br><br><br>② height:图片的高度 width:图片的宽度<br> <br><br> ③ title:图片的标题,也就是鼠标指上后看到的提示文字<br> <br><br> ④ alt: 图片无法加载时显示的文字<br> <br><br> ⑤ align:图片周围的文字相对于图片如何对齐。<br> 可选值:top->图片顶部 center->图片中部 bottom->图片底部<br> 12345
(6)超链接标签a
A、href属性:表示超链接跳转的页面。<br> ① 可以写网络地址:<br> 这是一个超链接
<br> ② 可以打开本地的html文件:<br>采用相对路径确定文件地址。与img标签确定方式相同。<br> 这是一个超链接
<br>B、title属性:鼠标指上后显示的提示文字<br> 这是一个超链接
C、target属性:设置新页面打开的窗口位置<br> 可选值:_self自身页面打开(默认)<br> _blank 新窗口打开<br> 这是一个超链接 <br><br>【超链接的特殊应用】<br> 1、功能性链接:(了解)<br> mailto:// 点击链接给指定邮箱发送邮件<br> 点击发送邮件<br>tencent://message/?uin=1105093212"<br>还有:tell://手机端点击打电话<br>message://手机端点击发送短信<br>ftp://使用ftp协议进行文件的上传下载<br>2、锚点链接:<br> >>>本页面锚链接<br> ① 在页面的指定位置中设置一个锚点,用那么属性表示锚点名字:<br> a name="top"><br> <br> ② 将超链接的href属性,设置为#加锚点名字<br> 点击链接,跳转到top锚点位置<br> >>>页面间锚链接<br> ① 在新页面的指定位置中设置一个锚点,用那么属性表示锚点名字:<br> a name="top"><br> <br> ② 将超链接的href属性,设置为“新页面地址#加锚点名字”:<br> 点击链接,跳转到锚地.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%(占满一行);<br> 块级标签自动换行(独占一行,右边不能有任何东西);<br> 块级标签可以使用CSS设置宽度高度!<br><br> 2、行级标签:默认宽度由内容撑开(内容多宽、宽度就占多宽);<br> 行级标签不会自动换行(一行当中,从左往右依次排列);<br> 行级标签的宽度高度不能设置!
5)表格
(1)表格table
表格用table表示,表格中的每一行tr表示,一行中的每一列用td表示<br><br> th表示的是:表头。表头中的文字,默认为加粗居中。th要放在tr中,用于替换掉td。<br><br>(2)table的常用属性<br>A、border:给表格加边框。 默认给所有td加边框,并且给整个table加外边框。 当增大border的值时,td上的边框不变化,只有最外层大边框变宽。<br><br>B、cellspacing:单元格与单元格之间的距离。<br> cellspacing="0" 表示单元格与单元格之间没有距离,但是边框线的宽度依然是两条线的宽度。<br><br> [注意] 表格边框合并的CSS写法:<br> style="border-collapse: collapse;"<br><br>这条CSS与cellspacing="0"有什么区别?<br> cellspacing="0"仅仅是将单元格之间的距离调整为0,实际上单元格之间依然还是两条线;<br> border-collapse: collapse; 是将表格相邻的两条边框进行合并处理,只有一条线存在。(一旦边框合并,cellspace属性将会失效。)<br><br><br>C、cellpadding:单元格中的文字与单元格边框的距离。<br><br>D、 height:表格的高度<br> width:表格的宽度<br><br> 使用表格宽、高属性设置大小:<br> <br><br> 使用CSS样式设置大小:<br>
<br><br><br>E、align:设置表格在浏览器中的位置。不建议使用了。<br> 可选值:left 表格居左 /center 表格居中/right 表格居右<br><br><br>F、bgcolor:背景色<br> bordercolor:边框颜色<br> background:背景图 background="img/computer.jpg" <br> 背景色和背景图同时存在时,背景图会覆盖背景色<br><br><br>(3)tr与td常用属性<br>A、width:单元格宽度<br> height:单元格的高度<br><br>B、bgcolor: 单元格的颜色<br><br>C、align:设置单元格中的文字,水平对齐方式。<br> left、center、right<br> valign:设置单元格中的文字,垂直对齐方式。<br> top、middle、bottom<br><br>D、 nowrap="nowrap" 当单元格文字过多时,设置单元格文字不断行显示。 但是,会把表格的宽度撑大!!!<br><br><br>(4)表格的跨行与跨列<br><br>①跨列:在td上使用属性colspan="n"进行跨列。如果一个单元格跨n列,则,单元格右边的n-1个单元格需要去掉。<br><br>②跨行:在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>
三、写在后面的话
第一次接触博客,第一发文内心还是有些小激动的,对于刚接触不久代码的我,就觉得代码是一个神奇的地方,而且既神奇又觉得很好玩。
之前就一直觉得这些东西很深奥,感觉是我所触及不到的,但是当我接触到后,还是挺喜欢的。
最后请各位多多关照。
Atas ialah kandungan terperinci HTML的基本结构与标签的初步了解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!