快捷键 ctrl+/
<-- 注释：在网页中不起任何代码作用，只是用于提示 ctrl+/ -->
<title></title> 标签 网页标题栏
<br> 换行符
<p>表示一个段落，段落结束自己动换行，不同的段落之间有间隔
<strong> <b> 字体加粗
<em> <i> 字体倾斜
<hr> 水平线，独立占满一行
替代空格
< 代替小于号<
> 代替大于号>
" 代替双引号 “
© 代替公司图标 鼠标悬停提示文字
<img src="path" alt="text" title="text" width="x" height="y"
--------- ----- ------------ --------- -----------
图像地址 图像的替代文字 图像宽度 图像高度
<img src="图片路径”/> 单标签
超链接标签：
<a href="链接跳转的地址“ target=”跳转的目标位置“>文本</a>
锚点位置跳转步骤
--标记锚点：给元素添加 id=“xx”
--指定位置：超链接的href=“#”锚点元素的id名称“
--如果是另一个页面中的锚点： 超链接href=”另一个页面路径#锚点元素的id名称“
总结：
行元素：可以和其他元素并列在一行
strong b em i img
块元素：独占一行
hr p h1-h6
图片中的alt属性是在图片不能正常显示出现的文本提示
图片中的title属性是在鼠标在移动到元素上的文本提示
无序列表 由ul>li组成 其中ul：外层标签，li内层标签，可以有多个
默认情况下： 列表时纵向排列，后期可以通过css样式改成横向排列
快捷方式：ul>li*5 tab键
有序列表:和无序列表类似，只是每个前面的小黑点变成了数字序号
ol>li
后续都可以通过css进行修改，讲序号去掉，序号改编成其他的图形
定义列表：按照定义的格式来显示列表
dl>dt>dd
dl:最外层标签 dt：标题 dd：列表项
快捷键：dl>dt+dd*n+dt+dd*n
表格:结构稳定，简单
table>tr>td*n
table:最外层标签
tr：表示表格中的一行（可以多行0
td:表示表格中的一行的单元格（可以多列）
属性：
table里面的属性：cellpadding（单元格的内边距)
<table border="1px" cellpadding="10px" cellspacing="0px"
--------- -----------
边界 单元格间距
<table border="1px" cellpadding="10px" cellspacing="0px" aligh="center‘
colspan:单元格跨列 rowspan：单元格跨行
align:写在td里面表示文字对齐方式（center:居中 left：靠左 right：靠右）
align:写在tbble里面表示整个表格在浏览器居中
认识表单元素
form ： 最外层的元素 ，有点像信封（发送地址，邮编 ，自己的地址）
input ： 插入内容的标签，根据里面的属性不同，可以有多种的形式，有点像信件里面的内容
属性：
action：提交的地址
method：提交的方式（get post） get 方式没有私密性 post 安全，保密
input中 type属性不同值的意义：
type=“text” 单行文本框
type=“password” 密码框，输入的内容不显示
type="radio" 单选按钮
type="image" src="" 图片按钮
type="submit" value="提交“ 提交按钮
type=“button” 按钮不带提交效果，后期可以通过js进行脚本编写实现提交效果
type=”reset' value="重置' 重置按钮
type="checkbox" 多选框 value=”“ 多选框提交时候的值
<input type="file" name="file">
文件域:在网页上面可以选择本地文件进行上传的表单元素，一般和post提交方式使用
label标签：标注，能够讲光标聚焦的对应的id元素中
属性for 指向对应的id
<span>是一个行元素不会换行，后面select可以接在span后面
隐藏框无法在网页显示出来，但是可以秘密的传递数据
<input type="hidden" name="age" value="20"
文件域：在网页上面可以选择本地文件进行上传的表单元素，一般和post提交方式使用
<input type="file name="file">
<input type="submit" value="提交“>
段落标签p包裹其他标签，可以换行
size 设置文本框/密码框的长度
<td align="right" > <span>设置密码:</span></td>
<td><input type="password" size="10"/><br></td>
---------
maxlength 限制表单元素text/password里面的字符数
<td align="right> <span>真实姓名：</span> </td>
<td> <input type="text" mxlength="6"/> </td>
checked 对单选按钮和复选框 默认选中状态
属性名和值名字一样可以简写 checked
<input type="checkbox" value="打游戏” checked />打游戏
<input type=’checkbox" value="游戏“ />旅游
<input type="checkbox" />爬山
单选按钮 / 单选按钮选中中状态
<input name="gen" type="radio" value="男” checkde />男
----------- ----------- ---------- -------
<input name="gen" type="radio" value="女“ />女
---------- ---------- --------
分组 单选按钮框 值
select 标签：是一个下拉列表的外层元素
里面可以多放给 option 选项，
option 里面的 value 属性的单项的值
如果 value 没有写在表单进行提交的时候，会获取文本的内容
size 属性： 表示下拉选项展示的个数,默认是1
selected属性：表示默认选中该项
<select name="year‘ size=“3”>
<option>1999</option>
<option value="1">2000</option>
<option value="2">2001</option>
</select>
多行文本域：
cols：列的数量，设置宽度
row：行的数量， 设置高度
<textarea name=" " id=" ’ cols=“30” rows=“ 10”></textarea>
css基本语法
css是层叠样式表
语法
选择器{声明1： h1{
声明2： font-size；12px；
} color：#F00；
}
<style>标签：用于内部样式的解析
css样式分类：
行类样式
内部样式
外部样式
优先级： 行内样式>内部样式=外部样式
内部样式和外部样式的优先级取决于 就近原则
font-weight 文字加粗
.strong{
font-weight: bold; 粗体的
} ----------- -----
font-style 文字倾斜
.em{
font-style: italic; 斜体的
} ---------- ------
style标签包裹的部分会按照css
<style>
h1{
color: red;
font-size: 16px;
}
</style>
color: red; 字体红色
font-size： 16px； 字体大小
关联外部样式 link方式（推荐）
<link rel="stylesheet" href=“./css/超链接.css">
内部样式：导入式引入外部样式表
<style>
@import url（./css/....css)
---------------------------
</style>
行内样式：
<body>
<p style="color: red;>**</p>
----------------
类选择器： 对于标签里面的class属性的值进行的样式设置
.类名{}
<body>
<p> *******;***</p>
<p> class="red">********</p>
</body>
id选择器： id在一个网页中唯一的标识,相同样式的使用最好用class选择器
<style>
#title{
------ font-size: 40px;
font-weight: bold;
}
</style>
<body>
<p id="title">****</p>
选择器的分类
--标签选择器
--类选择器
--id选择器
优先级; id 选择器>类选择器》标签选择器 不存在就近原则
高层选择器
层次选择器：
后代选择器 元素E 元素F
<style>
body p{
font-size: 24;
color: blue;
}
body ul p {
font-size: 15;
color: red;
}
</style>
</head>
<body>
<p>body-p</p>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
<p>ul-p</p>
</ul>
</body>
子选择器 元素E> 元素F
并列选择器 元素E,元素F
可以选择不同的选择器,选择多组标签，同时为他们定义不同的样式。
通过英文逗号（，）连接，任何形式的选择器都可以作为并集选择器的一部分。
div，
p，
.pig li{
color: pink；
}
<body>
<div>熊大</div>
<p>熊二</P>
<span>光头强</span>
<ul class="pig">
<li>小猪佩奇</li>
<li>大猪佩奇</li>
<li>中猪佩奇</li>
相邻兄弟选择器 元素E+元素F 后面所选择的元素类型必须和选择器里面所写的匹配，如果根本不存在的元素，页面中没有效果 -->
通用选择器 元素E~元素F 找到紧邻第二个给**中后面一个**
后面所选择的元素类型必须和选择器里面所写的匹配，如果根本不存在的元素，页面中没有效果 -->
伪类选择器：
E:first-child 作为父元素的第一个子元素的元素E
E:last-child 作为父元素的最后一个子元素的元素E
E F:nth-child(n) 选择父级元素E的第n个子元素F， (n可以是1、2、3)关键字为even、odd
E:first-of-type 选择父元素内具有指定类型的第一个E元素
E:last-of-type 选择父元素内具有指定类型的最后一个E元素
E F:nth-of-type(n) 选择父元素内具有指定类型的第n个F元素
属性选择器：
需求：选择含有id属性的p标签，背景色蓝色 -->
<style>
p[id]{
background-color: blue;
}
选择a标签中属性href值的=xxx的a元素，背景改色成橙色
a[href="http://www.taobao.com"]{
background-color: orange;
}
部分匹配 1匹配开头 2匹配结尾 3部分匹配
选择a标签中属性href值匹配开头https的a元素，背景色绿色*/
a[href^='https']{
background-color: green;
}
选中a标签中属性href值匹配结尾.net的a元素 背景色橙红色
a[href $='net/']{
background-color: orangered;
}
选中a标签属性的href 包含jd的a元素，背景色 灰色
a[href*='jd']{
background-color: #a7a7a7;
}
高级选择器
--层次选择器（后代选择器，子选择器，相邻兄弟选择器，通用选择器）
--伪类选择器（first-child last-child nth-child(n) first-of-type
last-of-type nth-of type(n) )
--属性（存在属性，属性值完全匹配，属性值匹配结尾，属性值部分匹配）
字体样式： 举例
font-family 设置字体类型 font-family:"宋体“;
font-size 设置字体大小 font-size：12px;
font-style 设置字体风格 font-style:italic;
font-weight 设置字体的粗细 font-weight:bold;
font 在一个声明中设置所以字体属性 font：italic bold 36px "宋体”;
字体样式简写 注意顺序： 风格 粗细 大小 类型
中间用空格分隔
文本样式：
（文本文字颜色，文本行高，对齐方式，首行缩进，文本修饰——下划线）
color 设置文本颜色
text-align 设置元素水平对齐方式 center：居中
在块元素里面的内容没有占满外层快元素的情况下，才可以使用文本对齐
text-indent 设置首行文本的缩进
line-height 设置文本的行高
行高：和文字大小有关
text-decoration 设置文本的装饰
<../表示退出到上一层目录>