HTML的基本标记
1、<a> 超链接
<a href="http://www.baidu.com">百度</a>
<a href="1.html">1</a>
<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="http://www.baidu.com"><img src="img/1.jpg" width="300" height="200" title="图片气泡"/></a>
2、<img> 图像
<img src="img/1.jpg" width="300" height="200" title="图片气泡"/>
<img alt="图片挂了" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532336311792&di=f97333698a12aa86243599a2cb812174&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F9358d109b3de9c821370156d6081800a19d8433f.jpg" width="300" height="200"/>
3、<ul><li>无序列表 和 <ol><li>有序列表
<ul>
<li>哈哈</li>
<li>呵呵</li>
<li>嘻嘻</li>
</ul>
<ol>
<li>哈哈</li>
<li>呵呵</li>
<li>嘻嘻</li>
</ol>
4、<div> 块
<div>这是一个块状容器1</div>
<div>这是一个块状容器2</div>
5、<span> 行内
<span>行内1</span>
<span>行内2</span>
6、table表格
<tr>代表行
<td>代表列
colspan代表合并行数
rowspan代表合并列数
7、form表单
一、<input>：
①文本框：
<input type="text" placeholder="请输入文本"/>
//placeholder代表默认提示信息
②密码框：
<input type="password" placeholder="请输入密码" />
//placeholder代表默认提示信息
③数字框：
<input type="number" step="5" max="20" min="0"/>
//step代表数字增长的位数， max代表数字框中的最大值，min代表数字框中的最小值
④日期框：
<input type="date"/>
⑤时间框：
<input type="time"/>
二、单选按钮
<input type="radio" name="r1"/>1
<input type="radio" name="r1"/>2
<input type="radio" name="r1" checked/>3
//checked代表默认选项
三、多选按钮
<input type="checkbox" name="c1"/>1
<input type="checkbox" name="c1"/>2
<input type="checkbox" name="c1"/>3
四、文本区域：
<input type="file" />
五、滑块：
<input type="range" value="0"/>
六、颜色：
<input type="color" value="#FF0000"/>
七、按钮：
<input type="button" value="普通按钮" />
<input type="submit" value="提交按钮"/>
<input type="reset" value="重置按钮" />
八、下拉列表：
<select>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
<option value="5">E</option>
</select>
九、文本区域:
<textarea cols="30" rows="10"></textarea>
CSS的基本标记(参考cssAPI)
引入方式：
1.内联： style属性
2.嵌入： <style>
3.外联： .css文件 link
有效缓存，后续访问的速度快
选择器：
1.ID
2.类
3.标记
4.组合
优先级
样式就近原则： 逻辑上物理上与元素越近的优先级越高
!important > 内联 > ID选择器(嵌入>外联) > 类选择器(嵌入>外联) > 标记选择器(嵌入>外联)
常用CSS API:
①关于文字：
1、font-family 字体
2、font-size 字号
3、color 文字颜色
4、font-weight 加粗
5、font-italic 倾斜
6、text-decoration 下划线
7、text-align 水平对齐
②关于背景
1、background-color 背景颜色
2、background-image 背景图像
③关于伪类
1、:hover 悬停
④关于盒模式
1、margin 外边距
2、border 边框
3、padding 内间距
⑤div布局
position：absolute-------绝对定位
绝对偏离，原先的位置不在保留
position：relative---------相对定位
相对自己偏离，原先的位置还继续保留
⑥div浮动
1、float： left right 左右浮动
2、clear： left right both 清除浮动
网友评论