HTML&CSS基础笔记

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 清除浮动