HTML5 基础1

news2024/11/17 0:37:22

<b> 和 <strong>的异同
1. 相同点：在显示上，这两个标签都是加粗文本。
2. 不同点：使用网页阅读器阅读网页（盲人使用），strong 会重读，b 则不会。从起源上来说，strong 是为了在未来建设语义网而诞生的。应该知道的是，html 是负责显示的标记，不能表示语义。也就是说，浏览器知道这个标签如何显示，而不知道标签所标记的内容应该是什么含义。而 strong 在语义上走出了第一步。
<em> 和 <i>的异同
1. 相同点：在显示上，这两个标签都是斜体文本。
2. 不同点：<em> 把文本定义为强调的内容。<em> 标签告诉浏览器把其中的文本表示为强调的内容。尽管现在 <em> 标签修饰的内容都是用斜体字来显示，但这些内容也具有更广泛的含义。相反<i>没有特殊含义。
关于创建电子邮件链接时如何发送邮件内容
1. 示例
```
    <a href="mailto:741140***@qq.com?bcc=202232203****@mail.ncut.edu.cn&subject=123&body=666" rel="nofollow">发送邮件</a>
```
2. 参数说明
3. 名词解释
  1. 抄送：英文名称：Carbon Copy，又简称为 CC。在网络术语中，抄送就是将邮件同时发送给收信人以外的人，用户所写的邮件抄送一份给别人，对方可以看见该用户的 E-mail。同收件人地址栏一样，不可以超过 1024 个字符。一般来说，使用"抄送"服务时，多人抄送的电子邮件地址使用 ; 分隔。
  2. 密件抄送：英文名称：Blind Carbon Copy ，又称“盲抄送”，和抄送的唯一区别就是它能够让各个收件人无法查看到这封邮件同时还发送给了哪些人。密件抄送是个很实用的功能，假如一次向成百上千位收件人发送邮件，最好采用密件抄送方式，这样一来可以保护各个收件人的地址不被其他人轻易获得，二来可以使收件人节省下收取大量抄送的 E-mail 地址的时间。
4. 补充：nofollow 是 HTML 页面中 a 标签ref的属性值。这个标签的意义是告诉搜索引擎"不要追踪此网页上的链接或不要追踪此特定链接"。
关于head的问题
1. head 标签和 header 标签的不同
  1. head 标签用于定义文档头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
  2. header 标签用于定义文档的页眉（介绍信息）。
2. HTML<title>元素不仅可以显示文本，也可以在左侧显示logo等图片。显示时，要将<link>标签放入<head>里。
```
<head>
<title>Document</title>
    <link rel="shortcut icon" href="../images/lightoff.png">
    <link rel="stylesheet"  href="mystyle.css">
</head>
```
3. meta补充
HTMLCSS
1. 内联样式
```
<p style="color:blue;margin-left:20px;">这是一个段落。</p>
```
2. 内部样式表
```
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
```
3. 外部样式表
```
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
```
4. CSS 引入外部标签问题
  1. 第一种方式link，使用最多并且稳定
```
<link rel="stylesheet" href="标签路径">
```
  2. 第二种方式：import
```
<style>
@import url("标签路径")
</style>
```
  3. 扩展知识点: link 和 import之间的区别?
    1. 本质的差别：link 属于 XHTML 标签，而 @import 完全是 CSS 提供的一种方式。
    2. 加载顺序的差别：当一个页面被加载的时候（就是被浏览者浏览的时候) ，link 引用的 CSS 会同时被加载，而 @import 引用的 CSS 会等到页面全部被下载完再被加载。所以有时候浏览 @import 加载 CSS 的页面时开始会没有样式(就是闪烁)，网速慢的时候还挺明显。
    3. 兼容性的差别: @import 是 CSS2.1 提出的，所以老的浏览器不支持，@import 只有在 IE5 以上的才能识别，而 link 标签无此问题。
    4. 使用 dom(document object model文档对象模型 )控制样式时的差别：当使用 javascript 控制 dom 去改变样式的时候，只能使用 link 标签，因为@import 不是 dom 可以控制的。

表格

示例

 <!-- 工作表 -->
    <h1 style="text-align: center;">My working time</h1>
    <h4 style="text-align: center;">working Day</h6>
        <table border="1" cellspacing="5" align="center">
            <tr>
                <th rowspan="2">AM</th>
                <th>9:30</th>
                <th>11:30</th>
                <th>----</th>
                <th>----</th>
                <th>----</th>
                <th>----</th>
            </tr>
            <tr>
                <th>working</th>
                <th>Go off work</th>
                <th>Empty</th>
                <th>Empty</th>
                <th>Empty</th>
                <th>Empty</th>
                
            </tr>
            <tr>
                <th colspan="7">Rest</th>
            </tr>
            <tr>
                <th rowspan="2">Pm</th>
                <th>1:00</th>
                <th>6:00</th>
                <th>----</th>
                <th>----</th>
                <th>----</th>
                <th>----</th>
            </tr>
            <tr>
                <th>working</th>
                <th>Go off work</th>
                <th>Empty</th>
                <th>Empty</th>
                <th>Empty</th>
                <th>Empty</th>
            </tr>
        </table>

样式参考

iframe网页嵌套

实例

<iframe src="test" frameborder="0" style="width: 200;height: 200;" name="aaaa"></iframe>
    <br>
    <a target="aaaa" href="https://www.runoob.com">点我</a>

效果

实体
1. 在 HTML 中，某些字符是预留的。在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。字符实体类似这样：
2. 实体名称英文全称：
  
  lt : less than ；gt : greater than ；amp : ampersand ；quot : quotation