HTML5的特点是语义与实现分离;原来是<div class=""></div>,然后样式用类选择器设置;现在是不用<div>了,而用比如<header></header>等等,然后样式不用类选择器,而是元素选择器;
<meta charset="utf-8">指定编码格式,防止在不同浏览器中打开乱码;
<meta name="viewport" content="width=device-width, initial-scale=1.0">作用是能够自适应屏幕尺寸,不至于难看;
在<head></head>中必须要有<title></title>标签;
<style></style>为HTML文档定义样式信息;它的属性之一是type(指定样式的类型),它的是目前是固定的即type="text/css";
../ 表示上一个文件夹;
给整个网页设置一个背景色:
<body>
background-image: url("../img/logo.jpg")
</body>
给段落设置首行缩进的样式:text-indent:32px; 一般是32个像素;
一个HTML文档可以有很多的<style></style>标签 例如<style type="text/css"></style>, <style media="print"></style>(表示只针对打印模式时候的样式)
网页的样式除了可以在style元素中添加,也可以将css样式表保存为一个外部文件,然后使用link元素将其链接起来(即链接外部样式表);
<link rel="stylesheet" type="text/css" href="style.css"> 其中rel是link元素必须要有的属性,rel="stylesheet"表示链接外部样式表, type是指类型, href表示外部样式表的位置;
<link rel="stylesheet" type="text/css" media="screen" href="style.css">表示外部链接网页背景图片的样式表;
<script></script>标签用于在HTML文档中嵌入脚本(例如:JavaScript)
一般HTML文档执行中遇到<script>的话会先获取脚本,然后执行脚本,等脚本执行完之后再继续HTML文档,若想延迟执行脚本,则用defer属性;
<script type="text/script" src="1.js" defer></script>
注释:
HTML文档注释也是用标签来写 <!-- 注释的内容-->
CSS的注释 /* 注释的内容*/
JavaScript的注释分为单行和多行 单行://注释的内容 多行:/*注释的内容*/
<img src=""> <script src="">
<link href=""> <a href="">
块元素总是从新的一行开始,占据一行,例如p元素,div元素;行内元素则不会占据一行,例如span元素,a元素;
块级元素既可以包含块元素也可以包含行内元素, 而行内元素只能包含行内元素或者数据啥的;
链接外部样式写表格的边框样式:
table{
border:1px solid black; /*注意1px solid black之际没有逗号,用空格隔开就行*/
}
表单是HTML中获取用户输入的手段;制作表单的三个元素:form,input, button;提交表单的方法有两个:get和post;
表单:
<form action="http://baidu.com" method="post"> <!--form的method属性有 两个:get和post,都会提交表单,但是post更安全些,不会将个人信息提交给url,即在url中不会暴露自己账户和密码-->
</form>
type="text"是明文的,写什么就显示什么,而type="password"是不会显示所敲的;
在链接<a></a>中href属性是跳转网页的URL, target属性中"_blank"表示在一个新的网页中打开目标网页,而不是在本地网页中打开;
表单中input的type属性有22种,常见的有 text, submit, password, date, time, week, month, datetime-local, radio, checkbox(多选框),color, hidden, image;
input只能用于单行文本的输入,textarea可以用于多行文本的输入;
接收用户输入用input元素,下拉列表用select元素;
图像根据屏幕大小进行调整时引入了picture元素和source元素
<picture>
<source media="(min-width:1024px)" srcset="1.jpg">
<source media="(min-width:512px)" srcset="2.jpg">
<img src="3.jpg" alt="不满足上面的屏幕大小时就用这个" style="width:auto">
</picture>
给图片下面有个图题用figure元素和figcaption
<figure>
<img src="" alt="">
<figcaption>图的题目</figcaption>
</figure>
用<video width="" height="" src="lalala.mp4" controls autoplay loop>视频无法播放时显示的文本</video>能插入视频播放;
audio元素是插入音频,即一段音乐;类似于video元素,controls autoplay loop是三个属性 即插入控件,自动播放,循环播放;
在一个网页中嵌入另一个网页就用
<iframe src="" width="" height="">无法嵌入时的说的话</iframe>
一个HTML文档就是一个网页,所以在HTML的头部加入style标签设置样式(内部样式表),一个内部样式表只能影响一个网页,当有不止一个网页的时候,内部样式表就有所欠缺;
类选择器 .X {} id选择器 #X{} 注意:类选择器的.和X之间是不能有空格的,同理id选择器也是;
伪元素选择器: 最前面是两个“:”,即 ::
::first-line{ }选择器仅对块级元素内的第一行元素有效,而对于像a元素这类行内元素是不起作用的; 其中可以在::的前面加元素,例如 p::first-line{};
::before{
content:"huhuhh"
}
::after{
content:url("ccc.jpg")
}
伪类选择器:最前面是一个“:”,例如 :hover
CSS3区分是伪元素选择器还是伪类选择器是看有几个 :
动态伪类选择器 :link :visited :hover :active
<style>
a:link{ a:link{} 是链接未被访问的时候
color:pink;
}
a:visited{ a:visited{}是链接已经被访问过的时候
color:red;
}
a:hover{ a:hover{}是鼠标悬浮在链接上的时候
color:black;
}
a:active{ a:active{}是链接被点击的那一刻
color:green;
}
</style>
这四个伪类选择器是由先后顺序的,顺序对了样式才能生效;记住:LoVe & HAte
UI伪类选择器是负责用户和系统交互的;一般web的表单元素经常会用UI伪类选择器,
表单中设置必选和可选的样式,即requireed和optional
<style>
:required{
outline:3px solid red;
}
</style>
<body>
<form>
<label for="required">必填:</label>
<input type="text" name="required" required>
</form>
</body>