一、HTML头部head区域常见使用元素
实例
<!DOCTYPE html><!--声明：告诉浏览器以下文档是html文档-->
<html>
<head><!--文档头部head其内部元素可以引用脚本、样式表，为网页提供源信息-->
<title>PHP中文网HTML第一课</title><!--网页头部标题-->
<meta charset="utf-8"><!--定义网页字符集编码，常见字符集有UTF-8和GBK-->
<!--主要用于不允许页面缩放，多用于手机端-->
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0， minimum-scale=1.0">
<!--link：引入外部文件-->
<!--rel：规定当前文档与被链接文档之间的关系-->
<!--type：定义被链接文档的类型-->
<!--href：指定被链接链接文档的路径-->
<link rel="stylesheet" type="text/css" href="style.css">
<!--用于网页在浏览器前方标签定义图标-->
<link rel="icon" type="image/x-icon" href="favicon.ico">
<style type="text/css">
/*内部样式*/
*{margin:0;padding:0;}<!--格式化页面所有元素，*表示所有元素-->
p{
width：400px;/*控制<p>段落内容显示宽度*/
text-indent:2em;/*<p>段落首行缩进*/
}
div{
width:200px;/*div边框宽度*/
height:20px;/*div边框的高度*/
background:#F2F2F2;/*控制文章标题背景颜色*/
/*white-space:规定如何处理元素内的空白*/
white-space:nowrap; /*nowrap:元素中文本不允许换行*/
/*overflow:hidden:属性规定当内容溢出元素框时发生的事情*/
overflow:hidden;/*hidden:元素中文本溢出时则自动隐藏*/
/*text-overflow:属性规定当文本溢出包含的元素时发生的事情*/
text-overflow:ellipsis;/*ellipsis:用省略号代表被溢出修剪的文本*/
}
</style>
</head>
<body>
<!--页面中常用的文本元素-->
<!--标题标签是通过<h1>--<h6>标签来进行定义的-->
<!--一个页面中通常只有一个h1标签，多个h1标签会影响SEO权重-->
<h1>第一个标题标签</h1>
<h2>第一个标题标签</h2>
<h3>第一个标题标签</h3>
<!--段落是通过<p>标签定义的-->
<p>党的十八大以来，***总书记就加强党的作风建设，力戒形式主义、官僚主义作出一系列重要指示。近期，***总书记专门作出重要批示，强调2019年要解决一些困扰基层的形式主义问题，切实为基层减负。为贯彻落实***总书记重要指示批示精神，更好为基层干部松绑减负，激励广大干部担当作为、不懈奋斗，经中央领导同志同意，决定将2019年作为“基层减负年”，现就有关工作要求通知如下。</p>
<!--文本格式化标签（b、del）-->
<b>加粗文本标签</b>
<br><!--br定义换行效果-->
<small>小号字用small定义</small>
<br>
<strong>定义加重语气词</strong><!--SEO权重更高-->
<br>
<del>定义删除线</del>
<br>
商品原价599元,现价<del><b>499元</b></del>
<br>
<p><abbr title="HyperText Markup Language">定义缩写HTML</abrr>(超文本标记语言)</p>
<!--页面中常用文本属性-->
<!--段落首行缩进（text-indent）-->
<!--<a href="链接地址"></a>-->
<a href="http://www.php.cn">PHP中文网官方网站</a>
<br>
<!-- target="_blank"标签在新窗口打开链接-->
<a href="http://www.php.cn" target="_blank" >在新窗口打开PHP中文网官方网站</a>
<div><a>我是一个超级长的长标题我需要隐藏显示</a></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
