html
<q></q>单行引用
<blockquote></blockquote>段落引用 可以缩进<br/> 换行
空格
<hr/> 分割线
<address></address> 地址信息 默认斜体表示
<code></code> 显示单行代码
<pre></pre> 显示多行代码<ul>
<li>....</li>
<li>....</li>
<li>....</li>
..............
</ul> 无序 列表显示
<ul>改为<ol>是有序列表显示<a href="地址" title="鼠标点击链接出现的文字" traget="_blank"(在新窗口打开链接 删去折磨人当前窗口打开)>可点击的链接文字</a>
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
<textarea rows="行数" cols="列数">文本</textarea> 多行文本域的输入框 在form表单中使用
-
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
radio为单选框 checkbox为多选框 radio中name属性必须相同 才能起到单选作用
dfd -
下拉列表
在<select>标签中设置multiple="multiple"属性，就可以实现多选功能
image <input type="submit" value="提交">
type：只有当type值设置为submit时，按钮才有提交作用
value：按钮上显示的文字
<input type="reset" value="重置">
type：只有当type值设置为reset时，按钮才有重置作用
value：按钮上显示的文字lable标签
<label for="控件id名称">
没有具体效果 作用是浏览器页面鼠标点击文本也能选中后面的选项
for中的指应该与对应控件中id值相等
<form>
<label for="male">男</label>
<input type="radio" name="gender" id="male" />
<br />
<label for="female">女</label>
<input type="radio" name="gender" id="female" />
<label for="email">输入你的邮箱地址</label>
<input type="email" id="email" placeholder="Enter email">
</form>
css
- <style type="text/css">
更改部分名{ 更改方式}
</style> - css中注释语句为/......../
html中注释为 -
1.内联式 写在标签中 只能控制一个标签 繁琐<p style="......"></p>
2.嵌入式 <style type="text/css">p{ ...}</style>
3.外部式css样式(也可称为外联式) 就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内
<link href="base.css" rel="stylesheet" type="text/css" />
1、css样式文件名称以有意义的英文字母命名，如 main.css。
2、rel="stylesheet" type="text/css" 是固定写法不可修改。
3、<link>标签位置一般写在<head>标签之内。
-
类选择器TIM图片20180710200844.png
- id选择器
即上图中class变为id .stress变为#stress
id选择器和类选择器的区别
1.在一个html文件中 类选择器可以有多个而id选择器只能有一个
2.类选择器中class可以有多个值来多同一个元素设置多个样如<span class="stress bigstress"></span>但id选择器不可以
- 子选择器
.stree>.... - 包含选择器
.stree ....
- 区别
子选择器作用于直接后代 不能作用后代里的后代 用>连接
后代选择器作用于所有后代 用空格连接
通用选择器
*{...}
匹配所有标签a:hover{....}
为鼠标滑过链接时文本添加样式分组选择符
.first,#seconds{...}
为不同标签设置相同样式 放一起写 使代码简洁!important
p{color:red!important;} 写在设置值后 表示无视权值获设置此样式为最高权值
- font-family: 字体
font-size: 字号
font-weight:bold 粗体
font-style:italic 斜体
text-decoration:underline 下划线
text-decoration:line-through 删除线
p{text-indent:2em;} 段落缩进
p{line-height:2em;} 段落行间距
letter-spacing 字母间距
word-spacing 单词间距
text-align:left/center/right 靠左 居中 靠右
- 常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>- 常用的内联元素有：
<a>、<span>、
、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>- 常用的内联块状元素有：
<img>、<input>
块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度
4.可用display:block;强转为块状元素
内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
4.可用display:inline;强转为内联元素
inline-block 元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
