第一章
1.编写html
•1.x新建一个记事本《以.html结尾》
•2右击选择打开方式为文档
•3.编写内容
•4.有浏览器查看内容
2 html
<html>
<head></head>
<body> 内容</body>
</html>
3 .html的打开方式
•1用浏览器打开
•2用文本编辑器《编辑方式》
4 .网页标签<title></title>
5.meta标签
<meta charset="utf-8"/>设置网页的字符编码
<meta name="keywords"content="内容"/> 关键词
<meta name="description"="内容"/>网页描述
6.<h1></h1>到<h6></h6>标题
7.<p> xx</p>段落标签
8.xx<br/>换行标签
9.<hr/>水平线标签
10.<strong>XX</strong>加粗 <em>XX</em>斜体
11.注释和特殊符号
空格 大于号> 小于号< 引号" ; 版本符号©
12.图像标签
<img src="图像地址" alt="当前找不到时的提示文字" title=" 当鼠标放在图片上显示的文字" width="图片宽度" height="图片高度"/>
13.链接标签
1.<a href="文件位置" target="目标窗口位置">名字</a>
2.跳转锚链接 <a name="xx">xxx</a> <a href="#xx">返回xxx</a>
3.功能性链接 例：<a href="mailto:邮箱地址”></a>
第二章
列表：无序列表
<ul>
<li>xxx</li>
<li>xxxx</li>
</ul>
有序列表
<ol>
<li>xxx</li>
<li>xx</li>
</ol>
定义列表
<dl>
<dt>xx</dt>
<dt>xx</dt>
</dl>
表格
<table boder="1px"></table><!--table表格字符--><!--boder表格边框和大小>
<table>
<tr>
<td>1-1</td>
<td>1-2</td>
</tr>
</table><!--tr行--><!--td列-->
<!--colspand当前单元格所占的列数--><td colspan="2">1-1</td>
<!--lowspan当前单元格所占的行数--><td lowspan="2">1-1</td>
视频
<video controls outoplay>
<source src="xx" type="video/mp4"></source>
音频
<audio>
<source src="xx" type="audio/map3"></source>
<source sr="xx" type="audio/ogg"></source>
</audio>
结构化元素
<header>网页头部</header>
<footer>尾部</footer>
<section>网页的独立区域</section>
<article>表示文章
<aside>表示相关内容或应用即侧边栏
<nav>导航
网页结构
<header></header>头部
<section></section>主体
<footer></footer>尾部
iframe内联框架
语法：<iframe src="页面结构" name"xx/>
实现内联：1定义iframe <iframe src="xx name"xx/> </iframe>
2定义超链接并指定超链接内容要放置的地方由target指定
<a href="xx" target="xx">xx</a>
第三章 表单
1.语法
<form method="get|post" action="数据向哪提交的地址">
//表单内容
</form>
2.input 标签常用属性
<input name="标签名" type="标签类型" value="标签默认值"/>
size:输入文本框的字符的长度
maxlength:文本框的宽度
checked: 单选框和复选框的默认选中.
selected: 下拉框的默认选中
3.常用标签
text //文本框
password //密码框
radio //单选按钮
checkbox //复选框
button //按钮
submit //提交按钮
reset //重置按钮
url //只能输入网址
emial //只能输入邮箱
number //只能输入数字
file //文件域
range //滑块
search //搜索框
其他标签
<select> :下拉框
<option></option> 选项
</select>
<textarea></textarea> 文本域
注意: radio和checkbox中的name属性值需要保持一致，才能
到达单选或者多项的作用.
4.表单的高级应用
hidden //隐藏域
readonly // 只读
disabled // 禁用
5.表单元素的标注
例:
<label for="id值"> 男</label>
<input type="radio" id="id值"/>
6.表单初级验证的方法
placeholder //提示
required //必填项
pattern //正则表达式(输入的内容必须符合这个表达式的要求)
第四章 初识CSS
1.CSS(层叠样式表)
2.CSS语法
选择器{
属性名1:属性值1;
属性名2:属性值2;
}
3.引用CSS的三中方式
第一种: 行内样式
例: <a style="color:red;">内部样式</a>
第二种: 内部样式
在head标签中，写入style标签.
例:
<head>
......
<style type="text/css">
h1{
......
}
</style>
</head>
第三种: 外部样式
使用步骤:
a) 创建一个以.css为后缀的文件(css文件)
b) 在html中通过link引入css文件
<link rel="stylesheet" href="css文件路径"/>
4.基本选择器
4.1 标签选择器
标签名{}
4.2 类选择器
.class属性值{}
4.3 id选择器
#id属性值{}
5.层次选择器
5.1 后代选择器
父元素 子元素{}
5.2 子选择器
父元素>子元素{}
5.3 相邻兄弟选择器
本元素+相邻兄弟元素{}
5.4 通用兄弟选择器
本元素~兄弟元素{}
6.结构伪类选择器
E F:first-child{} //第一个子元素
E F:last-child{} //最后一个子元素
E F:nth-child(?){} // ?表示第几个子元素,还可以使odd奇数，even偶数
E F:first-of-type{} //指定类型的第一个元素
E F:last-of-type{} //指定类型的最后一个元素
E F:nth-of-type(?){} //?表示指定类型第几个子元素
注意:
E F:nth-child(n)在父级里从一个元素开始查找，不分类型.
E F:nth-of-type(n)在父级里先看类型，再看位置.
7. 属性选择器
E[attr] //具有属性attr的元素
E[attr=val] //属性attr的值是val的元素
E[attr^=val] //属性attr的值以val开头的元素
E[attr$=val] //属性attr的值以val结尾的元素
E[attr*=val] //属性attr的值包含val的元素