【html-css】03 字符实体与语义化标签

一、文本标签：针对文字设定的一些标签

1、标题标签：

<h1></h1> 一级标题最重要的标题（一般会用来放logo）

<h2></h2> 二级标题

<h3></h3> 三级标题

<h4></h4> 四级标题

<h5></h5> 五级标题

<h6></h6> 六级标题

注：h1 - h6 默认自带加粗和字号大小；

2、段落标签：

<p></p>

注：p标签自带段间距；

3、加粗标签：

<b></b> 普通加粗

<strong></strong> 语义化，更加强调

注：显示效果一样，但是strong更具有强调的意思，是语义化标签，浏览器更喜欢语义化标签；

4、倾斜标签：

<i></i> 普通倾斜

<em></em> 语义化，更加强调；

5、下划线标签：

<u></u> 普通的下划线（了解）

<ins></ins> 语义化，更加强调

6、删除线标签：

<s></s> 普通的删除线（了解）

<del></del> 语义化，更加强调

7、换行标签：单标记

<br>

<br />

8、水平线（分割线）：单标记,是块状元素

<hr>

<hr />

9、转义字符：

空格：  

注：浏览器会忽略网页上的空格（键盘）和回车，

但是如果空格和回车是在文本中或者是行内元素之间出现的,浏览器会保留一个空格的位置显示出来；

一个 代表一个字符的位置；显示大小不是固定的，是跟字号大小有关系的；

< : <

> : >

更多的字符实体，可参考：HTML 字符实体、HTML ISO-8859-1 参考手册

10、文本节点：

注：没有默认样式；

当想改变某一个词或者某一句话的样式时，都可以使用span，在通过css对span设置样式；

11：上标：

下标：

二. 块元素与行内元素

块元素（block element）

在网页中一般通过块元素来对页面进行布局

行内元素（inline element）

行内元素主要用来包裹文字
一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素
- 如<p>元素中不能放任何的块元素，不过

三. 内容修正

浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正，比如：

标签写在了根元素的外部
<p>元素中嵌套了块元素
根元素中出现了除head和body以外的子元素

这个通过浏览器中的查看网页源代码并不能看到效果，但是使用 F12 进行开发者调试时是能够看到上述几种情况被修正的结果。

不过虽然浏览器能够对不规范的页面内容进行修正，还是不建议编写不规范的代码，因为这对后期代码维护或团队代码协作将是非常不好的后果和体验。

四. 图片标签

图片标签用于向当前页面中引入一个外部图片

img标签是一个自结束标签，这种元素属于替换元素（块和行内元素之间，具有两种元素的特点）

属性

src：属性指定的是外部图片的路径（路径规则和超链接是一样的）
alt：图片的描述，这个描述默认情况下不会显示，有些浏览器会在图片无法加载时显示，搜索引擎会根据 alt 中的内容来识别图片
width：图片的宽度（单位是像素）
height ：图片的高度（单位是像素）
宽度和高度中如果只修改了一个，则另一个会等比例缩放

注意

一般情况在 pc 端，不建议修改图片的大小，需要多大的图片就裁多大
但是在移动端，经常需要对图片进行缩放（大图缩小）

举例

HTML

<img
  src="https://gitee.com/vectorx/ImageCloud/raw/master/img/20210513002416.png"
  alt="蒂姆·伯纳斯·李爵士，万维网的发明人"
/>
<img
  src="https://gitee.com/vectorx/ImageCloud/raw/master/html5/20210514233853.gif"
  alt="结构、表现、行为"
/>

效果

图片格式

jpeg（jpg）

支持的颜色比较丰富
不支持透明效果
不支持动图
一般用来显示照片

gif

支持的颜色比较单一
支持简单透明
支持动图

png

支持的颜色丰富
支持复杂透明
不支持动图
专为网页而生

webp

这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式
具备其他图片格式的所有优点，而且文件还特别的小
缺点：兼容性不好

五. 超链接

超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置

使用a标签来定义超链接，href属性指定跳转的目标路径，值可以是一个外部网站的地址，也可以写一个内部页面的地址

超链接是也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素

属性：

href="" 添加连接地址（必须要有的）

-> href="#" 如果里面是空或者是一个#,代表的是空链接;会刷新当前页面;

-> href="http://www.baidu.com" 连接到某个网站或者网页；

-> href="目标文件路径" 通过相对路径，实现页面和页面之间跳转

-> href="#id名" 在同一个页面内不同位置进行快速跳转；

外部地址

Linking to an absolute URL：链接一个绝对路径
Linking to an email address：链接一个 email 地址
Linking to telephone numbers：链接电话号码
Using the download attribute to save a <canvas> as a PNG：下载图片

<ul>
  <li><a href="https://www.baidu.com">Website</a></li>
  <li><a href="mailto:example@outlook.com">Email</a></li>
  <li><a href="tel:+123456789">Phone</a></li>
</ul>

效果

内部地址

当我们需要跳转一个服务器内部的页面时，一般我们都会使用相对路径，会以./或../开头

./ 表示当前文件所在目录，可以省略不写
../表示当前文件所在目录的上一级目录

<a href="./test1.html">超链接1</a><br />
<a href="../test2.html">超链接2</a><br />
<a href="./test3/test3.html">超链接3</a><br />
<a href="../test4/test4.html">超链接4</a>

效果

新建页面

target属性，用来指定超链接打开的位置可选值：

_self在当前页面中打开超链接，默认值
_blank在新建页面中打开超链接

注：当target="" 的属性值为空时，是当前窗口打开；

当target="" 的属性值，是任意的值时，是显示为新窗口打开；但是不建议这样使用；

<a href="./test1.html">超链接1——默认</a><br />
<a href="./test1.html" target="_self">超链接1——当前页面</a><br />
<a href="./test1.html" target="_blank">超链接1——新建页面</a><br />

锚点跳转

可以使用javascript:void(0);来作为href的属性，此时点击这个超链接什么也不会发生

可以将#作为超链接的路径的占位符使用。

可以直接将超链接的href属性设置为#，这样点击超链接以后页面不会发生跳转，而是转到当前页面的顶部的位置

可以跳转到页面的指定位置（锚点），只需将href属性设置#目标元素的id属性值（唯一不重复）

HTML

<p>汉皇重色思倾国，御宇多年求不得。</p>
<p>杨家有女初长成，养在深闺人未识。</p>
<p>天生丽质难自弃，一朝选在君王侧。</p>
<p><a id="Anchor1" href="#Anchor2"> 回眸一笑百媚生，六宫粉黛无颜色。</a></p>
<p>春寒赐浴华清池，温泉水滑洗凝脂。</p>
<p>侍儿扶起娇无力，始是新承恩泽时。</p>
<p>云鬓花颜金步摇，芙蓉帐暖度春宵。</p>
<p>春宵苦短日高起，从此君王不早朝。</p>
<p>承欢侍宴无闲暇，春从春游夜专夜。</p>
<p><a id="Anchor2" href="#Anchor3"> 后宫佳丽三千人，三千宠爱在一身。</a></p>
<p>金屋妆成娇侍夜，玉楼宴罢醉和春。</p>
<p>姊妹弟兄皆列土，可怜光彩生门户。</p>
<p>遂令天下父母心，不重生男重生女。</p>
<p>骊宫高处入青云，仙乐风飘处处闻。</p>
<p>缓歌慢舞凝丝竹，尽日君王看不足。</p>
<p>渔阳鼙鼓动地来，惊破霓裳羽衣曲。</p>
<p>九重城阙烟尘生，千乘万骑西南行。</p>
<p>翠华摇摇行复止，西出都门百余里。</p>
<p>六军不发无奈何，宛转蛾眉马前死。</p>
<p>花钿委地无人收，翠翘金雀玉搔头。</p>
<p>君王掩面救不得，回看血泪相和流。</p>
<p>黄埃散漫风萧索，云栈萦纡登剑阁。</p>
<p>峨嵋山下少人行，旌旗无光日色薄。</p>
<p>蜀江水碧蜀山青，圣主朝朝暮暮情。</p>
<p>行宫见月伤心色，夜雨闻铃肠断声。</p>
<p>天旋地转回龙驭，到此踌躇不能去。</p>
<p>马嵬坡下泥土中，不见玉颜空死处。</p>
<p>君臣相顾尽沾衣，东望都门信马归。</p>
<p>归来池苑皆依旧，太液芙蓉未央柳。</p>
<p>芙蓉如面柳如眉，对此如何不泪垂。</p>
<p>春风桃李花开夜，秋雨梧桐叶落时。</p>
<p>西宫南苑多秋草，落叶满阶红不扫。</p>
<p>梨园弟子白发新，椒房阿监青娥老。</p>
<p>夕殿萤飞思悄然，孤灯挑尽未成眠。</p>
<p><a id="Anchor3" href="#Anchor4"> 迟迟钟鼓初长夜，耿耿星河欲曙天。 </a></p>
<p>鸳鸯瓦冷霜华重，翡翠衾寒谁与共。</p>
<p>悠悠生死别经年，魂魄不曾来入梦。</p>
<p>临邛道士鸿都客，能以精诚致魂魄。</p>
<p>为感君王辗转思，遂教方士殷勤觅。</p>
<p>排空驭气奔如电，升天入地求之遍。</p>
<p>上穷碧落下黄泉，两处茫茫皆不见。</p>
<p>忽闻海上有仙山，山在虚无缥渺间。</p>
<p>楼阁玲珑五云起，其中绰约多仙子。</p>
<p>中有一人字太真，雪肤花貌参差是。</p>
<p>金阙西厢叩玉扃，转教小玉报双成。</p>
<p>闻道汉家天子使，九华帐里梦魂惊。</p>
<p>揽衣推枕起徘徊，珠箔银屏迤逦开。</p>
<p>云鬓半偏新睡觉，花冠不整下堂来。</p>
<p><a id="Anchor4" href="#Anchor5"> 风吹仙袂飘飖举，犹似霓裳羽衣舞。 </a></p>
<p>玉容寂寞泪阑干，梨花一枝春带雨。</p>
<p>含情凝睇谢君王，一别音容两渺茫。</p>
<p>昭阳殿里恩爱绝，蓬莱宫中日月长。</p>
<p>回头下望人寰处，不见长安见尘雾。</p>
<p>惟将旧物表深情，钿合金钗寄将去。</p>
<p>钗留一股合一扇，钗擘黄金合分钿。</p>
<p>但令心似金钿坚，天上人间会相见。</p>
<p>临别殷勤重寄词，词中有誓两心知。</p>
<p>七月七日长生殿，夜半无人私语时。</p>
<p><a id="Anchor5" href="#Anchor6"> 在天愿作比翼鸟，在地愿为连理枝。 </a></p>
<p>天长地久有时尽，此恨绵绵无绝期。</p>

<!-- Heading to link to -->
<a href="#">回到顶部</a>

效果

超链接实现文件下载：

在href里直接添加要下载的文件路径；

如果添加文件是浏览器可以直接解读，就会直接打开，

如果添加的文件是浏览器不能直接解读的，就会以下载的方式下载到本地；

如果相让浏览器能够直接解读的文件实现下载功能，要添加属性：download='下载文件的名称' 属性；

download='下载文件的名称' 属性用来设置下载文件的名称(firefox/chrome支持) ；h5新增属性用来设置下载文件的名称(firefox/chrome支持) ；h5新增属性

扩展：

<base target="_blank" href="images/"> 空标记，该标签为页面上的所有链接规定默认地址或默认目标。

注：

1、该标签要写在head区域内

2、href="相对基准路径" 只针对相对路径起作用；（了解）

对页面上所有用到相对路径的元素都有起作用，如、超链接、图片、音频、视频等；

3、target="_blank" 一般是设置超链接的打开方式；

六. 列表

在 html 中可以创建列表，html 列表一共有三种：

有序列表，使用ol标签来创建有序列表，使用li表示列表项

HTML

<ol>
  <li>Mix flour, baking powder, sugar, and salt.</li>
  <li>In another bowl, mix eggs, milk, and oil.</li>
  <li>Stir both mixtures together.</li>
  <li>Fill muffin tray 3/4 full.</li>
  <li>Bake for 20 minutes.</li>
</ol>

无序列表，使用ul标签来创建无序列表，使用li表示列表项

HTML

<ul>
  <li>Milk</li>
  <li>
    Cheese
    <ul>
      <li>
        Blue cheese
        <ul>
          <li>Sweet blue cheese</li>
          <li>Sour blue cheese</li>
        </ul>
      </li>
      <li>Feta</li>
    </ul>
  </li>
</ul>

可以看出，列表元素之间是可以互相嵌套的

定义列表，使用dl标签来创建定义列表，使用dt表示定义的内容，使用dd来对内容进行解释说明

HTML

<dl>
  <dt>Beast of Bodmin</dt>
  <dd>A large feline inhabiting Bodmin Moor.</dd>

  <dt>Morgawr</dt>
  <dd>A sea serpent.</dd>

  <dt>Owlman</dt>
  <dd>A giant owl-like creature.</dd>
</dl>

10. iframe 内联框架

内联框架iframe，用于向当前页面中引入一个其他页面

语法：

<iframe></iframe>

属性：

src=""指定要引入的网页的路径
width=""指定要引入的网页的路径
height=""指定要引入的网页的路径
frameborder指定内联框架的边框，属性值： 0 / 1 0：没有边框； 1：显示边框
scrolling=""指定是否滚动；属性值：auto(自由显示)/yes(显示)/no(不显示)
name=""指定给框架定义一个name名字，名字是自定义的；所有标签都可以添加的属性

作用：可以把其他页面引入到本页面显示；

说明：iframe 是一个内联块元素，会和其他行内元素并列显示，而且自带宽高；

举例

HTML

<iframe
  src="https://www.qq.com"
  width="800"
  height="600"
  frameborder="0"
></iframe>

效果

posted @ 2022-05-18 22:35 泡芙_L 阅读(175) 评论(0) 收藏举报

刷新页面返回顶部

https-blog-paofu-net

【html-css】03 字符实体与语义化标签

二. 块元素与行内元素

块元素（block element）

行内元素（inline element）

三. 内容修正

四. 图片标签

图片格式

jpeg（jpg）

gif

png

webp

五. 超链接

外部地址

内部地址

新建页面

锚点跳转

六. 列表

10. iframe 内联框架

公告