web前端 (05)HTML+CSS

目录
HTML
    BODY子标签
        列表标签 *
        表格标签 table *
    form 表单标签 ***
    表单常用子标签 (input标签) *****
    表单常用子标签 select与option标签 熟悉
    label标签 了解
    网页的碎片化开发
        iframe 框架标签 了解
    导航页 案例
定义CSS样式的三种方式 *****
基本选择器 *****
CSS三大特性 *****

BODY子标签
列表标签 *

无论是使用有序列表, 还是无序列表, 都使用li标签 来表示列表中的一行数据!

• 有序列表 ol标签
  - 属性: 了解
  type属性: 描述前置的有序编码类型
  可选值:
  - 1 : 默认, 阿拉伯数字编号
  - a : 小写字母编号
  - A : 大写字母编号
  - i : 小写罗马数字
  - I : 大写罗马数字

          start属性:    取值为数字, 描述的是序列的起始值.
  

• 无序列表 ul标签
  - 属性: 了解
  type属性: 前置的图标类型: disc(默认,实心圆),square(实心方块),circle(空心圆)

表格标签 table *

表格的组成, 至少使用三个标签

-   table标签 ,   是表格本身, 是表格中行的容器
-   行标签 tr   ,   是表格中的一行, 是表格中列的 容器!
-   列标签 td  ,   是表格中一行中的一列, 是显示数据的容器 !

可选标签    :   th标签 , 表头标签, 使用方式与td相同

属性: 了解
- width : 设置table/td标签的 宽度
- height : 设置table/td标签的 高度
- border : 取值为数字, 表示边框的宽度
- bordercolor: 边框的颜色;
- bgcolor : 设置table/td标签的 背景颜色
- background : 设置table/td标签的 背景图片

合并单元格:(属性设置给td)
- colspan : 取值为数字 , 表示当前td横向跨越的单元格数量
- rowspan : 取值数字, 表示当前td垂直跨越单元格的数量

form 表单标签 ***

作用: 用于显示 与 收集 用户的信息, 并将信息,发送给服务器!

常见用途:

-   用户注册
-   用户登录
-   搜索内容
-   商品检索
-   等等

常用属性:
- action : 提交的服务器地址
- method : 提交数据时的方式 可供选择的: (GET / POST)
GET请求: 表单中的数据, 在网址中拼接显示 !
POST请求: 表单中的数据, 存储在单独的请求体中 , 不会显示到网址中 !
- enctype : 数据提交时的编码类型, 默认值为meta中的编码

表单常用子标签 (input标签) *****

属性：
- name : 用于在提交数据到服务器时, 给每段数据 添加key
- value : 输入组件提交给服务器的值, 可以通过用户的输入改变 !
- placeholder : HTML5版本的新属性, 用于在输入框中 提示输入
- checked : 用于单选复选框, 表示选项默认选中 HTML5boolean类型属性
- disabled: 输入框不可输入 HTML5boolean类型属性
- readonly: 输入框内容不可修改 HTML5boolean类型属性

-   type属性: 更改输入框的输入类型:
    -   text    :   默认, 表示文本输入框
    -   password:   密码输入框, 输入的内容,在显示时会被*号或·代替
    -   radio   :   单选框 , value属性值不会显示出来 , 一组单选框, name属性值必须相同,才可以实现单选效果 !
    -   checkbox:   复选框 , value属性值不会显示
    -   hidden  :   隐藏的输入框
    -   file    :   文件上传选择框
    -   button  :   普通的按钮 value属性为按钮的文字
    -   submit  :   提交按钮 , 点击后表单中的所有数据会发送给服务器
    -   reset   :   重置按钮
    -   image   :   图片提交按钮, 点击后表单中的所有数据会发送给服务器 , 并会多出两个数据 x,y (x与y的含义是: 鼠标点击按钮的坐标点)

表单常用子标签 select与option标签 熟悉

select 标签: 下拉选择框标签
- name属性: 数据提交时的key
- multiple : 是否支持多选 boolean类型属性

option 标签: 选项标签
- 标签内容部分 , 显示出的选项文本
- value属性: 数据提交时的值 , 不会显示
案例:

高清无码
超清资源
日韩资源
蓝光资源
3D资源
VR资源
AR资源

label标签 了解

用于传递事件的标签

传递事件的步骤:

1. 给接收事件 的 标签 添加任意的id属性值
2. 给产生事件 的 标签 外层嵌套一个label标签, 给label标签添加for属性, 属性值为第一步的id值

案例:
男

网页的碎片化开发
iframe 框架标签 了解

用于将一个网页 嵌入到 另一个网页中

属性:
- src : 引入的网页地址
- height: 占用的高度
- width: 占用的宽度

导航页 案例

各种服务器地址:

    百度:
        -   地址:  https://www.baidu.com/s
        -   搜索的数据key:   wd

    京东:
        -   地址: https://search.jd.com/Search
        -   数据key   :   keyword
        -   编码key   :   enc=utf-8

    淘宝:
        -   地址: https://s.taobao.com/search
        -   数据key   :   q

    腾讯视频:
        -   地址: https://v.qq.com/x/search/
        -   数据key   :   q

代码示例:

<form action="https://www.baidu.com/s">
    <input type="text" name="wd"><input type="submit" value="百度1下">
</form>
<form action="https://search.jd.com/Search">
    <input type="hidden" name="enc" value="utf-8"><input type="text" name="keyword"><input type="submit" value="京东2下">
</form>
<form action="https://s.taobao.com/search">
    <input type="text" name="q"><input type="submit" value="淘宝3下">
</form>
<form action="https://v.qq.com/x/search/">
    <input type="text" name="q"><input type="submit" value="腾讯视频好几下">
</form>

作业

编写一个表单, 提交到如下服务器:
服务器地址:  http://itdage.cn/B/imgshow
提交的参数有 四个: 

    1.  键 为 id  ,   可选的值为: 1-16 和 100-123
    2.  键 为 s1, 值为文本, 必填
    3.  键 为 s2, 值为文本, 选填
    4.  键 为 s3, 值为文本, 选填

测试:
    http://itdage.cn/B/imgshow?id=1&s1=渣渣辉

捐东西补助 登月 3 4 5 6 7 8 9 10 11

CSS
简介 *

CSS: cascading style sheets 层叠样式表

作用 *

用于修饰HTML元素的样式 , 层叠样式表通常存储在.css文件中

好处 *

让网页内容 与 网页表现 完全分离, 提高了代码的复用率 !

定义CSS样式的三种方式 *****

CSS中单个样式 如何编写:
使用键值对描述样式 , 键与值之间使用英文冒号连接, 多个样式之间使用英文分号分割;

方式1. 内联样式 (行内样式)
定义在每一个元素的style属性中
案例:

一二三四五

方式2. 内部样式表
定义在网页的style标签中, style标签建议放在head中
格式:

方式3.
外部样式表
定义在独立的css文件中, 在HTML中通过link标签, 引入这个css文件 !

    格式:
    1.  创建一个CSS文件
        @charset "UTF-8";
        选择器1{
            样式列表;
        }
        选择器2{}
        ...
        选择器n{}

    2.  引入到HTML中
        <link rel="stylesheet" type="text/css" href="css文件的路径">

常用样式

字体大小: font-size :长度单位;
文字颜色: color :颜色值;
背景颜色: background-color:颜色值;
背景图片: background :url(“图片路径”);
文字位置: text-align :left/center/right
元素宽度: width :长度单位;
元素高度: height :长度单位;
鼠标形状: cursor :pointer;//手指形状

CSS选择器:

在CSS中, 我们可以通过选择器, 锁定一个或一组元素, 将样式表应用到锁定的元素上!

基本选择器 *****
元素名称选择器

作用: 通过元素名称 . 锁定一个或一组元素

格式:
元素名称{
样式列表;
}

案例:
a{
color:#009;
}

ID选择器

作用: 通过元素的id属性值, 锁定一个元素 !
(ID属性值 可以重复, 但是不要重复)

格式:
#id值{
样式列表;
}
案例:
#a1{
color:#009;
}

类选择器

作用: 通过元素的class属性值, 锁定一个或一组元素 !

格式:
.class属性值{
样式列表;
}
案例:
.a1{
color:#009;
}

CSS三大特性 *****

• 继承性
  给父元素添加的样式 会被子元素继承 !

• 层叠性
  对于同一个元素 通过多种方式添加的多个样式, 不冲突的部分可以层叠 , 对于冲突的部分 ,参照优先级特性

• 优先级特性:
  默认的情况下, 遵循就近优先原则 (离得近的优先级高) !

  特殊的样式来源: 1. 继承得到的样式 2.浏览器的默认样式 !

  优先级等级从高到底:
  1. 内联样式
  2. 距离较近的内部样式表或外部样式表样式
  3. 默认样式
  4. 继承得到的样式

  特殊优先级:
  在内部或外部样式表中, 使用不同的选择器, 优先级也不同:
  基本选择器:
  ID选择器>类选择器>元素名称选择器
  权重分别为: id选择器(1000) ,类选择器(100),元素名称选择器(1)

绝对优先样式 *

在样式键值对后 ,分号前, 添加如下关键字:
!important;

格式:
选择器{
样式key:样式值 !important;
}

案例:

这里的文本颜色是?