HTML学习笔记第二天之字符实体

2017-12-11 本文已影响47人 coderhlt

一、常见基础标签

1. h （标签作用：定义 HTML 标题）
  <h1>我是h1</h1>
  <h2>我是h2</h2>
  <h3>我是h3</h3>
  <h4>我是h4</h4>
  <h5>我是h5</h5>
  <h6>我是h6</h6>
  h标签一共有6个，超过6则无效；在企业开发中，一定要慎用H系列的标签，特别是H1标签，在企业开发中一般情况下一个界面中只有一个h1标签。
  h元素有助于网站的SEO(Search Engine Optimization)优化，可以促进关键词排名。建议在网页中最多只有1个h1元素。乱用h元素不仅不会给网站带来好的权重，同时也有可能被搜索引擎以为作弊，最后导致K站。
1. strong标签
  用于强调某些文本，粗体的显示效果。

<p>
    时光如水，岁月无声。<strong>你若安好，便是晴天</strong>。
</p>

1. hr ( 标签在 HTML 页面中创建一条水平线)

 /<hr  />  
 <hr  >  
在 HTML 中，<hr> 标签没有结束标签。
在 XHTML 中，<hr> 必须被正确地关闭，比如 <hr />。
HTML5是向下兼容的，因此hr标签结束加不加”/“都可以，以后在开发中，我们只需要根据高级开发工具的提示就好。在开发中很少使用hr标签，因为标签是用来描述语义的，画横线可以通过cs来定义

1. p(定义段落的)
  <p>这是一段内容</p>
  <p>这是第二段内容</p>
  <p>这是第三段内容</p>
1. br(定义简单的折行)
  br标签的注意点:
  多个br标签可以连续使用, 使用了多少个br标签就会换多少行
  由于HTML的作用就是用来给文本添加语义, 而br标签的语义是不另起一个段落换行, 而在企业开发中一般情况下需要换行都是因为需要另起一个段落, 所以在企业开发中很少使用br标签.比如说一段文字没有结束就需要换行就可以通过br实现
1. pre
  在默认情况下，HTML代码中的大多数空格都会被浏览器压缩，比如一段连续的空格会被压缩成1个空格，如果想保留HTML代码中的空格、换行，可以用pre元素

<body>
<pre>
   测试测试测试    测试
    测试测试
    测试测试测试   测试测试测试     测试测试测试
</pre>
<p>
   测试测试测试    测试
    测试测试
    测试测试测试   测试测试测试     测试测试测试
</p>
</body>
</html>

二、字符实体

HTML中有一些字符是预留出来作特殊用途的

<body>
 我是换行标签<br>啊
</body>

我们本意是在浏览器中显示：

屏幕快照 2019-03-08 下午5.28.16.png
但运行一下浏览器显示的是

屏幕快照 2019-03-08 下午5.26.41.png
想一想很明显浏览器是直接将
解析成换行符了，这里的小于号<,大于号>在超文本标记语言中是特殊的标签，我们想在浏览器中表达它就需要一些特殊的字符去代替它。

<body>
 我是换行标签&lt;br&gt;啊
</body>

/*比如 上面 &lt;表达的就是< 
&gt;表达的就是>
*/

像这样特殊的字符就是字符实体，书写格式一般有2种:
&entity_name;
&#entity_number;

屏幕快照 2019-03-08 下午5.38.49.png

比较常用的有

空格: &nbsp;
大于号:&gt;
小于号:&lt;
&:&amp;

例子：

1、屏幕快照 2019-03-08 下午5.44.27.png

<pre>
    我是换行标签&lt;br&gt;啊

    我是段落标签&lt;p>&lt;/p>
</pre>

2、

屏幕快照 2019-03-08 下午5.47.39.png

<body>
字符实体&nbsp;&nbsp;字符实体
</body>

3、

屏幕快照 2019-03-08 下午5.49.41.png

<body>
字符实体&amp;nbsp;代表空格
</body>

4、

<body>
<div title='这是一块"特殊"的内容'>我是div</div>
<div title=这是一块"特殊"的内容>我是div</div>
<div title="这是一块&quot;特殊&quot;的内容">我是div</div>
<div title=&quot;这是一块特殊的内容&quot;>我是div</div>
</body>

总结 :（1）、元素的属性值可以单引号包住，但不建议这么做
（2）、元素的属性值可以不用单引号和双引号，但不建议这么做
（ 3）、建议元素的属性值一定要用双引号" "包住
（4）、如果属性值里面出现了特殊字符，应该用字符实体代替。

5、

<p>让我们在早前的例子中添加第sangge
<pre>
    <code>
&lt;div class = "container'>
&lt;p>Slbling 2&lt;/p>
&lt;p>Slbling 3&lt;/p>
&lt;p>Slbling 4&lt;/p>
&lt;/div>
    </code>
</pre>
</p>

在这里其实我们可以不用code标签的，但我们应该使用了code标签，这样更能清楚地表达这是一段代码，表明清楚你的语义

HTML学习笔记第二天之字符实体

一、常见基础标签

二、字符实体

猜你喜欢

热点阅读