行内样式:写在标签的style
属性中(不推荐)
<h1 style="xxx: xxx; xxx: xxx;">中国新闻网h1>
内嵌样式:写在标签中(可以写在页面任何位置,但通常约定写在
标签中)
<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
的区别?<div id="uniqueId">This is a unique elementdiv>
<p class="highlight">This is a paragraph with a classp>
<input type="text" name="username">
总体而言,ID和Class主要用于关联CSS样式,而Name主要用于标识表单字段,以便在表单提交时服务器能够识别和处理相应的数据。
HTML 系列教程
src
:指定图像的url(绝对路径/相对路径)
./文件名
)./
可省、上一级文件夹路径(../文件名
)width
:图像的宽度(像素 px/相对父元素的百分比 x%)height
:图像的高度(像素 px/相对父元素的百分比 x%)-
标题标签
水平线标签
超链接
herf
:指定资源访问的urltarget
:指定在何处打开资源链接
_self
:默认值,在当前页面打开_blank
:在空白页面打开css属性
text-decoration
:规定添加到文本的修饰,none表示定义标准的文本color
:定义文本的颜色
视频标签
音频标签
段落标签
/
加粗标签
CSS样式
line-height
:设置行高text-indent
:定义第一个行内容的缩进text-align
:规定元素中的文本的水平对齐方式在HTML中无论输入多少个空格,只会显示一个。可以用空格占位符: 
- 一行只显示一个
- 默认的宽度是父元素的宽度,高度默认由内容撑开
- 可以设置宽高
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可用设置宽高
表格标签
定义表格整体,可以包裹多个
- border:规定表格边框的宽度
- width:规定表格的宽度
- cellspacing:规定单元之间的空间
表格的行,可以包裹多个
表头单元格,默认字体加粗
表格单元格(普通)
表单标签
表单的总体
<form action="http://localhost:8080" method="post">form>
- action:跳转的网站、页面
- method:提交表单的方法
- get:在url后面拼接表单数据,比如:
?username=Tom&age=12
,url长度有限制,是默认方法
- post:在消息体中传递,参数大小无限制,更安全
⛳他们的区别
⛳api fox对应的用法
表单项
不同类型的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:
假设选中这个按钮,是传递name=value
也就是b=102
到后端中
标签为 input 元素定义标注(标记)。
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
标签的 for 属性应当与相关元素的 id 属性相同。
-
关联表单元素:
可以与表单元素关联,使得用户点击
文本时,关联的表单元素获得焦点。关联通过
的 for
属性与表单元素的 id
属性相匹配来实现。
示例:
<form action="" method="post">
<label for="username">用户名:<input type="text" id="username" name="username">label>
<input type="submit" value="提交">
form>
-
默认关联: 如果
内包含的表单元素是其唯一的子元素,且没有指定 for
属性,浏览器会默认关联这个
与其内部的表单元素。这种情况下,不需要额外的 for
属性。
示例:
<form action="" method="post">
<label>用户名:<input type="text" id="username" name="username">label>
<input type="submit" value="提交">
form>
假如,在某一个问卷调查中,需要单选性别,使用label标签,那么我们就不需要刻意的去点击圆形的单选框,而是可以选择点击“男”或者“女”就可以自动勾选当前的选项,使得用户的交互体验更好
<form action="http://localhost:8080" method="post">
<select name="select">
<option value="1">1option>
<option value="2">2option>
<option value="3">3option>
<option value="4">4option>
select>
form>
select中的具体的选项是用option标签,name定义在select处,value定义在option处
与input中text属性的区别
元素的 type
属性可以设置为 “text”,而
则是一个单独的元素,用于多行文本输入。以下是它们之间的一些主要区别:
- 输入方式:
用于单行文本输入。通常用于短文本字段,例如用户名、搜索框等。
用于多行文本输入。适用于用户需要输入大段文本的情况,例如评论、描述等。
- 大小调整:
的大小是固定的,可以通过 CSS 控制宽度,但高度通常不受控制,因为它是单行输入。
元素可以通过 rows
和 cols
属性或者通过 CSS 控制来调整其可见的行数和列数,因此可以更灵活地控制其大小。
- 默认值:
可以通过设置 value
属性来指定默认值。
可以在标签内包含文本内容,作为默认值显示在多行文本框中。