HTML常用标签与CSS

最新推荐文章于 2022-07-29 21:19:43 发布

windrainjs

最新推荐文章于 2022-07-29 21:19:43 发布

阅读量577

点赞数

分类专栏： May 文章标签： html css 前端

本文链接：https://blog.csdn.net/qq_45751796/article/details/122241677

版权

May 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

HTML常用标签与CSS

HTML常用标签

1.列表标签

ul标签(无序列表)
ul - 代表列表
li - 用来提供列表中的元素
type属性值 - circle、disc(默认值)、square
ol标签(有序列表)
ol - 代表列表
li - 用来提供列表中的元素
type属性值 - 1(阿拉伯数字,默认值)、I(大写罗马数字)、i(小写罗马数字)、A(大写英文字母)、a(小写英文字母)

2.表单标签:form

form标签是容器标签,里面可以放很多个其他表单相关的标签。
主要作用:可以提供表单内相关标签内容的整体的提交和重置功能
重置:只能重置和重置按钮在同一个form标签中的其他标签

表单相关标签: input、select、textarea

input标签
- 文本输入框
  input 标签的type属性为text
  value - 默认值
  placeholder - 提示信息
  maxlength - 最大长度
- 密码输入框
  input 标签的type属性为password
  value - 默认值
  placeholder - 提示信息
  maxlength - 最大长度
- 单选按钮
  input 标签的type属性为radio,并使name相等的单选分为一组
  checked='checked' - 让按钮处于选中状态
  label标签的for属性=input标签id属性的值就可以将label标签的内容与所对应的input标签联动(关联)
- 复选框
  input 标签的type属性为checkbox,并使name相等的分为一组
  按钮和文字图片绑定方法 - label标签的for属性=input标签id属性的值就可以将label标签的内容与所对应的input标签联动(关联)
- 普通按钮
  input 标签的type属性为button,value属性是按钮上显示的文字
- 日期选择
  input 标签的type属性为date
- 时间选择
  input 标签的type属性为datetime-local
- 颜色选择
  input 标签的type属性为color
- 文件选择
  input 标签的type属性为file
- 重置按钮
  input 标签的type属性为reset
- 提交按钮
  input 标签的type属性为submit
- 通用属性
  name属性 - 主要input标签对应的功能为程序提供了数据，那么input标签就需要设置name属性来描述数据的作用
select标签
- 下拉列表
  select标签中包含多个option标签 select - 提供列表(容器) option - 提供列表中的选项
- 下拉列表设置分组
  select标签中包含多个optgroup标签,optgroup标签包含多个option标签 select - 提供列表(容器) optgroup - 提供组(容器) option - 提供列表中的选项
textarea标签
- 多行文本输入框
  rows属性 - 设置文本框的高度
  cols属性 - 设置文本框的宽度
  placeholder属性 - 提示信息
  maxlength属性 - 最大长度

注意: input标签创建的普通按钮只能显示文字,button标签可创建显示图片或文字普通按钮

3.div标签

div是无语义标签,主要用于对网页内容从结构上或者意义上进行分组

CSS 层叠样式表

css负责网页内容的布局和样式

插入样式表的方法有三种:

外部样式表(External style sheet)
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。标签在（文档的）头部：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。
内部样式表(Internal style sheet)
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

内联样式(Inline style)
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

多重样式
样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。
一般情况下，优先级如下：
（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

css语法

选择器{属性1:属性值1;属性1:属性值1;…}

选择器 - 选中标签(内联)

css选择器

1. 标签选择器 - 直接将标签名作为一个选择；选择所有指定类型的标签
例如: p{} - 选择所有的p标签
2. id选择器 - HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义(id必须唯一)
例如: #p{} - 选择id值为p的标签
3. class选择器 - .class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示
例如: .p{} - 选择class值为p的标签
4. 群组选择器 - 将多个选择器通过逗号隔开作为一个选择器
例如: p,#p,.p{} - 选择所有的p标签,选择id值为p的p标签,选择class值为p的标签
5. 子代选择器 - 将多个选择器用>隔开作为一个选择器
例如:div>p{} - 选中div里面的p标签(div和p是父子关系)
6. 后代选择器 - 将多个选择器用空格隔开作为一个选择器
例如:div p{} - 选中div里面的所有p标签(p只要是div的后代就行)
7. 通配符 - 通过*(星号)作为选择器,选中所有标签

windrainjs

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML常用标签与CSS

HTML常用标签与CSSHTML常用标签1.列表标签ul标签(无序列表)ul - 代表列表li - 用来提供列表中的元素type属性值 - circle、disc(默认值)、squareol标签(有序列表)ol - 代表列表li - 用来提供列表中的元素type属性值 - 1(阿拉伯数字,默认值)、I(大写罗马数字)、i(小写罗马数字)、A(大写英文字母)、a(小写英文字母)2.表单标签:formform标签是容器标签,里面可以放很多个其他表单相关的标签。主要作用:
复制链接

扫一扫