Home > Article > Web Front-end > A preliminary understanding of the basic structure and tags of HTML
1. Preliminary understanding of HTML
HTML is a hypertext tag language, and the browser is a tool used to "interpret and execute" HTML source code.
The basic structure of HTML
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body></body></html>
##Where is a document type declaration, which declares that this file must be an HTML5 file, allowing the browser to parse according to HTML5 preparations. It must be in HTML5 and must be Yes, and it must be written at the top of the file.
##
<span style="max-width:90%"><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>
链接网页的小图标，网页选项卡上面的小图片where rel="icon" indicates that the current link is used to link to the web page icon
href="img/ss.gif "Indicates the location of the icon's address
<link rel="icon" href="img/sss.gif" />
<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" means that this meta tag sets the description information of the web page;
content="" means the detailed description information content! ! <br>
<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> 图片<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) Row-level tags
Common row-level tags:
(1) Text tag span
① The span tag is just a wrapping function and has no other meaning; <br> ② The span function is similar to that of div and needs to be Used with CSS. It’s just that div is a block-level tag and span is a line-level tag
<br> (2) Emphasize the tags em and strong; slant the tag i; bold the tag b; between the four The difference
#① both em and i can be tilted. Both strong and b can be made bold! However, i and b are simply bold and slanted, while em and strong have more emphasized semantics. <br> ② Both em and strong indicate emphasis, but strong emphasizes a higher level! ! <br> Note: <br> 1. The purpose of emphasis: Let search engines know what the web page emphasizes! Easy to display on search engines! <br> 2. Strong and em can be nested in multiple layers, indicating increasing emphasis!
(3) Short reference tag q: indicates a short reference. cite attribute: used to declare the source of the citation.
##【Commonly used quote tags】<br>
Used to quote a piece of content<br>
Used to quote a sentence<br> Commonly used to cite the title of works, calligraphy and painting titles, etc. <br><br> Similarity: The three citation tags all use the cite attribute to indicate the source of the citation <br> Difference: ① The content of the citation is different. Blockquote->A paragraph, q->A sentence, cite->Work name<br>② The default effects displayed are different. blockquote->The entire paragraph is indented to the right by default; q->Quotes are added by default; cite->Italic by default!
(4) Reduce the tag small: reduce the font by one size; big tag: enlarge the font by one size.
Note: <br> ① Small and big can be nested in multiple levels until the font reaches the minimum or maximum; <br> ② These two tags have been eliminated and are not recommended for use.
(5) Image tag img
① src attribute: Indicates the path of the image [Legal way of image path]<br>A. Internet link: Since the pictures are on other websites, if other websites delete the pictures, we cannot access them, so this method is not recommended; <br> 
<br>
<br>B. Absolute path: Pictures using absolute paths can only be accessed using the file protocol on this machine! Therefore, it is strictly prohibited to use this method! <br>
<br>C. Relative path: <br>a. The picture is in the same folder as the current document: directly write the picture name <br> < img src="//m.sbmmt.com/m/faq/icon.jpg" /><br>b. The picture is in the folder below the current document: folder name/picture name<br> < img src="//m.sbmmt.com/m/faq/img/icon.jpg" /><br>c. The picture is in the upper folder of the current document: ../picture name (../ means going back one layer)<br> 
<br>However, be sure to note: the picture must be included in the project and cannot be accessed outside the project picture of. <br><br><br>② height: the height of the picture width: the width of the picture <br> 
<br><br> ③ title: The title of the picture, which is the prompt text you see after pointing the mouse over it<br> < ;img src="//m.sbmmt.com/m/faq/img/icon.jpg" title="Prompt text seen when the mouse is pointed over" /><br><br> ④ alt: Text displayed when the image cannot be loaded<br> <br><br> ⑤ align: image How the surrounding text is aligned relative to the image. <br> Optional values: top->top of picture center->middle of picture bottom->bottom of picture<br> 12345
（6）Hyperlink tag a
A, href Attribute: Indicates the page to which the hyperlink jumps. <br> ① You can write the network address: <br> This is a hyperlink
<br> ② You can open a local html file: <br>Use a relative path to determine the file address. Determined in the same way as the img tag. <br> This is a hyperlink
<br>## B. title attribute: the prompt text displayed after the mouse is pointed over <br> This is a hyperlink< /a>
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>
3. The words written at the back
#This is my first time contacting a blog. I was a little excited when I posted the first post. As a code person, I feel that code is a magical place, and it is both magical and fun.
I have always felt that these things are very profound and beyond my reach, but when I came into contact with them, I still liked them. .
#Finally, please take care of me.
##
The above is the detailed content of A preliminary understanding of the basic structure and tags of HTML. For more information, please follow other related articles on the PHP Chinese website!