Web前端学习课程笔记之HTML+CSS（第六周112~125集）

最新推荐文章于 2024-10-16 21:35:12 发布

IT噜噜

最新推荐文章于 2024-10-16 21:35:12 发布

阅读量68

点赞数

文章标签：前端 css html

本文链接：https://blog.csdn.net/Ghlys/article/details/128117734

版权

四十五、B标签与I标签

用他们可以直接用html修饰文本，不用css，从而减少选择器的使用

<strong >加粗</strong>
         <b>加粗</b>
         <em>斜体</em>
         <i >斜体</i>

四十六、引入标签

 <blockquote>引用大段的段落解释</blockquote> 
 <q>q引入小段的短语解释</q> 
 <abbr>abbr缩写或首字母缩略词</abbr> 
<address>address引用文档地址信息</address> 
 <cite>cite引用著作标题</cite>

四十七、iframe嵌套标签

会创建包含另外一个文档的内联框架（行内框架)
属性：
(1)frameborder:是否显示框架周围的边框
(2)width:
(3)height
(4)scrolling：是否在iframe中显示滚动条，no就是不出现滚动条。
(5)scr：iframe中引入的URL
(6)srcdoc：iframe中显示的页面内容
其中，如果scr与srcdoc同时存在，会识别第一个

<iframe srcdoc="<h1>hello</h2>" src="https://www.taobao.com" frameborder="0" scrolling="no" width="400px" height="400px"></iframe>

如果想要和页面一样大小，在CSS中给iframe添加宽100%的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        iframe{width: 100%;height: 700px;}
    </style>
</head>
<body>
<iframe  src="https://www.taobao.com" frameborder="0" scrolling="no" width="400px" height="700px" ></iframe>
</body>
</html>

四十八/br与wbr标签

br表示硬换行操作:即在文本中遇到br标签就会自动换行
wbr表示软换行操作
如果担心单词太长或者浏览器会在错误的地方换行，那么可以使用wbr元素来添加word bread opportunity，当需要换行时会识别wbr标签处换行，不需要时就不作用

四十九/pre，code标签

针对网页中的程序代码的显示效果。
注意：要将代码中的尖括号用<和>替换

<pre>
    <code>
                &lt;!DOCTYPE html&gt;
        &lt;html lang="en"&gt;
        &lt;head&gt;
            &lt;meta charset="UTF-8"&gt;
            &lt;meta name="viewport"         content="width=device-width,         initial-scale=1.0"&gt;
            &lt;title&gt;Document&lt;/title&gt;
            &lt;body&gt;
                hello world
            &lt;/body&gt;
            &lt;/html&gt;
    </code>
</pre>

五十、map,area标签

引：当我们想实现点击图片可以进入新链接时，可以在图片外面加一个a标签，但当我们想实现点击图片的特殊位置才会有跳转链接或者出现小手之类的效果呢。
给特殊图片添加链接，area能添加的热区形状为：矩形，圆，多边形
用usemap命名将图片与map标签建立联系，coords输入坐标,用ps确认想要坐标，href跳转链接

五十一、embed与object标签

给flash和一些插件进行引入操作
其中object标签需要和<param>标签一起使用

<embed src="插件地址" type="">
<object><param name="" value="插件地址"></object>

五十二、audio与video标签

audio表示嵌入音频文件：
video表示嵌入视频文件:
1、controls元素：默认不显示，要用controls元素显示音视频进度条,如果要修改进度条样式要用到CSS。
2、loop元素：自动循环播放
3、autoplay元素：打开后自动播放
4、有时浏览器不兼容支持src的文件，可以配合source标签支持多个备选方案

<audio src="" controls loop autoplay></audio>
<video src="" controls loop autoplay></video>
<video><source src="" type=""></video>

五十三、文字注解与文字方向

ruby标签定义ruby注释，rt标签定义字符的解释或发音，两者常配合使用。

<ruby>
    露<rt>lù</rt>哈哈哈
</ruby>

bdo标签配合rtl元素使用可以让文字倒叙

<p>
   <bdo dir="rtl">靓女露是美女</bdo> 正经点不是人
</p>

文字倒叙也可以用CSS的span标签和direction元素实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     span{direction: rtl;unicode-bidi: bidi-override;}
    </style>
</head>
<body>
<p>
    <span>靓女露是美女</span>正经点不是人
</p>
</body>
</html>

五十四、link标签

用于引入外部标签等操作
其中rel属性来指定功能：
（1）icon：为网页上方标题栏前面的小图标，写在CSS中。以下是添加网址标题栏的小图标的代码例子，其中icon,x-icon,favicon.ico为固定格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
<link rel="icon" type="/image/x-icon" href="https//www.mobiletrain.org/favicon.ico">
    </style>
</head>

（2）stylesheet：引入外部CSS或其他文件
type指定文件类型

(3)dns-prefectch:提前网站需要引入访问的网址，加快运行速度。代码例子

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
<link rel="dns-prefectch" href="//static.360buyimg.com">
    </style>
</head>

type指定引入文件格式，href引入地址

五十五、meta标签

添加辅助信息，优化网站体验感
内容很难总结，自行观看122集

五十六、HTML5新语义标签

可以用div实现，但不能人性化地体现
header:页眉
footer:页脚
main:主体
这三个标签在一个网页中只能出现一次

以下多写在页眉部分
hgroup:标题组合
nav：导航

以下多写在主体部分
article:独立的内容
aside:辅助信息的内容
section:区域，它的功能和div很像
figure:放图片或视频与文字描述的块
figcaption：描述图像或视频的文字

datalist:选项列表,当在输入框中输入相关内容时，会弹出一些可选择的选项。
input标签制定一个输入框，用id选择器给输入框和选项列表联系在一起，用option标签与value选项添加选项列表。
details与summary:文档细节/文档标题，两者需配合使用，在detail标签中加入open属性，就默认文档细节处于打开的模式。
progress/meter:定义进度条和度量范围
用min与max设置最值，当不给progress添加value值时进度条会一直滑动
可以给meter用low与high元素设置范围，当value值超过这个范围时进度条会变黄色，否则就是绿色。
time:日期。语法是用time双标签给日子封住，实则没有任何外部的表现，就是语义化
mark：给文本标记，表现为像用黄色荧光笔画了被标签封住的内容。
代码：

 <header>
    <hgroup>
        <h1>主标题</h1>
        <h2>副标题</h2>
    </hgroup>
    <nav>
        <li>首页</li>
        <li>论坛</li>
        <li>关于</li>
    </nav>
</header>
<mian>
    <article>
        <section>
            <ul>
                <li>
                    <figure>
                        <img src="" alt="">
                        <figcaption>图片描述</figcaption>
                    </figure>
                </li>
                <li>
                    <figure>
                        <img src="" alt="">
                        <figcaption>图片描述</figcaption>
                    </figure>
                </li>
                <li>
                    <figure>
                        <img src="" alt="">
                        <figcaption>图片描述</figcaption>
                    </figure>
                </li>
            </ul>
        </section>
        <section>
            <input type="text" list="elems">
            <datalist id="elems">
                <option value="a"></option>
                <option value="ab"></option>
                <option value="abc"></option>
                <option value="abcd"></option><option value="abcde"></option>
            </datalist>
            <details open>
                <summary>文档标题</summary>
                <p>文档细节</p>
            </details>
            <progress min="0" max="10" value="8"></progress>
            <meter min="0" max="100"  value="80" low="10" high="60"></meter>
            <p>今天是<time title="2-14">情人节</time>></p>
            <p>还有<mark>8天</mark>四级考试</p>
        </section>
    </article>
    <aside>
         
    </aside>
</mian>
<footer></footer>