HTML&&CSS

最新推荐文章于 2024-04-27 17:50:46 发布

搬砖的考拉

最新推荐文章于 2024-04-27 17:50:46 发布

阅读量168

点赞数

分类专栏：就业班文章标签： HTML&amp;amp;&amp;amp;CSS

本文链接：https://blog.csdn.net/weixin_44313232/article/details/88615539

版权

就业班专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1.1 表格标签

table – 一个表格
caption – 表格标题
tr – 一行
td – 普通单元格
th – 标题单元格特点：居中且加粗
table常用属性
border:边框
width:宽度
align：表格对齐方式
cellspacing：单元格的间距，一般设置为0
cellpadding：单元格的内边距，一般设置为0
tr常用属性
align：内容的对齐方式
height:行高
bgcolor:背景色
td常用属性
align：内容的对齐方式
height:行高
bgcolor:背景色
重要属性：
rowspan：行合并从上到下
colspan：列合并从左到右
1.3 HTML表单（重要）
在这里插入图片描述
作用
1.采集用户的数据
2.提交表单
1. form表单（容器）

常用属性：
action：表单提交的路径使用#表示当前页面
name：表单的名称
method：表单的提交方式，共有7种，常用2种：get（默认）、post（推荐）
get：
1.请求的参数在地址栏显示请求头（http协议）
2.请求参数大小限制 1KB左右
3.不太安全
post:
1.请求参数不在地址栏显示请求体（http协议）
2.请求参数没有大小限制
3.相对安全
2. 表单项
文本框

常用属性：
type：该表单项的类型，有很多种，不同的类型展示的样式和功能不同
学习11种掌握
text：普通文本框（默认值）
password：密码框特点：输入的是掩码
date：日期选择框 h5新特性
radio：单选框
* 注意：
1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
3. checked属性，可以指定默认值
checked=“checked” | true
checkbox:复选框
* 注意：
1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
2. checked属性，可以指定默认值
checked=“checked” | true
button：普通按钮
该按钮在表单中不起任何作用，后期结合js一起使用
submit：提交按钮
该按钮会结合form表单的action属性提交
reset：重置按钮
该按钮使表单恢复默认状态
image：图像提交
指定src 图像路径作为提交按钮
file:文件上传
1）要求提交方式必须为post
hidden：隐藏域后期会用
特点：用户无法看到
* submit：提交按钮。可以提交表单
* button：普通按钮
* image：图片提交按钮
* src属性指定图片的路径
name：该表单项的名称
（若想提交该表单项，那么必须有name属性）
value：该表单项的值
用户输入或选择
label：指定输入项的文字描述信息

注意：* label的for属性一般会和 input 的 id属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点。
下拉列表

小学
初中

格式：edu=1
selected=“selcted” | true该选项默认被选中
multiple=“multiple” 表示可以多选
文本域
提交的数据在这里填写
常用属性：
rows：行高
cols：列宽

CSS

概念： Cascading Style Sheets 层叠样式表
- 层叠：多个样式可以作用在同一个html的元素上，同时生效
- 1. 好处
- 1. 实现了样式和内容的分离，提高了显示效果和样式的复用性。
功能上更强，比HTML美化的功能更加强大，可以实现HTML不能实现的功能。如：给font设置超大字体，加粗…
降低耦合性，分工更加明确，CSS专门用于美化，HTML专门用于结构搭建。
CSS的使用：CSS与html结合方式
1. 内联样式
* 在标签内使用style属性指定css代码
* 如：

hello css

2. 内部样式
* 在head标签内，定义style标签，style标签的标签体内容就是css代码
* 如：

4. css语法

/*css注释，只有这一种
语法：选择器{css样式}
属性名和属性值之间使用冒号分隔
多个属性之间使用分号分隔
属性名由多个单词组成使用减号分隔
属性值由多个组成使用空格分隔
css样式不区分大小写，建议小写

    <style>
    span{
        font-size: 30px;
        color: red;
        border: 1px solid black;
    }

选择器：筛选具有相似特征的元素
- 分类：
  1. 基础选择器
    1. id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一
      - 语法：#id属性值{css样式}
    2. 元素选择器：选择具有相同标签名称的元素
      - 语法：标签名称{css样式}
      - 注意：id选择器优先级高于元素选择器
    3. 类选择器：选择具有相同的class属性值的元素。
      - 语法：.class属性值{css样式}
      - 注意：类选择器选择器优先级高于元素选择器
  2. 扩展选择器：
    1. 选择所有元素：
      - 语法： *{css样式}
    2. 并集选择器：
      - 选择器1,选择器2{css样式}
    3. 子选择器：筛选选择器1元素下的选择器2元素
      - 语法：选择器1 选择器2{css样式}
    4. 父选择器：筛选选择器2的父元素选择器1
      - 语法：选择器1 > 选择器2{css样式}
    5. 属性选择器：选择元素名称，属性名=属性值的元素
      - 语法：元素名称[属性名=“属性值”]{css样式}
    6. 伪类选择器：选择一些元素具有的状态
      - 语法：元素:状态{css样式}
      - 如：
      - 文本框
        语法：input:focus{css样式}
        状态：
        link：初始化的状态
        hover：鼠标悬浮状态
        active：正在访问状态
        visited：被访问过的状态
    - 语法：
    - 超链接
      链接初始 a:link{css样式}
      鼠标移入 a:hover{css样式}
      鼠标点击 a:active{css样式}
      点击过后 a:visited{css样式}
      div p和div>p区别

          <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*后代元素添加下划线*/
        div.parent p{
            text-decoration: underline;
        }
        /*子元素变蓝字*/
        div.parent>p{
            color: blue;
        }
    </style>
</head>
<body>

<div class="parent">
    <p>子元素</p>
    <p>子元素</p>
    <div>
        <p>孙元素</p>
        <p>孙元素</p>
    </div>
</div>
</body>
</html>