【HTML&CSS】常见元素及样式汇总

最新推荐文章于 2024-05-20 10:21:00 发布

软工怎么这么难

最新推荐文章于 2024-05-20 10:21:00 发布

阅读量1.9k

点赞数 38

文章标签： html css 前端

本文链接：https://blog.csdn.net/m0_61465749/article/details/135016810

版权

HTML与CSS

CSS引入方式

行内样式：写在标签的style 属性中（不推荐）
```
<h1 style="xxx: xxx; xxx: xxx;">中国新闻网</h1>
```
内嵌样式：写在<style>标签中（可以写在页面任何位置，但通常约定写在<head>标签中）
```
<style>
h1{
	xxx:xxx
	xxx:xxx
}
</style>
```
- 元素选择器
```
元素名称{
	color:red;
}
h1{
	color:red;
}
```
- id选择器
```
#id属性值{
	color:red;
}
#hid{
	color:red;
}
```
- 类选择器
```
.class属性值{
	color:red;
}
.cls{
	color:red;
}
```
优先级：id选择器>类选择器>元素选择器

有.的是类名匹配，直接写的是标签名匹配，有#的是id匹配
外联样式：写在一个单独的css文件中（需要通过link标签在网页中引入）
```
<link rel="stylesheet" href="style.css">
```

`id`、`class`、`name`的区别？

ID（标识符）:
- 唯一标识一个HTML元素，确保在页面中是唯一的。
- 用于在CSS中选择和应用样式，同时也可用于JavaScript中进行DOM操作。
- 在表单中，可以用于标识表单元素，但这并不是其主要用途。

<div id="uniqueId">This is a unique element</div>

Class（类）:
- 用于为一个或多个HTML元素指定一个或多个类，类之间用空格分隔。
- 允许多个元素共享相同的样式，提高样式的可重用性。
- 在CSS中，通过类选择器选择并应用样式。

<p class="highlight">This is a paragraph with a class</p>

Name（名称）:
- 在HTML中，主要用于表单元素，标识表单字段的名称，这对服务器端处理表单数据很有用。
- 不是用于关联样式（CSS），而是为了在提交表单时标识表单字段。

<input type="text" name="username">

📘 总体而言，ID和Class主要用于关联CSS样式，而Name主要用于标识表单字段，以便在表单提交时服务器能够识别和处理相应的数据。

HTML的页面布局

盒子：页面中所有的元素（标签），都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局
盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）

CSS属性

width：设置宽度
height：设置高度
border：设置边框的属性
padding：内边距
margin：外边距
也可以单独的设置：padding-top、padding-left、padding-right

在线API帮助文档

HTML 系列教程

`<img>`

src：指定图像的url（绝对路径/相对路径）
- 绝对路径：磁盘路径、网络路径
- 相对路径：当前文件夹路径（./文件名）./可省、上一级文件夹路径（../文件名）
width：图像的宽度（像素 px/相对父元素的百分比 x%）
height：图像的高度（像素 px/相对父元素的百分比 x%）

`<h1>-<h6>`

标题标签

`<hr>`

水平线标签

`<a>`

超链接

herf：指定资源访问的url
target：指定在何处打开资源链接
- _self：默认值，在当前页面打开
- _blank：在空白页面打开

css属性

text-decoration：规定添加到文本的修饰，none表示定义标准的文本
color：定义文本的颜色

`<video>`

视频标签

src：规定视频的url
controls：显示播放控件
width：播放器的宽度
height：播放器的高度

`<audio>`

音频标签

src：规定音频的url
controls：显示播放控件

文本标签

`<p>`

段落标签

`<b>/<strong>`

加粗标签

CSS样式

line-height：设置行高
text-indent：定义第一个行内容的缩进
text-align：规定元素中的文本的水平对齐方式

在HTML中无论输入多少个空格，只会显示一个。可以用空格占位符：&nbsp

无语义标签

`<div>`

一行只显示一个
默认的宽度是父元素的宽度，高度默认由内容撑开
可以设置宽高

`<span>`

一行可以显示多个
宽度和高度默认由内容撑开
不可用设置宽高

表格标签

`<table>`

定义表格整体，可以包裹多个<tr>

border：规定表格边框的宽度
width：规定表格的宽度
cellspacing：规定单元之间的空间

`<tr>`

表格的行，可以包裹多个<td>

`<th>`

表头单元格，默认字体加粗

`<td>`

表格单元格（普通）

表单标签

`<form>`

表单的总体

<form action="http://localhost:8080" method="post"></form>

action：跳转的网站、页面
method：提交表单的方法
- get：在url后面拼接表单数据，比如：?username=Tom&age=12 ，url长度有限制，是默认方法
- post：在消息体中传递，参数大小无限制，更安全

⛳他们的区别

⛳api fox对应的用法

表单项

不同类型的input元素

`<input>`

定义表单项，通过type属性控制输入形式

type取值	描述
text	默认值，定义单行的输入字段
password	定义密码字段
radio	定义单选按钮
checkbox	定义复选框
file	定义文件上传按钮
date/time/datetime-local	定义日期/时间/日期时间
number	定义数字输入框
email	定义邮件输入框
hidden	定义隐藏域
submit/reset/button	定义提交按钮/重置按钮/可点击按钮

<form action="http://localhost:8080" method="post">
    <label><input type="radio" name="a" value="100">男</label>
    <label><input type="radio" name="a" value="101">女</label>
    <label><input type="checkbox" name="b" value="102">男</label>
    <label><input type="checkbox" name="b" value="103">女</label>
</form>

radio：name属性要一致，要不然无法达到单选的效果
check：这里name的规范表达也一般设定属性是一致的，传递到后端就是b=102&b=103
name和value： <label><input type="radio" name="10" value="100">男</label> 假设选中这个按钮，是传递name=value也就是b=102到后端中

`<label>`

标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

标签的 for 属性应当与相关元素的 id 属性相同。

关联表单元素： <label> 可以与表单元素关联，使得用户点击 <label> 文本时，关联的表单元素获得焦点。关联通过 <label> 的 for 属性与表单元素的 id 属性相匹配来实现。

示例：
```
<form action="" method="post">
    <label for="username">用户名：<input type="text" id="username" name="username"></label>
    <input type="submit" value="提交">
</form>
```
默认关联： 如果 <label> 内包含的表单元素是其唯一的子元素，且没有指定 for 属性，浏览器会默认关联这个 <label> 与其内部的表单元素。这种情况下，不需要额外的 for 属性。

示例：
```
<form action="" method="post">
    <label>用户名：<input type="text" id="username" name="username"></label>
    <input type="submit" value="提交">
</form>
```

假如，在某一个问卷调查中，需要单选性别，使用label标签，那么我们就不需要刻意的去点击圆形的单选框，而是可以选择点击“男”或者“女”就可以自动勾选当前的选项，使得用户的交互体验更好

`<select>`

<form action="http://localhost:8080" method="post">
    <select name="select">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
</form>

select中的具体的选项是用option标签，name定义在select处，value定义在option处

`<textarea>`

与input中text属性的区别

<input> 元素的 type 属性可以设置为 “text”，而 <textarea> 则是一个单独的元素，用于多行文本输入。以下是它们之间的一些主要区别：

输入方式：
- <input type="text"> 用于单行文本输入。通常用于短文本字段，例如用户名、搜索框等。
- <textarea> 用于多行文本输入。适用于用户需要输入大段文本的情况，例如评论、描述等。
大小调整：
- <input type="text"> 的大小是固定的，可以通过 CSS 控制宽度，但高度通常不受控制，因为它是单行输入。
- <textarea> 元素可以通过 rows 和 cols 属性或者通过 CSS 控制来调整其可见的行数和列数，因此可以更灵活地控制其大小。
默认值：
- <input type="text"> 可以通过设置 value 属性来指定默认值。
- <textarea> 可以在标签内包含文本内容，作为默认值显示在多行文本框中。

软工怎么这么难

关注

38
点赞
踩
36

收藏

觉得还不错? 一键收藏
0
评论
【HTML&CSS】常见元素及样式汇总

行内样式：写在标签的style属性中（不推荐）stylexxxxxx;xxxxxx;</内嵌样式：写在<style>标签中（可以写在页面任何位置，但通常约定写在<head>标签中）h1xxxxxx</元素选择器id选择器类选择器外联样式：写在一个单独的css文件中（需要通过link标签在网页中引入）
复制链接

扫一扫