html基础属性 css属性

html

<!--html常用标签统计-->
<!--h1-h6是标题标签-->
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<!--段落标签p-->
<p></p>
<!--水平线标签hr-->
<hr/>
<!--换行br-->
<br>
<!--加粗b-->
<b></b>
<!--斜体-->
<i></i>
<!--字体标签 文本标签-->
<font>文本淘汰了解</font>
<!--center文本标签 居中-->
<center>居中淘汰了解</center>

<!--图片标签 默认是./当前目录 ../是一个目录-->
<img src="位置" align="位置" alt="图片加载失败提示的文字" width="宽" height="高">

<!--列表标签-->
<!--有序列表ol type="类型"  start="子类第几个开始“  li-->
<ol>
    <li>第一个</li>
    <li>第二个</li>
    <li>第三个</li>
</ol>


<!--无序列表 type disc圆  square方  circle空心-->
<ul>
    <li>第一个</li>
    <li>第二个</li>
    <li>第三个</li>
</ul>

<!--超链接 a target（_self默认当前页面打开  _blank在开启一个新的页面跳转）-->
<a></a>

<!--span行内标签-->
<span></span>
<!--div每个div沾满一整行-->
<div></div>

<!--语义化标签 为了方便自己程序员方便观看-->
<!--页眉-->
<header></header>
<<!--页脚-->
<footer></footer>

<!--表格标签-->

<table border="边框" width="宽度" cellpadding="边沿与内容的空白" cellspacing="单元格之间的空白" bgcolor="背景色"
       align="对齐方式">表
</table>
<tr>行</tr>
<td rowspan="占位几行" colspan="占几列">表格</td>
<th>表头</th>
<caption>表格标签</caption>
<thead>表格头部份</thead>
<tbody>表格体部分</tbody>
<tfoot>表格的脚部分</tfoot>

<!--表单标签 form   需要提交的必须要有name-->
<form action="提交的位置url" method="指定提交方式 get post....">
    <label><input type="默认是text" placeholder="提示信息"></label>
    <input type="password">
    <!--单选框需要起相同名字确保是一组单选-->
    <input type="radio" name="11" value="">
    <input type="radio" name="11" value="">
    <!--复选框需要起相同名字确保是同一组-->
    <input type="checkbox" name="22" value="">
    <input type="checkbox" name="22" value="">

    <br>
    文件选择框 <input type="file">
    <input type="hidden" 隐藏域>

    <!--    取色器-->
    <input type="color">
    <!--    日期-->
    <input type="date">
    <input type="datetime-local">

    <!--三个提交按钮-->
    <input type="submit" 提交 value="你起的名字">
    <input type="button" 一个按钮>
    <input type="image">

    <!--列表信息 -->
    <select name="名字">
        <!--列表子内容-->
        <option value="提交的值"></option>
        <option></option>
        <option></option>
    </select>

    <!--文本域-->
    <textarea cols="行" rows="列"></textarea>
</form>

Css

基础选择器

1. id选择器：选择器具体的id属性值的元素(
建议在一个html页面元素唯一
)
#id属性值 {
}

2.类选择器
.class {
}

3.元素选择器
#标签名称 {
}

类的优先级高于元素选择器的优先级
扩展选择器

1.选择所有元素
* {
}

2.并集选择器
* 选择器1，选择器2 {
}

3.子选择器
* 语法 选择器1  选择器2 {
}
 4.父选择器
  选择器1>选择器2{

  }
  5.属性选择器 选择元素名称，属性名=属性值的元素
  语法: 元素名称[属性名="属性值"]{}

6.伪类选择器
  link 默认
  hover 悬浮
  active 点击时
  visited 访问后
  元素：状态{}

 /*属性*/
1.字体 文本
 *font-size 字体大小
 *color:文本颜色
 *text-align 对齐方式
 *line-height 行高
2.背景 background 
3.边框
 border：设置边框符合属性
4.尺寸
 width：宽度
 height：高度
 5.盒子模型
  margin
  padding
  盒子最终大小
  box-sizing:border-box
  float:浮动