一、HTML
1、html结构
html的结构如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
文档内容......
</body>
</html>
2、html语法
<标签名 属性名=”值”>内容</标签名>
3、表格及合并单元格
<table>表格标签
<tr>行标签
<td>单元格
<th>头行单元格,会加粗居中
<caption>表格标题
合并单元格属性:colspan合并列,rowspan合并行
4、图片标签
<img src="图片路径" alt="提示信息" />
src可以使用绝对路径、相对路径
注意:“./ ”当前路径,“../”上一级路径
5、超链接
<a href="链接地址,需要写协议名" target="在何处打开 ">
6、换行、空格
<br/>换行
空格
7、表单元素
表单标签:<form action="提交地址" method="提交方式"> 提交方式:get(默认,不安全)、post(安全)
文本框 type=”text”
密码框 type=”password”
单选框 type=”radio” 需要设置相同的name,将各选项关联
复选框 type=” checkbox”
附件框 type=”file”
重置按钮 type=”reset”
提交按钮 type=”submit”
下拉列表 <select> <option>
文本域 <textarea rows="行数" cols="列数">
隐藏域 type="hidden"
8、div、sapan
均会换行,相当于是容器
div:块级标签
span:行内标签,值占据包裹内容长度
三、CSS
1、css注释: /* */
2、css写在标签内(不推荐)
<标签名 style=”样式属性1:属性值;样式属性2:属性值;”>源代码教育</标签名>
3、css写在style标签内
<head>
<style type=”text/css”>
选择器名{
样式属性名1:样式属性值;
样式属性名2:样式属性值;
…….
}
</style>
</head>
通过选择器找到标签,对其设置样式。
通用选择器:可以选择到所有的标签元素
*{
样式
}
标签选择器:可以找到所有该标签名元素
标签名{
样式
}
类选择器:可以找到所有设置了该class属性名的元素
.class属性值{
样式
}
id选择器:可以找到所有设置了该id属性名的元素,不推荐使用,为了保持每个 标签的唯一性,所以取值应当唯一
#id值{
样式
}
4、css外部引入
外部引入的方式即为单独建立一个CSS文件,然后将这个CSS文件与需要样式的网页关联起来
<link rel="stylesheet" href="CSS路径" >