HTML+CSS第二部分_01(html进阶)
2024-07-04 12:08:31
文章目录
- （1）HTML与XHTML有啥区别？？？
- （2）strong和b、em和i标签的异同之处？？？
- （3）引用标签
- （4）iframe嵌套页面
- （5）br和wbr标签
- （6）pre和code标签
- （7）map与area标签
- （8）embed和object标签
- (9)video与audio标签
- (10)文字注释与文字方法
- （11）link标签的扩展（在head头部使用）
- （12）meta标签的扩展学习（在head头部使用）
- （13）html5新语义化标签
- 1
- 2
- 3
- （12）表格的扩展学习（css）
- （13）表单扩展--美化控件（css）
- （14）表单扩展
- 1、新的input控件（仍是给type属性赋值）
- 2、新的表单属性：
- 3、数据的传输：
- 4、扩展标签
- （15）BFC规范
- 1.介绍
- 2.触发BFC的条件
- 3 能解决的问题
- 4 怎么使用？？？？
- 5. 解决margin叠加问题：
（1）HTML与XHTML有啥区别？？？
DOCTYPE文档及编码不同元素大小写属性布尔值属性引号图片的alt属性单标签写法双标签闭合
（2）strong和b、em和i标签的异同之处？？？
相同之处：strong和b标签，表现形态都为文本加粗em和i标签，表现形态都为斜体不同之处：strong和em具有语义化b和i不具有语义化一般在后期都再用strong和em，很少用b和i标签的
（使用css当然也可以做到加粗和斜体）
（语义化？？？语义化就是对数据和信息进行处理,使得机器可以理解. 语义化的 HTML文档有助于提升你的网站对访客的易用性）
（3）引用标签
标明指出，会使html结构更具有语义化blockquote标签：引用大段的段落结束q标签：引用小段的短语解释abbr标签：缩写和首字母缩略词address标签：引用文档地址信息cite标签：引用著作的标题
<p>“死而后已”一句出自诸葛亮的《出师表》：<p> <blockquote>"凡是如是,难以逆见，臣鞠躬尽瘁，死而后已"</blockquote> </p></p><p><abbr title="世界卫生组织">WHO</abbr> 成立于1984年</p>
（4）iframe嵌套页面
Iframe元素会创建一个包含另一个文档的内联框架（即：行内框架）（一个页面可以嵌套多个，也可以嵌套一个）
把其他html网页嵌套到该网页的某一个位置
应用场景：数据传输、共享代码、局部刷新、第三方介入（广告）
（5）br和wbr标签
br标签标示换行操作wbr标签标示软换行操作
（浏览器对单词的识别是一空格为基础的，当某一行容不下了，不会再单词中间分开，会以空格为基础进行分开）如果单词较长，可以适当使用wbr
（6）pre和code标签
被pre标签包围的元素文本通常会保留空格和换行符。只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用code标签。
虽然code标签通常只是把文本变成等宽字体， 但它暗示着这段文本是源程序代码pre和code经常会结合使用：（把html的基本格式显示在浏览器上）
（7）map与area标签
定义一个客户端图像映射。图像映射(image-map) 指带有可点击区域的一幅图像。area元素永远嵌套在map元素内部。area元素可定义图像映
射中的区域。href属性定义区域的URLshape属性来定义区域的形状coords属性定义热区的坐标
（img标签定义usemap=”#名字”映射，map标签使用该映射name=”名字”）
（在图片上加入可点击的链接区域，area可以设置区域的形状（））
例：
<img src="../img/map-area.jpg" alt="这是一张图片" usemap="#star">
<map name="star">
//shape设置为矩形coords设置坐标href设置链接网址（对于矩形，设置两个点就可以//点的坐标是相对于图片的相对位置<area shape="rect"coords="0 0 150 150" href="http://www.taobao.com" >
//设置为圆，只要圆心位置和半径大小 300 300是坐标点50是半径<area shape="circ" coords="200 200 50" href="http://www.baidu.com" >
//多边形区域，多个点连起来的多边形，最后首尾会进行相连 -->
<area shape="poly"coords="点1坐标 点2坐标 点3坐标..." href="链接地址" >
</map>
（8）embed和object标签
embed和object都表示能够嵌入一些多媒体，如flash动画、插件等。基本使用没有太多区别，主要是为了兼容不同的浏览器而已注意： object要配合param标签进行使用
//ebed的使用
<embed src="文件位置" type="">//object的使用<object data="" type=""><param name="类型" value="文件位置"></object>
(9)video与audio标签
video：嵌入视频文件
audio: 嵌入音频文件
（默认都是不显示的，要通过controls属性来显示）
（为了支持多个备选文件的兼容性，可以配合source标签）
（播放结束后，默认是停止，加上loop可以设置循环播放）
（默认是不自动播放的，autoplay属性可以设置自动播放）
<video src="视频地址" loop controls ></video><audio src="音频地址" loop controls></audio><video ><source src="主方案音频"> //如果主方案有错误，就执行备选方案1<source src="备选方案1"><source src="备选方案2"></video>
(10)文字注释与文字方法
ruby标签：文字注释（中文注音或者字符）
rt标签：字符的解释和发音
ruby和rt一般两个标签是配合使用的
<ruby>涵<rt>hán</rt>发顺发顺丰第三方</ruby>
bdo标签可以覆盖默认的文字方向(给dir属性设置值)ltr值为从左到右rtl值为从右到左
<p><bdo dir="ltr">123456789</bdo></p><p> <bdo dir="rtl">123456789</bdo></p>
（11）link标签的扩展（在head头部使用）
在第一部分我们知道link标签可以引入外部的文件（主要为css样式文件）
扩展：
<!-- 引入外部的css文件 --><link rel="stylesheet" href="引入外部的css文件"><!-- 在标题栏引入图标(还要说明图片格式：x-icon、x-jpg、x-png) --><link rel="icon" type="/image/x-icon" href="图标地址"><!-- 引入网站资源 dns-prefentch表示为dns解析--><link rel="dns-prefentch" href="网站资源">
（12）meta标签的扩展学习（在head头部使用）
在head头部设置网页编码等，经常见meta标签
mata主要是定义一些辅助信息，主要做页面优化和渲染等一些功能，主要是功能性的不会把效果显示在页面当中.
<!-- 描述美团网的一些信息，不显示在网页上，主要给计算机看的， --><meta name="de strip tion'content=”大连美团网精选大连美食餐厅，酒店预订，电影票，旅游景点，外卖订餐，大连团购信息，您可查询商家评价店铺信息。大连生活， 下载美团官方APP， 吃喝玩乐1折起。"><!-- 网页的关键字，有利于搜索引擎的搜索 --><meta name="keywords" content="大连美食， 大连酒店， 大连团购"><!-- 设置搜索引擎的内核 --><meta name="renderer" content="webkit"><!-- ie浏览器使用更高的版本渲染 --><meta http-equiv="X-UA-Compatible" content="ie=edge" ><!-- 每3秒进行刷新一次 --><meta http-equiv='refresh'content="3" ><!-- 在设定的时间，网页内容进行缓存 --><meta http-equi="expires" content="Wed 20Jun 201922：33：00GMT">
（13）html5新语义化标签
1
header 页眉
footer 页脚
main 主体
hgroup 标题组合
nav 导航
这些标签的功能完全可以用div实现，但用div实现没有语义化,
用这些标签使计算机知道什么地方是是网页的什么位置，更有语义化
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><header>页眉<hgroup><h1>主标题</h1><h2>副标题</h2></hgroup><nav>导航</nav>
</header><main>主体大部分内容都在这里面写
</main><footer>页脚</footer>
</body>
</html>
注：像header、footer、main一般在网页中只能出现一次
2
article 独立的内容aside 辅助信息的内容section 区域（和div相似）figure 描述图像或视频（在图片下面的一段文字）figcaption 描述图像或视频的标题部分
3
datalist 选项列表（输入框的list和该标签的id）details/summary 文档细节/文档标题（默认是闭合状态加open改变默认值）progress/meter 定义进度条/定义度量范围time 定义日期或时间mark 带有记号的文本
<input type="text" list="elems"><datalist id="elems"><option value="张三"></option><option value="李四"></option><option value="王五"></option><option value="赵六"></option></datalist>
<details><!-- 文档标题 --><summary>Html</summary><!-- 细节 --><p>是超文本标记语言</p><p>是用于创建网页的标准标记语言</p></details>
在details标签上加open可以改变为默认为打开状态
<!-- 进度条：进度的最小0,,最大10，当前8 --><progress min="0" max="10" value="8"></progress><!-- 度量条 --><meter min="0" max="100" value="35">zzzz</meter>
可以设置两个值low和hing的大小，value低于或者超过会有颜色变化
<p>今天是<time title="2-14">情人节</time>，街上人很多</p>
就是一个语义化，没有任何效果
<p>今天是<mark>情人节</mark>，街上人很多</p>
这些语义化标签虽然完全可以被div代替，
但他们每个标签都有每个标签的语义化，
对搜索引擎很有帮助，有利于力高访问量
（12）表格的扩展学习（css）
在第一部分已经学过table，tr，th，td等标签以及一些属性
表格的扩展：（css中的属性）添加单线 border-collapse属性：选择collapse隐藏空单元 empty-cells属性：选择hide（不会显示表格，及其边框）斜线分类 border或者rotate都可以（一个单元格内的斜线）列分组 colgroup或者col都可以（span属性写列的位置）
（13）表单扩展–美化控件（css）
在第一部分我们学过from，input，textarea，select，option，label等标签以及好多属性美化表单控件：1： label标签+checked 伪类 2： position（定位）+opacity（透明度）label标签+checked 伪类
定位+透明度
（14）表单扩展
1、新的input控件（仍是给type属性赋值）
email： 电子邮件地址输入框（里面有自带的邮箱规则）url： 网址输入框number：数值输入框range： 滑动条（可以控制最小值min最大值max当前值value）date或者month或者week：日期控件search：搜索框color： 颜色控件tel： 电话号码输入框(移动端会调起数字键盘）time： 时间控件
2、新的表单属性：
autocomplete： 自动完成（自动提示以前输入过的内容，加name属性）默认是有提示的（on）可以off关闭autofocus：获取焦点（光标自动在输入栏上）默认是关闭的可以通过off开启required：内容不能为空pattern：正则验证（要符合自己根据正则表达式规定的输入格式）
3、数据的传输：
如何把表单中选着的内容提交到后台？？？action：定义传输的位置method:定义传输的方式GET方式POST方式enctype:数据传输的类型width=device-width,inital-scale=1.0 字符串类型multipart/form-data 文件name:传入的数据的键（在传入的数据中都是以键（name）值（value）对形式存在，方面查询）
4、扩展标签
fieldset： 表单内元素分组
legend： 为fieldset元素定义标题
opt group：定义选项组
<fieldset><legend>登录</legend><p>用户名 <input type="text"></p><p>密码 <input type="password"></p>
</fieldset>
<select name="" id=""><optgroup label="水果"></optgroup><option value="">苹果</option><option value="">香蕉</option><option value="">猕猴桃</option><optgroup label="蔬菜"></optgroup><option value="">黄瓜</option><option value="">白菜</option><option value="">茄子</option></select>
（15）BFC规范
1.介绍
FC即Formatting context(格式化上下文) 是W3CCSS 2.1规范中的一个概念。
它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。BFC即Block Formatting Contexts(块级格式化上下文)，它属于上述（FC）中的其中一种规范。具有BFC特性的元素可以看作是隔离了的独立容器， 容器里面的元素不会在布局上影响到容器外面的元素， 并且BFC具有普通容器所没有的一些特性。还有IFC（内联级格式化上下文）
2.触发BFC的条件
浮动元素： float除none以外的值
绝对定位元素：position(absolute、fixed)
显示框类型（display）为inline-block、table-cells、flex
overflow（溢出隐藏）除了visible以外的值(hidden、auto、scroll）
3 能解决的问题
解决margin叠加问题
解决margin传递问题
解决浮动问题
解决覆盖问题
4 怎么使用？？？？
在最外层的容器或者在外层在加个容器上加上可以触发BFC的一个条件，就会使该其成为一个独立的容器有触发BFC条件的语句，可以认为整体是一个不会影响外界的容器容器里面的元素不会在布局上影响到容器外面的元素
（就相当于整个容器大小以及位置是固定的（包括外边框），内部的元素怎么折腾都不会改变外面容器的大小，该容器也不会影响其他容器的布局）
5. 解决margin叠加问题：
<!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>/* 这俩容器之间的间距不会叠加，只会去最大的一个 ------产生了叠加问题*/.div1{width: 100px;height: 100px;background-color: red;margin-bottom: 30px;}.div2{width: 100px;height: 100px;background-color: blue;margin-top: 20px;}/* 方法1：把间距要么全设置在上容器的下边框，要么把间距全设置在下面容器的上边框 *//* 方法2：使用BFC规范 */
//为了更好地看到给BFC容器加了一个边框.box{overflow: hidden;border: 2px black solid;}</style>
</head>
<body><!-- 解决margin叠加问题 --><div class="div1"></div><div class="div2"></div><!-- 使用BFC解决 --><!-- 相当于在最外层加了一个BFC容器，自己的外层边距等里面元素不会影响其他容器 --><div class="box"><div class="div1"></div></div><div class="div2"></div>
</body>
</html>
解决margin传递问题
<!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>.div1{width: 300px;height: 300px;background-color: red;}.div2{width: 100px;height: 100px;background-color: blue;margin-top: 100px;}#box{overflow: hidden}</style>
</head>
<body><!-- 会发现，里面容器加上margin-top: 100px会把外面的容器带下来 --><div class="div1" ><div class="div2"></div></div><!-- 在最外层的容器触发BFC时其大小和位置固定，不受里面元素的影响 --><div class="div1" id="box"><div class="div2"></div></div>
</body>
</html>
经常左侧固定大小，右侧自适应大小（利用浮动做到左右排列）
在左侧的上加上BFC边框就可以做到左侧固定大小，右侧自适应大小
HTML+CSS第二部分_01(html进阶)相关推荐
- 第二部分：Spark进阶篇
第一部分:Spark基础篇_奔跑者-辉的博客-CSDN博客 第二部分:Spark进阶篇_奔跑者-辉的博客-CSDN博客 第三部分:Spark调优篇_奔跑者-辉的博客-CSDN博客 目录 1 Spark ...
- CSS transition delay简介与进阶应用
背景 在日常的项目开发中,我们会很经常的遇见如下的需求: 在浏览器页面中,当鼠标移动到某个部分后,另一个部分在延迟若干时间后出现 在鼠标移除该区域后,另一部分也在延迟若干时间后消失 我相信这是一个很常 ...
- 前端之CSS第二部分属性相关
CSS属性相关操作 宽和高 width可以设置宽 height可以设置高 块儿级标签可以设置宽高,行内标签不能设置宽高 字体属性 font-family可以把多个字体名称作为一个"回退&qu ...
- 潭州课堂25班：Ph201805201 WEB 之 CSS 第二课 (课堂笔记)
CSS 的引入方法: 第一种 : <!--直接在标签仙设置--><p style="color: yellow">CSS的第一种引入方法</p> ...
- css星空动画,【css3进阶】less实现星空动画
效果动图如下: 预览链接和代码在我的codepen:https://codepen.io/lio-mengxiang/pen/YzKrEde 知识点预览 这篇文章的less技巧 + css技巧知识点包 ...
- 【web前端】CSS第二天
CSS的第二天,这次之后大概又要过个好几天才能完成下一个知识的学习了,要准备考试了,好了,使用课程是黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程_哔 ...
- css 第二行换行,CSS换行详解
普通文本段落的换行 案例说明:在实际应用中我们常遇到这样的问题,就是一段文本,有了明确的宽度,需要文本自动换行.(如下图) 案例分析:上面两个图,没有使用任何排版的CSS属性,也就是默认情况下,块元素 ...
- css 第二个孩子选择器,详解CSS3选择器:nth-child和:nth-of-type之间的差异
先看一个简单的实例,首先是HTML部分: 我是第1个p标签 我是第2个p标签 然后两个选择器相对应的CSS代码如下: p:nth-child(2) { color: red; } p:nth-of-t ...
- HTML+CSS(第二天)
表格(现在已经不使用表格进行布局,多用来处理和显示表格数据) 基本语法(表格中没有列的概念,只有行tr和单元格td) <!DOCTYPE html> <html> <he ...
最新文章
- Spring如何加载XSD文件(org.xml.sax.SAXParseException: Failed to read schema document错误的解决方法)...
- html5中加入音频,使用HTML5在网页中嵌入音频和视频播放的基本方法
- kylin调优，项目中错误总结，知识点总结，kylin jdbc driver + 数据库连接池druid + Mybatis项目中的整合，shell脚本执行kylin restapi 案例
- 5W字高质量java并发系列详解教程(上)-附PDF下载
- React学习：生命周期、过滤器、event、axios-学习笔记
- Linux系统安装Appach 2.4.6
- Spring Boot : Spring Boot Slf4j 以及 log4j 以及门面日志
- 麦马计算机科学 UBC工程,2020年UBC文书题目
- java异常处理和自定义异常利用try和catch让程序继续下去(回来自己再写个例子试运行下)...
- Java经典设计模式（2）：七大结构型模式（附实例和详解）
- mysql做主从分离后插入更新过慢
- head first 设计模式 java_吐血整理：Head First设计模式大全
- 树莓派4B安装WPS步骤及缺失字体问题
- 公司企业邮箱登陆客户端，邮件服务器如何设置？
- Python的len函数探究
- 关于Windows的window
- 新浪微博用户密码泄露 经部分用户验证为真
- 什么是MyCat？原理是啥？
- 您的企业已经准备好使用专线了吗？——Vecloud
- 培养好习惯是很难，但也有好方法