web前端 (05)HTML+CSS

目录
HTML
    BODY子标签
        列表标签 *
        表格标签 table *
    form 表单标签 ***
    表单常用子标签 (input标签) *****
    表单常用子标签 select与option标签 熟悉
    label标签 了解
    网页的碎片化开发
          框架标签 了解
    导航页 案例
定义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 : 数据提交时的编码类型, 默认值为 中的编码

表单常用子标签 (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值

案例:
男

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

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

属性:
- 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=渣渣辉

CSS
简介 *

CSS: cascading style sheets 层叠样式表

作用 *

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

好处 *

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

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

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

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