html4+css2

html4

1、HTML:HyperText Markup Language（超文本标记语言）。

2、html基本结构：

<!-- 声明文档  告诉浏览器当前网页的版本。 -->
<!DOCTYPE html> 
<!-- 设置html语言 作用：让浏览器显示对应的翻译
     提示。利于搜索引擎优化。 -->
<html lang="zh-CN">
<head>
    <!-- 指定字符编码为 UTF-8-->
    <meta charset="UTF-8">
    <!-- 网页标题 -->
    <title>我是一个标题</title>
</head>
<body>
    <!-- body中书写html代码 -->
</body>
</html>

3、html基础

3.1、排版标签（3个）

    <!-- h1-h6 标题 一个html代码中h1最好只有一个
         h2-h6可以有多个 h标签不能相互嵌套-->
    <h1>最大</h1>
    <h6>最小</h6>
    <!-- p 段落   p标签中不能嵌套div h1-h6 p标签-->
    <p>这是一个段落</p>
    <!-- div 布局 div没有任何语义 用于整体布局 -->
    <div>我是一个div</div>

3.2、常用文本标签（3个）

    <!-- em 语义：要着重阅读的内容 表现：倾斜 i表现也为倾斜-->
    <em>我是一个em</em>
     <!-- strong 语义：十分重要的内容（语气比em要强）表现:加粗 b表现也为加粗 -->
     <strong>我是一个strong</strong>
     <!-- span 没有语义 用于包裹短语的通用容器 -->
     <span>我是一个span</span>

3.3、图片标签

    <!-- img是单标签 4个属性 src：图片的位置（相对路径、绝对路径） alt：图片加载不出来时显示的文字 seo时通过alt得知图片的内容 height：图片的高 with：图片的宽-->
     <img src="../1.jpg" alt="这是一个图片" width="200px" height="200px">

3.4、相对路径，绝对路径

相对路径：以当前位置作为参考点，去建立路径

./:同级目录下

../:上级目录下

/:下级目录下

绝对路径：以根位置作为参考点，去建立路径

本地绝对路径:E:/a/b/c/奥特曼.jpg 。（很少使用）

网络绝对路径:http://wwwxiaomao.com/images/index_new/logo.png 。

3.5、超链接

 <!-- a href：指定要跳转到的具体目标 target：控制跳转时如何打开页面，_self ：在本窗口打开。_blank ：在新窗口打开。 name 属性的 a 标签是锚点 a标签也可以跳转到指定的锚点-->
     <a href="https://www.baidu.com/" target="_blank">点击去百度</a>

3.6、列表

<!-- ol有序列表 ul无序列表 -->
     <ol>
        <li>有序列表1</li>
        <li>有序列表2</li>
        <li>有序列表3</li>
     </ol>
     <ul>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
     </ul>

3.7、表格

<!-- 
        表格
        table：表格 width ：设置表格宽度。height ：设置表格最小高度，表格最终高度可能比设置的值大。
        border ：设置表格边框宽度。cellspacing ： 设置单元格之间的间距。
        caption：表格标题
        thead：表头 同tr
        th：表头单元格 同td
        tbody：表格主题 同tr
        tfoot：表格脚注 同tr
        tr：行 height：单元格高度 没有宽度 table已经设置 align ： 
        设置单元格的水平对齐方式：left ：左对齐 center ：中间对齐 right ：右对齐valign ：
        设置单元格的垂直对齐方式： top ：顶部对齐 middle ：中间对齐 bottom ：底部对齐
        td：普通单元格 width ：设置单元格的宽度，同列所有单元格全都受影响。
        heigtht ：设置单元格的高度，同行所有单元格全都受影响。
        align ：设置单元格的水平对齐方式。
        valign ：设置单元格的垂直对齐方式。
        rowspan ：指定要跨的行数。
        colspan ：指定要跨的列数。
        
      -->
      <table border="1" cellspacing="0">
        <caption>表格标题</caption>
        <thead>
            <tr>
                <th>表头一</th>
                <th>表头二</th>
                <th>表头三</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>单元格1</td>
                <td>单元格2</td>
                <td>单元格3</td>
            </tr>
            <tr>
                <td>单元格1</td>
                <td>单元格2</td>
                <td>单元格3</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>表格脚注1</td>
                <td>表格脚注2</td>
                <td>表格脚注3</td>
            </tr>
        </tfoot>
      </table>

3.8、表单

<!-- 
      form 表单 action 属性： 表单要提交的地址。 
        target 属性： 要跳转的新地址打开位置; 值: _self 、 _blank 
        method 属性： 请求方式，值： get 、 post
      input 输入框 
        type 属性： 指定表单控件的类型。值：text 、 password 、 radio 、 checkbox 、 hidden 、 submit 、 rest、button 等。
        name 属性： 指定数据名称
        value 属性：对于输入框：指定默认输入的值；对于单选和复选框：实际提交的数据；对于按钮：显示按钮文字。         disabled 属性： 设置表单控件不可用。
        maxlength 属性： 用于输入框，设置最大可输入长度。
        checked 属性： 用于单选按钮和复选框，默认选中
      textarea 文本域 
        name 属性： 指定数据名称 
        rows 属性： 指定默认显示的行数，影响文本域的高度。
        cols 属性： 指定默认显示的列数，影响文本域的宽度。
        disabled 属性： 设置表单控件不可用。
      select 下拉框 
        name 属性： 指定数据名称 disabled 属性： 设置整个下拉框不可用。
      option 下拉框选项 
        disabled 属性： 设置拉下选项不可用。
        value 属性： 该选项事件提交的数据（不指定value，会把标签中的内容作为提交数据）
        selected 属性： 默认选中。
      button 按钮 
        disabled 属性： 设置按钮不可用。
        type 属性： 设置按钮的类型，值： submit （默认）、 reset 、 button
      label 与表单控件做关联 label 标签可与表单控件相关联，关联之后点击文字，与之对应的表单控件就会获取焦点         两种与 label 关联方式
        1. 让 label 标签的 for 属性的值等于表单控件的 id 。
        2. 把表单控件套在 label 标签的里面。
       -->
       <form action="#" target="_self" method="get">
        文本：<input type="text" name="text"><br>
        密码：<input type="password" name="password"><br>
        <input type="hidden" name="hidden" value="hidden">
        单选框：<input type="radio" name="radio" value="man">男 <input type="radio" name="radio" value="woman" checked>女<br>
        复选框：<input type="checkbox" name="checkbox" value="sing" checked>唱歌 <input type="checkbox" name="checkbox" value="talk">讨论 <input type="checkbox" name="checkbox" value="rap">ruap <br> 
        文本域：<textarea name="textarea" cols="30" rows="10"></textarea>
        <input type="button" value="button">
        <input type="submit" value="submit">
        <input type="reset" value="reset"><br>
        请选择<select name="select">
            <option value="1">1</option>
            <option value="2" selected>2</option>
            <option value="3">3</option>
        </select><br>
         <label for="lable1">测试lable</label><input type="lable" name="lable" id="lable1"><br>
       </form>

css2

1、css:层叠样式表 (Cascading Style Sheets，缩写为 CSS）

2、css引入方式

3、选择器

基本选择器（4个）

复合选择器

后代选择器：选择器1 选择器2 选择器3 ...... 选择器n {} 选择器之间，用空格隔开

子代选择器：选择器1>选择器2 {}

交集选择器：选择器1选择器2 例子div.box1 选中class为box1的div

并集选择器：选择器1,选择器2{} 选择器之间用,隔开选择器1选择器2都会有此属性

伪类选择器

E:first-child 所有兄弟元素中的第一个。

E:last-child 所有兄弟元素中的最后一个。

E:nth-child(n) 所有兄弟元素中的第 n 个

E:hover 鼠标悬停在元素上的状态。

E:active 元素激活的状态。什么是激活？—— 按下鼠标不松开。

选择器的优先级

4、css三大特性

5、常用属性

文字控制属性

/* 字体大小 单位像素 */
font-size: 20px;
/* 字体颜色 4种表示方式 */
color: #fff;
/* 行高 设置多行文本的间距 单位像素 20px或者数字2（当前标签font-size属性值的倍数） */
line-height: 20px;
/* 控制水平对齐方式  left center right*/
text-align: center;

6、元素的显示模式

7、css盒子模型

8、浮动