1、 一套规则,浏览器认识的规则。
2、 在html里的注释:<–! 注释的内容 –>
3、 只能有一个html标签、head标签、body标签
4、 在head标签里写的所有标签内容是看不见的,除了title标签
head里的标签:
标题:
标题旁边的图标
:shortcut icon是固定内容,这样就表示设置图标 :stylesheet表示要设置css编码:
用于定义编码
刷新:
默认3秒钟刷新一次页面
跳转:
默认3秒钟跳转到百度
所以这里的meta有主要的两个功能就是刷新和跳转
关键字:
描述:
兼容IE:
5、 标签分类:
自闭和标签:meta标签
主动闭合标签
6、 body标签
特殊的符号:
 空格,>,<
p标签:表示段落,默认段落之间是有间隔的
br:换行
H标签:标题,从H1-H6,效果:
span标签:空白标签
效果:
关于标签的小总结:
所有标签分为:
块级标签:h标签(加大加粗)、p标签(段落和段落有间距),div标签(白板)
行内标签(内联标签):span标签(白板)、a标签
div标签
标签之间可以嵌套
标签存在的意义:定位操作、js、css操作
input系列
:name属性,value可以设置默认值
:name属性,value可以设置默认值
单选框
单选框 value,name属性(name相同则互斥)checked=”checked”表示默认值
html代码例子:
请选择性别
男:
女:
复选框
:复选框value, checked=”checked”,name属性(批量获取数据)
html代码例子:
爱好
足球:
篮球:
乒乓球:
网球:
上传文件与重置
上传文件
:依赖form表单的一个属性:enctype=”multipart/form-data”
大输入框textarea
select标签(下来框)
name,内部option value提交到后台
select=”selected”表示默认选择
代码例子:
<select name="city">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3" selected="selected">南</option>
<option value="4">成都</option>
<option value="5">重庆</option>
</select>
上述只能单选
下面方式实现多选,代码例子:
size用于显示多个,multiple用于多选
<select name="city" size="10" multiple="multiple">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3" selected="selected">南京</option>
<option value="4">成都</option>
<option value="5">重庆</option>
</select>
a标签:
跳转:
百度这种默认情况下是在当前标签打开此网页,如果改为如下:
百度这样就会在一个新的标签打开网页
锚:实现点击目录跳转到相应的内容,实现的方式是通过给标签设置不同的id,然后在a标签的href属性设置#id
关于锚的一个实现例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<a href="#i3">第三章</a>
<a href="#i4">第四章</a>
<div id="i1" style="height: 600px">第一章的内容</div>
<div id="i2" style="height: 600px">第二章的内容</div>
<div id="i3" style="height: 600px">第三章的内容</div>
<div id="i4" style="height: 600px">第四章的内容</div>
</body>
</html>
实现的效果就是通过点击相应的章节目录跳转到相应的内容
img标签
就可以实现在页面上显示图片
如果想要实现点击图片跳转,通过a标签实现:
如果图片不存在了,在图片位置显示文字,通过alt参数实现:
效果如下:
如果想要鼠标放在图片上显示内容,通过title参数实现:
列表标签
- 苹果
- 三星
- 诺基亚
效果图如下:
- 香蕉
- 苹果
- 桃子
效果图如下:
- 水果
- 苹果
- 香蕉
- 梨
- 蔬菜
- 白菜
- 萝卜
- 西红柿
实现的效果:
表格标签
代码例子:
<table border="1">
<tr>
<td>主机名</td>
<td>端口</td>
<td>操作</td>
</tr>
<tr>
<td>192.168.1.1</td>
<td>80</td>
<td>添加</td>
</tr>
<tr>
<td>192.168.1.2</td>
<td>81</td>
<td>添加</td>
</tr>
</table>
实现效果:
但是上面的表格不是特别规范,下面是规范的表格写法:
<table border="1">
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
<th>表头4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tbody>
</table>
这里的thead 专门用于写表头,th用于写表头中的具体信息
列表里的合并单元格:
通过colspan=”2″参数实现横向合并
通过rowspan=”2″实现纵向合并
label标签
通过和input标签搭配使用
代码例子:
打开的效果图:
鼠标点击用户名输入框会自动获取光标
fieldset标签
<fieldset>
<legend>登录</legend>
<label for="username">用户名</label>
<input id="username" type="text" name="user" />
<p></p>
<label for="password">密码</label>
<input id="password" type="password" name="pwd" />
</fieldset>
实现的效果:
7、 CSS
- 在标签属性上设置style样式
- id选择器。写在head里面,style标签中写样式
id选择器例子:
<style>
#i1 {
background-color: chartreuse;
height: 100px;
}
style>
然后在下面标签中通过id调用这个style就可以了
- class选择器。同样是写在head里,style标签中写样式,但是这次不通过id,下面是例子:(这种方式是用的最多的)
<style>
.c1 {
background-color: aqua;
height: 100px;
}
<style>
这种方式下面的标签在调用的时候是通过class调用
- 标签选择器
<style>
div {
background-color: black;
color: aliceblue;}
<style>
这样的效果就是所有的div标签都会应用上面的这个样式
- 层级选择器,通过空格分隔 例子:
<style>
span div {
background-color: black;
color: aliceblue;
}
<style>
这样span标签下的div标签就会应用上面的这个样式
- 组合选择器,通过逗号分隔
<style>
#i1,#i2,#i3,.c1 {
background-color: chartreuse;
color: red;
}
<style>
这样id=i1,i2,i3以及class=c1的都会应用上面的样式
- 属性选择器,对选择到的标签,再通过属性进行一次筛选
<style>
input[type="text"]{
width: 100px;
height: 200px;
}
<style>
这样就会找到input标签并且type=“text”的应用上面的样式
8、 css优先级
标签上style优先,编写顺序,就近原则
从上到下下面的优先级最高
我们可以将css文件写入到一个文件,然后让其他都能用
调用的方式:
在head里写如下代码:
设置边框
设置宽度的百分比
text-align: center; 用于设置水平居中
line-height: 100px”>aaaa