:前端Demo |HTML常用标签|适合学习前端一个月的同学-经验观点免费ppt模版下载-道格办公

标题

在浏览网页中最先关注的是文章的标题,字体很大很突出. 通常使用<h1></h1>对标签.h标签分为6种,分别是 <h1> - <h6> ,字体从大到小.

基本语法：

<h1>...</h1><h2>...</h2>......<h6>...</h6>

实例：

<!DOCTYPE html><html lang='en'><head>    <meta charset='UTF-8'>    <meta http-equiv='X-UA-Compatible' content='IE=edge'>    <meta name='viewport' content='width=device-width, initial-scale=1.0'>    <title>Document</title></head><body>    <h1>我是h1标签</h1 >    <h2 >我是h2标签</h2 >    <h3 >我是h3标签</h3 >    <h4 >我是h4标签</h4 >    <h5 >我是h5标签</h5 >    <h6 >我是h6标签</h6 ></body></html>

效果：

字体和颜色

定义文字大小和颜色使用font标签

它的的属性值有：face（字体）color（颜色）等

实例：

<!DOCTYPE html><html lang='en'><head>    <meta charset='UTF-8'>    <meta http-equiv='X-UA-Compatible' content='IE=edge'>    <meta name='viewport' content='width=device-width, initial-scale=1.0'>    <title>Document</title></head><body>    <font   face = '黑体'  color = 'red' >文字的字体和颜色</font ></body></html>

效果：

段落

浏览器解析HTML文档会忽略空白符，所以要想保证正常的分段换行的话，必须指出哪些文字是属于同一段落的，这就用到了标签<p>。<p>标签式段落标记,浏览器会自动地在段落的前后添加空行。

基本语法：

 <p> ……</p>

实例：

<!DOCTYPE html><html lang='en'><head>    <meta charset='UTF-8'>    <meta http-equiv='X-UA-Compatible' content='IE=edge'>    <meta name='viewport' content='width=device-width, initial-scale=1.0'>    <title>Document</title></head><body>    <p >这是第一个段</p >    <p >这是第二个段</p ></html>

效果：

字体加粗

基本语法：

<b>...</b>

实例：

<!DOCTYPE html><html lang='en'><head>    <meta charset='UTF-8'>    <meta http-equiv='X-UA-Compatible' content='IE=edge'>    <meta name='viewport' content='width=device-width, initial-scale=1.0'>    <title>Document</title></head><body>    这是没有使用b标签的正常字体     <b >使用b标签加粗的字体</b >
</body></html>

效果：

斜体

基本语法：

<i> ……</i>
<em> ……</em>
<cite> ……</cite>

实例：

<!DOCTYPE html><html lang='en'><head>    <meta charset='UTF-8'>    <meta http-equiv='X-UA-Compatible' content='IE=edge'>    <meta name='viewport' content='width=device-width, initial-scale=1.0'>    <title>Document</title></head><body>    <i >斜体标记i演示</i >    <em >斜体标记em演示</em >    <cite >斜体标记cite演示</cite ></body></html>

效果：

换行

也有人不用<p>，而用<br>。<br>只表示换行，不表示段落的开始或结束，所以通常没有结束标签。

基本语法：

....<br/>

实例：

<!DOCTYPE html><html lang='en'><head>    <meta charset='UTF-8'>    <meta http-equiv='X-UA-Compatible' content='IE=edge'>    <meta name='viewport' content='width=device-width, initial-scale=1.0'>    <title>Document</title></head><body>    这是第一段<br  />    这是第二段</html>

效果：

可跳转链接

允许我们同其他网页或站点之间进行连接的元素。各个网页链接在一起后，才能真正构成一个网站。

基本语法：

<a href='http://www.baidu.com' title='链接到百度' target='_blank'>百度网</a>

实例：

<!DOCTYPE html><html lang='en'><head>    <meta charset='UTF-8'>    <meta http-equiv='X-UA-Compatible' content='IE=edge'>    <meta name='viewport' content='width=device-width, initial-scale=1.0'>    <title>Document</title></head><body>    <a href='http://www.baidu.com' title='链接到百度' target='_blank'>百度网</a></html>

效果：

E N D

扫描二维码

关注我们

java技术大本营

有什么建议可以留言告诉我们哦!

文章为用户上传，仅供非商业浏览。发布者：Lomu，转转请注明出处： https://www.daogebangong.com/articles/detail/Frontend%20DemoCommon%20HTML%20tagsSuitable%20for%20students%20who%20have%20studied%20the%20frontend%20for%20a%20month.html