HTML的第一天

最新推荐文章于 2022-01-10 13:02:34 发布

森屿海岛

最新推荐文章于 2022-01-10 13:02:34 发布

阅读量123

点赞数

分类专栏： HTML和css3 文章标签： HTML5的第一天

本文链接：https://blog.csdn.net/qq_43551373/article/details/84036658

版权

HTML和css3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML5
1.Html5 是一个泛指： HTML5 +CSS3+JavaScript
文档的第一行的代码表示的是当前文档的类型（Html1.0---html5.0）
Html5 的文档类型： <!doctype Html>
2.Html5和html之间有什么区别？
(1)首先在文档类型的书写上不同，html5中新增了一些语义化的标签，以及表单属性和表单的类型，还包含有新的伪类，
伪元素选择器。
(2)简单,在书写上没有一定的要求eg：可以不写结束标签,但是不能太随意。
小拓展:
浏览器内核
浏览器最重要或者说核心的部分是“Rendering Engine”，可大概译为“渲染引擎”，不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释（如标准通用标记语言下的一个应用HTML、JavaScript）并渲染（显示）网页。所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。
作    用 :决定网页及页面格式信息
内核分类:Trident(IE内核),Gecko(Firefox内核),Presto(Opera前内核) (已废弃),
Webkit(Safari内核,Chrome内核原型,开源):它是苹果公司自己的内核，也是苹果的Safari浏览器使用的内核
3.常用的语义标签：<nav></nav>--------导航

                   <section></section>-------区块,相当于html中的主体
<header></header>-------页眉,相当于html中的头部
                   <footer></footer>----------页脚,相当于html中的尾部
                   <article></article>------<文章>
               <aside></aside>------<侧边栏>
               <figure></figure>------表示媒介内容分组,里面用来放置图像图表等
               <progress></progress>------进度条,包括value和max两个属性
4.表单的属性: patttern:正则表达式,用来验证表单
placeholder:占位符,用于表单的阴影提示
autofocus:用于获取焦点(可以自动聚焦在某一控件上)
muliple:多选
required:必填项
novalidate:关闭验证
autocomplete:规定输入字段是否应该启用自动完成功能其属性值(value)包括两个属性值:on(启用自动完成),off(禁止)
5.智能(数据)列表:


<datalist>
                   
   <option></option>-------通过option添加属性
                   
   <option></option>
</datalist>

6.多媒体:
添加多媒体的四种方法:(1)通过controls(是用来设置视频播放控件)控件添加
例如:<video src=”媒体链接” controls=”controls”>
(2)<video controls=”controls” poster=”给视频添加背景图片 ”loop=”loop” autoplay=”autoplay”>
(controls设置视频的控键,点击时播放,loop----设置视频循环播放 autoplay------设置视频自动播放)
(3)<auto autoplay=”autoplay”>
<source src=”video/....mp4(mp3)”></source>
</auto>
(4)<embed src=”video/...mp3(mp4)”></embed>这种方法最简单,不用添加其他播放控件.
7.css3选择器
例如有如下三个盒子
(1)属性选择器:
例如有如下三个盒子,利用属性选择器


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*属性选择器*/
			div[class]{
				width: 200px;
				height: 200px;
				border: 1px solid red;
			}
			/*通过属性选择*/
			div[id]{
				width: 200px;
				height: 200px;
				background: green;
			}
			/*通过属性值选择器进行选择元素*/
			div[class=div1]{
				width: 300px;
				border: 5px solid black;
			}
			/*该选择器表示的是: 属性class的值中包含有字符d的全部选中*/
			div[class*=d]{
				
				background: blue;
				
			}
			/*div[class^=i]{
				background: red;
			}*/
			/*设置id值中包含iv0 并且是以ivo开头的*/
			div[id^=iv0]{
				background: red;
			}
			/*设置class值中包含v1 并且是以v1结尾的*/
			div[class$=v1]{
				
				background: deeppink;
			}
		</style>
	</head>
	<body>
	   <div class="div1"></div>
           <div id="iv02"></div>
	   <div class="div3"></div>
	</body>
</html>

(2)伪类选择器
nth-child(2n):设置偶数元素属性
first-child:选择第一个子元素
nth-child(odd/even):odd 表示奇数even:表示偶数
target目标伪类选择器,结合锚点使用
before/after伪类(他们必须和content联合使用)

案例:首字下沉

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				font-family: 楷体 ;
				font-size: 30px;
				
			}
                             /*设置div内容首行的颜色*/

			div:first-line{
				color: blue;
			}
                           /*设置选中的区域的样式*/
			div::selection{
				color:rgba(68,68,68,0.2)
			}
                             /*设置文本块中首行文本的缩进*/
			div:first-child{
				text-indent: 0;
			}
			div:first-letter{
				font-size: 60px;
				color: red;
				float: left;
			}
		</style>
	</head>
	<body>
	</body>
	<div>
           滕王高阁临江渚，佩玉鸣鸾罢歌舞。<br/>
           画栋朝飞南浦云，珠帘暮卷西山雨。<br/>
           闲云潭影日悠悠，物换星移几度秋。<br/>
           阁中帝子今何在？槛外长江空自流。<br/>
	</div>
</html>

森屿海岛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML的第一天

HTML51.Html5 是一个泛指： HTML5 +CSS3+JavaScript文档的第一行的代码表示的是当前文档的类型（Html1.0---html5.0）Html5 的文档类型： &lt;!doctype Html&gt;2.Html5和html之间有什么区别？(1)首先在文档类型的书写上不同，html5中新增了一些语义化的标签，以及表单属性和表单的类型，还包含有新的伪类，伪...
复制链接

扫一扫