Web112~125，184~197

最新推荐文章于 2024-08-21 14:09:37 发布

Quyllu

最新推荐文章于 2024-08-21 14:09:37 发布

阅读量366

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/m0_74344806/article/details/127985139

版权

文章目录

一、HTML 与 XHTML区别
二、strong与b、em与i
三、引用标签
- - 练习
四、iframe 标签
- - 示例
五、br 与 wbr
- - 示例
六、pre 与 code
七、map与area
- - 示例
八、embed 与 object
九、audio 与 video
十、文字注解与文字方向
- - 练习：古诗排版
十一、link标签扩展学习
十二、meta标签扩展学习
十三、HTML5新语义化标签
flex弹性布局
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
作用在flex子项上的CSS属性
Flex案例
Grid网格布局
- Grid-template-columns和grid-template-rows

一、HTML 与 XHTML区别

DOCTYPE文档及编码
元素大小写
属性布尔值
属性引号
图片的alt属性
单标签写法
双标签闭合

二、strong与b、em与i

表现形态都是 文本加粗 和 文本斜体
区别：strong和em是具备语义化的，而b和i是不具备语义化的。

三、引用标签

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

练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>
        <blockquote>“死而后已”——语出自诸葛亮《出师表》：</blockquote>
        “凡事如是，难可逆见，臣鞠躬尽瘁，死而后已，至于成败利钝，非臣之明所能逆睹也。”
    </p>
    <p>
        <q>WWF目标是：“构建人与自然和谐共存的世界。”</q>
    </p>
    <p>
        <abbr title="World Health Organization">WHO</abbr>成立于1948年。
    </p>
    <p>
        <address>网易北京公司</address>
        <address>地址：北京市海淀区西北旺东路10号院</address>
        <address>邮编：100084</address>
    </p>
    <p>
        <cite>资治通鉴</cite>由北宋司马光主编的一部多卷本编年体史书。
    </p>
</body>
</html>

四、iframe 标签

iframe元素会创建包含另外一个文档的内联框架（即行内框架）

可以引入其他的html到当前html中显示。
主要是利用iframe的属性进行样式的调节。

属性	含义
frameborder	规定是否显示框架周围的边框
width	定义iframe的宽度
height	定义iframe的高度
scrolling	规定是否在iframe中显示滚动条
src	规定在iframe中引入URL
srcdoc	规定在iframe中显示的页面内容

其中src与srcdoc（可渲染标签）同时存在时仅优先识别排在首位的

应用场景：数据传输、共享代码、局部刷新、第三方介入等。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        iframe{width: 100%;height: 920px;}
    </style>
</head>
<body>
   <!-- <iframe srcdoc="<h1>hello world</h1>" src="http://www.taobao.com" frameborder="0" scrolling="no" width="400" height="400"></iframe>            可以加h1标签 -->
   <iframe src="http://www.taobao.com" frameborder="0" scrolling="no"></iframe>
</body>
</html>

五、br 与 wbr

br 就是换行
wbr 就是软换行

提示：如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用wbr 元素来添加 Word BreakOpportunity(单词换行时机)

示例

<body>
    <p>
        <!-- Perfection is not just about control. <br> It's also about letting go. -->
        Perfection is not just about control.hhhhh<wbr>wwwwww<wbr>hhhhIt's also about letting go.
        <!-- 单词太长——>单词换行 -->
    </p>
</body>

六、pre 与 code

pre元素可定义预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符。

只在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用code标签。虽然code标签通常只是把文本变成等宽字体，但它暗示着这段文本是源程序代码。

七、map与area

定义一个客户端图像映射
图像映射(image-map)指带有可点击区域的一幅图像。
area 元素永远嵌套在map元素内部。
area元素可定义图像映射中的区域。

给特殊图形加链接，area能添加的热区的形状：矩形、圆形、多边形。

href属性定义区域的URL
shape属性来定义区域的形状
coords属性定义热区的坐标

示例

<body>
    <img src="./img/star.jpg" alt="" usemap="#star">
    <map name="star">
        <!-- <area shape="rect" coords="233 128 534 283" href="http://www.baidu.com" alt="">
        添加矩形（左上角和右下角的坐标） -->
        <!-- <area shape="circ" coords="328 276 60" href="" alt=""> 
        添加圆（圆心、半径） -->
        <!-- <area shape="poly" coords="330 151 363 243 459 246 383 306 409 397 330 344" href="" alt="">
        添加多边形（每个角的坐标） -->
    </map>
</body>

八、embed 与 object

embed和object都表示能够嵌入一些多媒体，如flash动画、插件等。基本使用没有太多区别，主要是为了兼容不同的浏览器而已。

object元素需要配合param元素一起完成

九、audio 与 video

audio标签表示嵌入音频文件
video标签表示嵌入视频文件

默认控件是不显示的，可通过controls属性来显示控件。

为了能够支持多个备选文件的兼容支持，可以配合source标签。

loop循环属性
autoplay自动播放

audio

<audio src="./img/夜色钢琴曲.mp3" controls></audio>

在这里插入图片描述
video

   <video src="./img/I Got You.mp4" controls></video>

请添加图片描述

十、文字注解与文字方向

ruby 、 rt 组合

ruby 注释(中文注音或字符)，rt 标签定义字符(中文注音或字符)的解释或发音。

<ruby>
        桎<rt>zhì</rt>梏<rt>gù</rt>
</ruby>

在这里插入图片描述

bdo标签可覆盖默认的文本方向

<p>
        <bdo dir="rtl">化作烟火</bdo>为你坠落
</p>

在这里插入图片描述

通过CSS方式实现

    <style>
        span{direction: rtl;unicode-bidi: bidi-override;}
    </style>
</head>
<body>
    <p>
        <span>化作烟火</span>为你坠落
    </p>
</body>

在这里插入图片描述

练习：古诗排版

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>满江红·和范先之雪</title>
	<style>
		h2{
			float: left;
			writing-mode: vertical-rl;
		}
		.author{
			float: left;
			height:120px;
			writing-mode: vertical-rl;
			writing-mode: tb-rl;
			color: gray;
		}
		.p{
			float: left;
			writing-mode: vertical-rl;
		}
	</style>
</head>
<body>
	<div class="p">
        <p>
        天上飞琼，毕竟向、人间情薄。<br>
        还又跨、玉龙归去，万花摇落。<br>
		云破林梢添远岫，月临屋角分层阁。<br>
		记少年、骏马走韩卢，掀东郭。<br>
        吟冻雁，嘲饥鹊。<br>
        人已老，欢犹昨。<br>
        对琼瑶满地，与君酬酢。<br>
        最爱霏霏迷远近，却收扰扰还寥廓。<br>
        待羔儿、酒罢又烹茶，扬州鹤。
        </p>
    </div>
	<div class="author">
        辛弃疾 〔宋代〕
    </div>
	<div>
        <h2>满江红·和范先之雪</h2>
    </div>
</body>
</html>

在这里插入图片描述

十一、link标签扩展学习

添加网址标题栏前的小图标

<link rel="icon" type="/image/x-icon" href="http://www.mobiletrain.org/favicon.ico">//添加网址标题前的小图标

在这里插入图片描述
link：引入外部资源文件
dns解析：把域名解析为IP地址，加快访问网站资源的速度

十二、meta标签扩展学习

meta 添加一些辅助信息

<meta name="description" content="巴拉巴拉">
<meta name="keywords" content="巴拉巴拉">
<meta name="renderer" content="webkit">//渲染双内核

功能信息

<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="refresh" content="3" url="">//刷新网页，三秒之后跳转到url网址
<meta http-equiv="expires" content="Wed,20 Jun 2019 22:33:00 GMT">

十三、HTML5新语义化标签

（都可以用div替换）

header：页眉
footer：页脚
main：主体
hgroup：标题组合
nav：导航
注：header、footer、main在一个网页中只能出现一次。

<body>
    <header>
        <hgroup>
            <h1>主标题</h1>
            <h2>副标题</h2>
        </hgroup>
        <nav>
            <ul>
                <li>首页</li>
                <li>论坛</li>
                <li>关于</li>
            </ul>
        </nav>
    </header>
    <main></main>
    <footer></footer>
</body>

article ：独立的内容
aside ：辅助信息的内容
section ：区域（替代div）
figure ：描述图像或视频
figcaption ：描述图像或视频的标题部分

<main>
        <article>
            <section>
                <ul>
                    <li>
                        <figure>
                            <img src="./img/youku1.jpg" alt="">
                            <figcaption>
                                山河锦绣·可歌可泣<br>
                                再现脱贫决战画卷
                            </figcaption>
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <img src="./img/youku2.jpg" alt="">
                            <figcaption>
                                时光💓撒糖不断<br>
                                社恐少女遇爱音乐男神
                            </figcaption>
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <img src="./img/youku3.jpg" alt="">
                            <figcaption>
                                老友餐厅😆超欢乐<br>
                                单身男女爆笑开饭店
                            </figcaption>
                        </figure>
                    </li>
                </ul>
            </section>
            <section></section>
            <section></section>
        </article>
        <aside></aside>
    </main>

在这里插入图片描述

datalist ：选项列表
details /summary : 文档细节/文档标题
progress /meter : 定义进度条/定义度量范围
time ：定义日期或时间
mark ：带有记号的文本

<datalist></datalist>

<body>
    <main>
        <article>
            <section>
                <input type="text" list="elems">
                <datalist id="elems">
                    <option value="a"></option>
                    <option value="ab"></option>
                    <option value="abc"></option>
                    <option value="apple"></option>
                    <option value="abbr"></option>
                    <option value="around"></option>
                </datalist>
            </section>
        </article>
    </main>
</body>

在这里插入图片描述
<details></details> /<summary></summary>

<body>
    <main>
        <article>
            <section>
                <details open> <!-- 默认情况下是闭合状态，加上open属性则默认是展开状态 -->
                    <summary>HTML</summary>
                    <p>超文本标记语言</p>
                </details>
            </section>
        </article>
    </main>
</body>

在这里插入图片描述
<progress></progress> /<meter></meter>

<body>
    <main>
        <article>
            <section>
                <progress min="0" max="10" value="5"></progress>
                <meter min="0" max="100" value="35" low="10" high="60"></meter>
            </section>
        </article>
    </main>
</body>

在这里插入图片描述

区别：
1、样式上的区别
2、progres表示进度（加载），meter表示测量
3、meter后面可以加low和high，若当前的值在low和high之间则是绿色，超过high值则是黄色

<time></time>

<p>今天是<time title="12-7">大雪</time>，天气很冷。</p>

<mark></mark>

<p>今天是<mark>大雪</mark>，天气很冷。</p>

flex弹性布局

两组成	两根轴	两根线
容器container	主轴main-axis	起始线main/cross-start
项目item	交叉轴cross-axis	结束线main/cross-end

在这里插入图片描述

能够比较方便的实现垂直居中
注意：设为 Flex 布局后，子元素的 float、clear 和 vertrical-align 属性都将失效。

作用在flex容器上	作用在flex子项上
flex-direction	order
flex-wrap	flex-grow
flex-flow	flex-shrink
justify-content	flex-basis
align-items	flex
align-content	align-self

    <style>
        #parent{width: 300px;height: 300px;border: 1px black solid;margin: 20px auto;display: flex;}
        #box{width: 100px;height: 80px;background: red;margin: auto;}
    </style>
</head>
<body>
    <div id="parent">
        <div id="box"></div>
    </div>
</body>

在这里插入图片描述

flex-direction

（要写在父容器上）用来控制子项整体布局方向，是从左往右还是从右往左，是从上到下还是从下往上

row

默认值，主轴为水平方向，起点在左端。

    <style>
        #box{width: 300px;height: 300px;border: 1px black solid;margin: 20px auto;display: flex;flex-direction: row;}
        #box div{width: 50px;height: 50px;color: white;line-height: 50px;text-align: center;background: red;}
    </style>
</head>
<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

在这里插入图片描述

row-reverse

主轴为水平方向，起点在右端。

#box{width: 300px;height: 300px;border: 1px black solid;margin: 20px auto;display: flex;flex-direction: row-reverse;}

在这里插入图片描述

column

主轴为垂直方向，起点在上端。

 #box{width: 300px;height: 300px;border: 1px black solid;margin: 20px auto;display: flex;flex-direction: column;}

在这里插入图片描述

column-reverse

主轴为垂直方向，起点在下端。

  #box{width: 300px;height: 300px;border: 1px black solid;margin: 20px auto;display: flex;flex-direction: column-reverse;}

在这里插入图片描述

flex-wrap

用来控制子项整体单行显示还是换行显示

nowrap

默认值，表示单行显示，不换行，压缩宽度
（不会立即溢出，当宽度达到最小值压缩不了时会溢出）

    <style>
        #box{width: 300px;height: 300px;border: 1px black solid;margin: 20px auto;display: flex;flex-wrap: nowrap;}
        #box1{width: 50px;height: 50px;background: red;}
        #box2{width: 50px;height: 50px;background: orange}
        #box3{width: 50px;height: 50px;background: yellow}
        #box4{width: 50px;height: 50px;background: green }
        #box5{width: 50px;height: 50px;background: blue}
        #box6{width: 50px;height: 50px;background: indigo}
        #box7{width: 50px;height: 50px;background: purple}
        #box8{width: 50px;height: 50px;background: pink}
    </style>
</head>
<body
<div id="box">
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
    <div id="box4"></div>
    <div id="box5"></div>
    <div id="box6"></div>
    <div id="box7"></div>
    <div id="box8"></div>
</div>
</body>

在这里插入图片描述

wrap

宽度不足，换行显示

  #box{width: 300px;height: 300px;border: 1px black solid;margin: 20px auto;display: flex;flex-wrap: wrap;}

在这里插入图片描述

wrap-reverse

宽度不足换行显示，但是是从下往上开始，也就是原本换行在下面的子项现在跑到上面。

 #box{width: 300px;height: 300px;border: 1px black solid;margin: 20px auto;display: flex;flex-wrap: wrap-reverse;}

在这里插入图片描述

flex-flow

flex-flow是flex-direction和flex-wrap的缩写，表示flex布局的flow流动特性。第一个值表示方向，第二个值表示换行，中间用空格隔开。默认值是 row nowrap。

flex-wrap: wrap-reverse;flex-direction: column;
flex-flow: wrap-reverse column;

justify-content

justify-content属性决定二零主轴方向上子项的对齐和分布方式

flex-start（默认值）：左对齐
flex-end：右对齐
center：居中对齐
space-between：两端对齐，项目之间的间隔都相等
space-around：每个项目两侧的间隔相等，最终边缘两侧的空白只有中间空白宽度一半
space-evenly：平均对齐，剩余空间平分

#box{display: flex;justify-content: flex-start;}
#box{display: flex;justify-content: flex-end;}
#box{display: flex;justify-content: center;}
#box{display: flex;justify-content: space-between;}
#box{display: flex;justify-content: space-around;}
#box{display: flex;justify-content: space-evenly;}

请添加图片描述

align-items

align-items中的items指的就是flex子项们，因此align-items指的就是flex子项们相对于flex容器在策州方向上的对齐方式。

stretch

默认值；如果项目未设置高度或设为auto，将占满整个容器的高度。

    <style>
        #box4{width: 300px;height: 300px;border: 1px black solid;margin: 20px auto;display: flex;justify-content: space-evenly;align-items: stretch;}
        #box4 div{width: 50px;background: grey;}
    </style> 
</head>
<body>
<div id="box4">
    <div id>测试文本</div>
    <div id>测试文本测试文本</div>
    <div id>测试文本测试文本测试文本</div>
</div>
</body>

在这里插入图片描述

flex-start

与容器顶部对齐

#box4{width: 300px;height: 300px;border: 1px black solid;margin: 20px auto;display: flex;justify-content: space-evenly;align-items: flex-start;}
#box4 div{width: 50px;background: grey;}

在这里插入图片描述

flex-end

与容器底部对齐

#box4{width: 300px;height: 300px;border: 1px black solid;margin: 20px auto;display: flex;justify-content: space-evenly;align-items: flex-end;}
#box4 div{width: 50px;background: grey;}

在这里插入图片描述

center

垂直居中对齐

#box4{width: 300px;height: 300px;border: 1px black solid;margin: 20px auto;display: flex;justify-content: space-evenly;flex-wrap: wrap;align-items: center;}
#box4 div{width: 50px;background: grey;}

在这里插入图片描述

align-content

align-content可以看成和justify-content是相似且对立的属性，如果所有flex子项只有一行，则align-content属性是没有任何效果的。

stretch

默认值；每一行flex子元素都等比例拉伸。例如，如果共两行flex子元素，则每一行拉伸高度是50%。

#box4{width: 300px;height: 300px;border: 1px black solid;margin: 20px auto;display: flex;justify-content: space-evenly;flex-wrap: wrap;align-items:flex-start;align-content: stretch;}
#box4 div{width: 50px;background: aquamarine;}

在这里插入图片描述

flex-start

与起始位置对齐。

#box4{width: 300px;height: 300px;border: 1px black solid;margin: 20px auto;display: flex;justify-content: space-evenly;flex-wrap: wrap;align-items:flex-start;align-content: flex-start;}
#box4 div{width: 50px;background: aquamarine;}

在这里插入图片描述

flex-end

与结束位置对齐。

#box4{width: 300px;height: 300px;border: 1px black solid;margin: 20px auto;display: flex;justify-content: space-evenly;flex-wrap: wrap;align-items:flex-start;align-content: flex-end;}
#box4 div{width: 50px;background: aquamarine;}

在这里插入图片描述

center

居中对齐。

#box4{width: 300px;height: 300px;border: 1px black solid;margin: 20px auto;display: flex;justify-content: space-evenly;flex-wrap: wrap;align-items:flex-start;align-content: center;}
#box4 div{width: 50px;background: aquamarine;}

在这里插入图片描述

space-between

与交叉轴两端对齐，轴线之间的间隔平均分布。

#box4{width: 300px;height: 300px;border: 1px black solid;margin: 20px auto;display: flex;justify-content: space-evenly;flex-wrap: wrap;align-items:flex-start;align-content:space-between;}
#box4 div{width: 50px;background: aquamarine;}

在这里插入图片描述

space-around

每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

#box4{width: 300px;height: 300px;border: 1px black solid;margin: 20px auto;display: flex;justify-content: space-evenly;flex-wrap: wrap;align-items:flex-start;align-content:space-around;}
 #box4 div{width: 50px;background: aquamarine;}

在这里插入图片描述

space-evenly

每一行元素都完全上下等分。

#box4{width: 300px;height: 300px;border: 1px black solid;margin: 20px auto;display: flex;justify-content: space-evenly;flex-wrap: wrap;align-items:flex-start;align-content:space-evenly;}
#box4 div{width: 50px;background: aquamarine;}

在这里插入图片描述

作用在flex子项上的CSS属性

order

定义项目的排列顺序。数值越小，排列越靠前，默认为0。

    <style>
        #box{width: 300px;height:300px;border: 1px black solid;margin: 20px auto;display: flex;}
        #box div{width: 70px;height: 70px;color: white;line-height: 50px;text-align: center;background: plum;}
        #box div:nth-child(2){order: 1;}
        #box div:nth-child(3){order: -1;}
    </style>
</head>
<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>

在这里插入图片描述

flex-grow

项目放大，默认为0；扩展的是flex子项所占据的宽度，扩展所侵占的空间就是除去元素外的剩余的空白间隙。

#box div:nth-child(2){background: grey;flex-grow: 1;}

在这里插入图片描述

flex-shrink

项目缩小，默认为1；flex-shrink主要处理当flex容器空间不足时候，单个元素的收缩比例。

#box2 div:nth-child(2){background: grey;flex-shrink: 0;}
/*如果为0，则该子项不收缩，按原定大小显示；剩下几个子项等比收缩*/
/*默认为1；则子项等比收缩*/
/*如果为2，则完全收缩尺寸比例分配为1:2:1:1:1:1，2子项收缩最大，是其他元素的2倍*/

在这里插入图片描述

flex-basis

指定在分配剩余空间之前元素的大小。（可以设为与width或height属性一样的值）

#box2 div:nth-child(2){background: grey; flex-basis: 100px;}

在这里插入图片描述

flex

属性是 flex-grow ， flex-shrink 和 flex-basis 的缩写。（默认值为 0 1 auto）
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

flex: none | auto | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

align-self

指控制单独某一个flex子项的垂直对齐方式，写在flex容器上的这个align-items属性，后面是items，表示全体；而 self 是个体。其他区别不大，语法几乎一样。

align-self: auto | flex-start | flex-end | center | baseline | stretch;

Flex案例

1、骰子的点数

2、两列固定，一列自适应

3、百度弹性导航

Grid网格布局

Grid布局是一个二维的布局方法，纵横两个方向总是同时存在

Grid-template-columns和grid-template-rows

对网格进行横纵划分，形成二维布局。单位可以是像素，百分比，自适应以及fr单位（网格剩余空间比例单位）。
有时候，我们网络的划分是很有规律的，如果需要添加多个纵横网格时，可以利用repeat（）语法进行简化操作。

Quyllu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Web112~125，184~197

HTML、CSS
复制链接

扫一扫