web标准的构成:
结构:html用于描述页面的结构
表现:css用于控制页面中的元素样式
行为:Javascript用于响应用户的操作
html简介:
HyperText Markup Language超文本标记语言, 是一种标记语言,而不是编程语言,它是制作网页的基础语言,主要用于描述超文本中内容的显示方式,它不需要编译,可以直接由浏览器执行。
html基础结构:
<!DOCTYPE html>
<html>
<head>
<meta content="utf-8"/>
<title></title>
</head>
<body>
</body>
</html>
!DOCTYPE 声明文档类型
!DOCTYPE html 声明html5
html是双标签 页面根元素
head文档的开头部分 里边包含文档标题 字符编码 link style scrip meta
utf-8国际通用字符编码 gb-2312简体中文
body主体内容
标签
p段落标签
语法:<p></p>
属性:align 水平对齐
left 默认 居左
center 居中
right 居右
hn标题标签 n是1-6
语法:<hn></hn>
属性:align 水平对齐
left 默认 居左
center 居中
right 居右
特点:自带加粗 数字越大文字越小 h1最大 h6最小
无序列表
语法:
<ul>
<li></li>
</ul>
属性:type规定列表项的项目符号
disc 默认值 实心小圆点
circle 空心小圆圈
square 实心小方块
none 没有
特点:列表项没有先后顺序
有序列表
语法:
<ol>
<li></li>
</ol>
属性:type规定列表项的项目符号
1 默认
a或A
i或I
start起始值 只能是数值
reversed倒序 不兼容
特点:列表项有先后顺序
定义列表
语法:
<dl>
<dt></dt>
<dd></dd>
</dl>
特点:dt和dd是并列关系 dt只能由一个 dd可以有多个
img图片标签
语法:<img />
属性:src图片路径
相对路径
绝对路径
alt图片无法加载是提示的文字
title鼠标放在图片上显示的提示文字
border 图片的边框
width 图片的宽度
height 图片的高度
align
a标签
语法:<a></a>
属性:href目标跳转的路径
内部链接(相对路径)
外部链接(绝对路径)
target链接目标的打开方式
_self 默认值 在当前窗口打开
_blank 在新窗口打开
空连接:
<a href="#"></a>或<a href=""></a>
锚链接:
<a name="锚点名"></a>
<a href="#锚点名"></a>
或
<a id="锚点名"></a>
<a href="#锚点名"></a>
邮件链接:
<a href="mailto:xxx"></a>
图片链接:
<a href="">
<img src=""/>
</a>
或
<a href="图片路径"></a>
下载链接:
<a href="" download="下载文件路径"></a>
hr标签
语法:<hr />
属性:width设置宽度
px
%
color 设置颜色
十六进制
英文单词
rgb()
size设置粗细
1-7 7最大 1最小
align设置水平对齐
left 居左
center 默认值 居中
right 居右
font标签
语法:<font></font>
属性:size设置字体大小
1-7
color 设置颜色
十六进制
英文单词
rgb()
face(family)设置字体
字体名字
br标签
语法:<br />
i标签
语法:<i></i>
特点:倾斜
u标签
语法:<u></u>
特点:下划线标签
b标签
加粗标签
语法:<b></b>
strong强调
表现为加粗样式
语法:<strong></strong>
em强调
表现为倾斜样式
语法<em></em>
span 内联标签 用于布局
语法:<span></span>
div 块级标签 用于布局
语法:<div></div>
特点:可以嵌套任意元素(标签)
table表格
语法:
<table>
<tr>
<th></th>
</tr>
<tr>
<td></td>
</tr>
</table>
table标签
属性:border设置表格的边框
px
width设置表格的宽度
px
%
height设置表格的高度
px
align 设置表格的水平对齐
left
center
right
bgcolor 设置表格的背景颜色
颜色值
cellpadding 设置内容与单元格之间的距离 边距
cellspacing 设置单元格与单元格之间的距离 间距
tr标签 表格的行
属性:height设置行的高度
px
%
bgcolor 设置行的背景颜色
align 水平对齐
left
center
right
valign 垂直对齐
top
middle
bottom
td/th标签 表格的单元格/标题单元格
属性:bgcolor 设置背景颜色
颜色值
width 设置单元格的宽度
height 设置单元格的高度
align 水平对齐
valign 垂直对齐
rowspan 跨行合并 在下一行删除
colspan 跨列合并 在当前行删除
caption标签 表格的标题
语法:<caption></caption>
细线表格的制作:
设置表格的背景色
设置行的背景色
设置单元格间距为1px
form表单标签
语法:<form></form>
属性:action数据提交的地址
method 提交方式
get 默认值 提交到当前页面 少量数据
post 提交到服务器 大量数据
name 表单名字(实现交互)
target 打开方式
input单行文本输入框
语法:<input />
属性:type控制输入框输入类型
text 文本输入框
password 密码输入框
radio 单选框 name属性值相同
checkbox 复选框
email 邮箱
color 颜色块
date 日期
reset 重置按钮
button 普通按钮
submit 提交按钮
image 图片提交按钮 配合src属性使用
number 数值 max限制最大上限 min限制最小值 value初始值 step步数
file 文本域
value 改变按钮的默认文字
name 名字
placeholder 输入框提示的文字
checked 默认选择
textarea 多行文本输入域
语法:<texterea></texterea>
属性:name
rows 文本域的行数 相当于高度
cols 文本域的列数 相当于宽度
maxlength 设置文本域的最大字数
select下拉列表
语法:
<select name="">
<option value=""></option>
</select>
属性:name 名字
size 展示列表项的多少
selected 默认选项
fieldset 分组表单
legend 分组名称
label 没有任何效果
主要配合input使用
<label>男</label>
属性:for的值 与相关input里的id的值相同