美文网首页HTML学习笔记
HTML学习笔记第二天之字符实体

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

作者: coderhlt | 来源:发表于2017-12-11 17:38 被阅读47次

一、常见基础标签

    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学习笔记第二天之字符实体

    本文链接:https://www.haomeiwen.com/subject/wrwiixtx.html