基本标签用法 Form标点及控件 CSS 概述HTML 快速入门基本标签用法Form表单及控件CSS概述

80 阅读 0 评论 53 点赞

我是靠谱客的博主俏皮牛排，这篇文章主要介绍基本标签用法 Form标点及控件 CSS 概述HTML 快速入门基本标签用法Form表单及控件CSS概述，现在分享给大家，希望可以做个参考。

HTML 快速入门

HTML 概述

超文本

• Web 是一个超文本文件的集合
• 超文本文件是 Web 的基本组成单元，也称为网页或HTML文档、Web页等，通常是以.html或.htm为后缀的文件
• Web页之间通过超文本中的超级链接组织在一起

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lxDDTWRR-1586243773038)(C:UsersJsckDesktoppython笔记pdf4.devweb1.基本标签用法 Form标点及控件 CSS 概述web1.png)]

什么是 HTML

• HTML（HyperText Markup Language）：超文本标记语言，一种纯文本类型的语言
    – 使用带有尖括号的“标记”将网页中的内容逐一标识出来
• 用来设计网页的标记语言
• 用该语言编写的文件，以 .html 或者 .htm 为后缀
• 由浏览器解释执行
• HTML 页面上，可以嵌套用脚本语言编写的程序段，如：VBScript，JavaScript

HTML 基础语法

标记语法

• HTML 用于描述功能的符号称为“标记”，比如 <p>、<h1>等
    – 标记在使用时必须使用尖括号括起来
    – 有封闭类型标记，也有非封闭类型的标记

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Tdz4rPAx-1586243773040)(C:UsersJsckDesktoppython笔记pdf4.devweb1.基本标签用法 Form标点及控件 CSS 概述web2.png)]

标记语法（续1）

• 封闭类型标记（也叫双标记）：必须成对出现
    – <标记>内容</标记>
• 封闭类型的标记必须成对出现
    – 如果一个应该封闭的标记没有被封闭，则会产生意料不到的错误

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R1VK9obe-1586243773040)(C:UsersJsckDesktoppython笔记pdf4.devweb1.基本标签用法 Form标点及控件 CSS 概述web3.png)]

标记语法（续2）

• 非封闭类型标记，也叫做空标记，或者单标记
    – <标记 />
    – 或者
    – <标记>
• 不能包含内容

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XFb31fiX-1586243773041)(C:UsersJsckDesktoppython笔记pdf4.devweb1.基本标签用法 Form标点及控件 CSS 概述web4.png)]

元素

• 元素，即标记
• 每一对尖括号包围的部分
    – 如 <body></body>包围的部分就叫做 body 元素
    – 元素就像是小标签，用于标识网页文档的不同部分
• 元素可以包含文本内容和其他元素，也可以是空的，比如前面所述的空标记

元素嵌套

• 元素之间可以相互嵌套，形成更为复杂的语法
• 在嵌套元素时需要注意标记的嵌套顺序

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TTPuvtpE-1586243773041)(C:UsersJsckDesktoppython笔记pdf4.devweb1.基本标签用法 Form标点及控件 CSS 概述web5.png)]

属性和值

• 属性用来修饰元素
    – 属性的声明必须位于开始标记里
    – 一个元素的属性可能不止一个，多个属性之间用空格隔开
    – 多个属性之间不区分先后顺序
• 每个属性都有值
    – 属性和属性的值之间用等号连接
    – 属性的值包含在引号中

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GnQFj9EN-1586243773042)(C:UsersJsckDesktoppython笔记pdf4.devweb1.基本标签用法 Form标点及控件 CSS 概述web6.png)]

标准属性

• 每个元素都有自己所特有的属性
• 有些属性是绝大多数元素都支持的属性，称为标准属性 （或通用属性） 
    – id
    – title
    – class
    – style

注释

• 为代码添加适当的注释是一种良好的编码习惯
• 注释只在编辑文档情况下可见，在浏览器展示页面时并不会显示
• 添加注释的语法如下：

<!--注释部分-->
<h1>这是标题</h1 >

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UzgXR9Kv-1586243773042)(C:UsersJsckDesktoppython笔记pdf4.devweb1.基本标签用法 Form标点及控件 CSS 概述web7.png)]

HTML 文档片段

• 【参见COOKBOOK】

文档结构

HTML 文档的结构

• 文档类型声明
• html 页面
    – 文件头：<head></head>
    – 文档主体部分：<body></body>
文档类型声明

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RqTYGJS3-1586243773043)(C:UsersJsckDesktoppython笔记pdf4.devweb1.基本标签用法 Form标点及控件 CSS 概述web8.png)]

文档类型声明

• 在文档的起始用DOCTYPE声明指定版本和风格 
	– 让浏览器清楚文档的版本、类型和风格 
• Strict DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
• Transitional DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
• Frameset DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
• HTML 5 
<!DOCTYPE	HTML>

html元素

• 整个文档的包含元素
    – 在DOCTYPE的文档类型声明之后
    – 按照严格版本（Strict XHTML 1.0），起始的 <html> 标记中必须包含命名空间标识符
• 有两个子元素
    – <head>：页面的头部内容
    – <body>：页面的主体内容

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7gXMVnTS-1586243773044)(C:UsersJsckDesktoppython笔记pdf4.devweb1.基本标签用法 Form标点及控件 CSS 概述web9.png)]

head元素

• <head> 元素用于为页面定义全局信息
    – 所有其他头元素的容器
    – 紧跟在起始标签 <html> 之后
• 可包含
    – title、meta、script、style、link等

<head>
    <title>HTML 文档</title>
    <meta name="keywords" content="html,css" />
    <script type="javascript"></script>
    <style type="text/css"></style>
</head>

文档头部内容–title

• 标题元素 <title></title> 用于为文档定义标题
    – 标题元素的内容出现在浏览器顶部
    – 没有属性
    – 必须出现在 <head> 元素中
    – 一个文档只能有一个标题元素

<!DOCTYPE HTML>
<html>
    <head>
        <title>我的第一个HTML页面</title>
    </head>
    <body>
    </body> 
</html>

文档头部内容 - - meta

• 元数据元素 <meta>用于定义网页的基本信息
• 为空标记
• 常用属性有：content、http-equiv

<head>
    <title>HTML 文档</title>
    <meta http-equiv="content-type" 
            content="text/html;charset=utf-8" />
    <meta name="keywords" content="html,css" />
</head>

body元素

• <body> 元素出现在 <head> 元素之后，包含网页要显示给读者的内容，称为主体内容
• 可以包含除了html、head外所有元素

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YwN7rkKj-1586243773045)(C:UsersJsckDesktoppython笔记pdf4.devweb1.基本标签用法 Form标点及控件 CSS 概述web10.png)]

基本标签用法

使用文本标记

文本与特殊字符

• 文本是网页上的重要组成部分
    – 直接书写的文本会用浏览器默认的样式显示
    – 包含在标记中的文本则会被显示为标记所拥有的样式
• 空格折叠
    – 多个空格或制表符压缩成单个空格，即只显示一个空格
• 特殊字符（如空格），需要进行转义（使用字符实体）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gGt2cg2t-1586243773045)(C:UsersJsckDesktoppython笔记pdf4.devweb1.基本标签用法 Form标点及控件 CSS 概述web11.png)]

文本样式

• 文本样式的作用是对文本进行修饰，如加粗、倾斜等

<b>粗体</b>文本 
<i>斜体</i>文本
<u>下划线</u>文本
<s>删除线</s>文本
<sub>下标</sub>文本
<sup>上标</sup>文本

标题元素

• 标题元素让文字以醒目的方式显示，往往用于文章的标题
• 基本语法：<h#> ... </h#>
– #=1, 2, 3, 4, 5, 6
– 从<h1>到<h6>，即 标题1-标题6

<h1>h1 text</h1>
<h2>h2 text</h2>

段落元素 p

• <p> 元素提供了结构化文本的一种方式
• <p> 元素中的文本会用单独的段落显示
    – 与前后的文本都换行分开
    – 添加一段额外的垂直空白距离，作为段落间距
    – 常用属性：align

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YvM1pRRA-1586243773046)(C:UsersJsckDesktoppython笔记pdf4.devweb1.基本标签用法 Form标点及控件 CSS 概述web12.png)]

换行元素

• 使用 <br>元素在任何地方创建手工换行
– 空标记

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1gdiW6Jt-1586243773046)(C:UsersJsckDesktoppython笔记pdf4.devweb1.基本标签用法 Form标点及控件 CSS 概述web13.png)]

分区元素span和div

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wUcZlIeV-1586243773047)(C:UsersJsckDesktoppython笔记pdf4.devweb1.基本标签用法 Form标点及控件 CSS 概述web14.png)]

行内元素与块级元素

• 块级元素 
    – 默认情况下，块级元素会独占一行，即元素前后都会自动换行
    – 如：<p>、<div>、<hn>
• 行内元素
    – 不会换行，可以和其他行内元素位于同一行
    – 如：<span>、<b>、<i>、<u>

图像和链接

URL

• URL (Uniform Resource Locator) ：统一资源定位器， 用来标识网络中的任何资源
    – 文本、图片、音视频文件，段落，或其他超文本
• 即路径，指从当前位置到目标位置所经过的路线
• Web 页面常用 URL 形式：
    – 绝对路径
    – 相对路径

图像元素img

• 使用 <img> 元素将图像添加到页面
    – 空标记
• 必须属性：src
• 常用属性：width、height

<img width="100" src="image/rose.jpg" />

链接元素 a

• 使用 <a> 元素创建一个超级链接，语法如下： 
• <a href="" target="">文本</a>
    – href 属性：链接 URL
    – target 属性：目标，可取值为 _blank、_self 等 
    – name 属性：锚点名称

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O7ItsPZB-1586243773047)(C:UsersJsckDesktoppython笔记pdf4.devweb1.基本标签用法 Form标点及控件 CSS 概述web15.png)]

链接的表现形式

• 目标文档为下载资源
    <a href="DAY02.zip">下载</a>
• 电子邮件链接
    <a href="mailto:tarena@tarena.com.cn">联系我们</a>
• 返回页面顶部的空链接
    <a href="#">...</a>
• 链接到JavaScript
    <a href="javascript : …">JS 功能</a>

锚点

• 锚点是文档中某行的一个记号
    – 用于链接到文档中的某个位置
• 使用方式
    – 1、定义锚点
        <a name=”anchorname1”>锚点一</a>
    – 2、链接到锚点：在锚点名前加上#
        <a href="#anchorname1">...</a>
        	如果文本/图像与锚点存在同一页面
        <a href="页面URL#anchorname1">...</a>
        	如果文本/图像与锚点存在不同页面

锚点（续1）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DF3oSHv9-1586243773048)(C:UsersJsckDesktoppython笔记pdf4.devweb1.基本标签用法 Form标点及控件 CSS 概述web16.png)]

表格

创建表格

• 定义表格：使用成对的 <table></table> 标记
• 创建表行：使用成对的 <tr></tr> 标记
• 创建单元格：使用成对的 <td></td> 标记

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GaaIOChX-1586243773048)(C:UsersJsckDesktoppython笔记pdf4.devweb1.基本标签用法 Form标点及控件 CSS 概述web17.png)]

表格的常用属性

• <table>元素
    – width，设置表格宽度
    – height，设置表格高度
    – align，设置表格对齐方式(left|center|right)
    – border，设置表格边框宽度
    – cellpadding，设置内边距(单元格边框与内容之间的距离)
    – cellspacing，设置外边距(单元格之间的距离)
    – bgcolor，设置表格背景颜色

表格的常用属性（续1）

• <tr>元素
    – align，设置水平对齐方式(left|center|right) 
    – valign，设置垂直对齐方式(top|middle|bottom)
• <td>元素
    – align，设置水平对齐方式(left|center|right)
    – valign，设置垂直对齐方式(top|middle|bottom)
    – width，设置宽度
    – height，设置高度
    – colspan，设置单元格跨列
    – rowspan，设置单元格跨行

不规则表格

• 设置单元格 <td> 的跨行或者跨列属性
• 跨列：colspan
    – 水平方向延伸单元格，值为一正整数，代表此单元格水平延伸的单元格数
• 跨行：rowspan
    – 垂直方向延伸单元格，值为一正整数，代表此单元格垂直延伸的单元格数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ejELHLof-1586243773049)(C:UsersJsckDesktoppython笔记pdf4.devweb1.基本标签用法 Form标点及控件 CSS 概述web18.png)]

列表

列表的作用

• 列表是指将具有相似特征或者具有先后顺序的几行文字 进行对齐排列

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vhcaMuA8-1586243773049)(C:UsersJsckDesktoppython笔记pdf4.devweb1.基本标签用法 Form标点及控件 CSS 概述web19.png)]

• 所有的列表都由列表类型和列表项组成
    – 列表类型：有序列表<ol>和无序列表<ul>
    – 列表项：<li>，用于指示具体的列表内容

有序列表 ol

• <ol> 元素编写有序列表，用于列出页面上有特定次序的一些项目
• <ol> 元素中只能包含列表项元素 <li>
    <ol type="列表类型" start="起始编号">
        <li>…</li>
        <li>…</li>
        …
    </ol>
• type 属性值
    – 1，数字(默认)
    – a，小写字母
    – A，大写字母
    – i，小写罗马数字
    – I，大写罗马数字

有序列表（续1）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6QXeUTQj-1586243773050)(C:UsersJsckDesktoppython笔记pdf4.devweb1.基本标签用法 Form标点及控件 CSS 概述web20.png)]

无序列表 ul

• <ul> 元素表示无序列表，用于列出页面上没有特定次序的一些项目 
• <ul> 元素中只能包含具体的列表项元素 <li>
    <ul type="列表类型" >
        <li>…</li>
        <li>…</li>
        …
    </ul>
• type 属性值
    – disc，实心圆(默认)
    – circle，空心圆
    – square，实心矩形

无序列表（续1）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B2G7Endy-1586243773050)(C:UsersJsckDesktoppython笔记pdf4.devweb1.基本标签用法 Form标点及控件 CSS 概述web21.png)]

列表嵌套

• 将列表元素嵌套使用，可以创建多层列表
    – 常用于创建文档大纲、导航菜单等

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f6eNo3vp-1586243773051)(C:UsersJsckDesktoppython笔记pdf4.devweb1.基本标签用法 Form标点及控件 CSS 概述web22.png)]

Form表单及控件

表单概述

表单的作用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v5xM0UG9-1586243773051)(C:UsersJsckDesktoppython笔记pdf4.devweb1.基本标签用法 Form标点及控件 CSS 概述web23.png)]

表单的作用（续1）

• 表单用于显示、收集信息，并提交信息到服务器
• 表单有两个基本部分
    – 实现数据交互的可见的界面元素，比如文本框或按钮
    – 提交后的表单处理
• 界面元素
    – 使用 <form> 元素创建表单
    – 在 <form> 元素中添加其他表单可以包含的控件元素

表单元素 form

• 定义表单：使用成对的 <form></form> 标记
• 主要属性
    – action：定义表单被提交时发生的动作，通常包含服务方脚本的URL（比如JSP、PHP）
    – method：指出表单数据提交的方式，取值为 get 或者post
    – enctype：表单数据进行编码的方式 – name：表单名称

表单控件

• 表单可以包含很多不同类型的表单控件
• 表单控件元素是包含在表单元素中具有可视化外观的HTML元素，用于访问者输入信息
• 表单控件元素有
    – input元素：文本输入控件、按钮、单选和复选按钮、选项 框、文件选择框和隐藏控件等
    – textarea元素
    – select和option元素
    – 其他元素

input 元素

元素 input

• <input> 元素用于收集用户信息
• 该元素是一个单标记，语法为：<input />
• 主要属性
    – type：根据不同的 type 属性值，可以创建各种类型的输 入字段，比如文本框、复选框等
    – value：控件的数据
    – name：控件的名称
    – disabled：禁用控件

文本框与密码框

• 文本框：<input type =“text” />
• 密码框：<input type =“password”/>
• 主要属性
    – name：名称
    – value ：由访问者自由输入的任何文本
    – maxlength ：限制输入的字符数
    – readonly ：设置文本控件只读

文本框与密码框（续1）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1LgrCpaC-1586243773051)(C:UsersJsckDesktoppython笔记pdf4.devweb1.基本标签用法 Form标点及控件 CSS 概述web24.png)]

单选框和复选框

• 单选框： <input type=“radio”/>
• 复选框： <input type=“checkbox” />
• 主要属性
    – name：设置名称，并用于分组，一组单选框或者复选框的名称必须相同
    – value：文本，当提交 form 时，如果选中了此单选按钮，那么 value 就被发送到服务器
    – checked：设置默认被选中

单选框和复选框（续1）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TeVe351k-1586243773052)(C:UsersJsckDesktoppython笔记pdf4.devweb1.基本标签用法 Form标点及控件 CSS 概述web25.png)]

按钮

• 提交按钮： <input type=“submit”/>
    – 传送表单数据给服务器端或其它程序处理
• 重置按钮： <input type=“reset” />
	– 清空表单的内容并把所有表单控件设置为最初的默认值
• 普通按钮： <input type=“button” />
	– 用于执行客户端脚本
• 主要属性
    – name：名称
    – value：按钮的标题文本

隐藏域和文件选择框

• 隐藏域： <input type=“hidden”/>
    – 在表单中包含不希望用户看见的信息
    – name 属性：名称
    – value 属性：值
• 文件选择框： <input type=“file” />
    – name 属性：名称

其他控件

label 元素

• 语法： <label>文本</label>
• 主要属性：
    – for：表示与该元素相联系的控件的 ID 值
• 作用：
    – 将文本与控件联系在一起后，单击文本，效果就同单击控件一样

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-44Vct3ds-1586243773053)(C:UsersJsckDesktoppython笔记pdf4.devweb1.基本标签用法 Form标点及控件 CSS 概述web26.png)]

选项框

• 两种：下拉选项框和滚动列表
• <select>：创建选项框
    – name：选项框命名
    – size：大于 1 ，则为滚动列表
    – multiple：设置多选
• <option>：选项
    – value：选项的值
    – selected：预选中

选项框（续1）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pgNtodao-1586243773053)(C:UsersJsckDesktoppython笔记pdf4.devweb1.基本标签用法 Form标点及控件 CSS 概述web27.png)]

textarea 元素

• 多行文本输入框
	– <textarea>文本</textarea>
• 主要属性：
    – name：名称
    – cols：指定文本区域的列数
    – rows：指定文本区域的行数
    – readonly：只读
多行文本框：<br />
<textarea name="txtInfo" rows="4" cols="20"></textarea>

CSS概述

CSS介绍

CSS 的作用

• 查看如下代码
<body bgcolor="silver" text="blue"> 
    <h2>h2 text</h2> 
    <hr color="red" />
    Some text here.
</body>
如果使用 HTML 标记中的属性来定义样式，各元素对于样式的属性定义各不相同！

CSS 的作用（续1）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Wt2e8BEm-1586243773054)(C:UsersJsckDesktoppython笔记pdf4.devweb1.基本标签用法 Form标点及控件 CSS 概述web28.png)]

CSS 的作用（续2）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OAGwldPF-1586243773054)(C:UsersJsckDesktoppython笔记pdf4.devweb1.基本标签用法 Form标点及控件 CSS 概述web29.png)]

什么是 CSS

• CSS（Cascading Style Sheets）：层叠样式表，又叫级联样式表，简称样式表
• 用于 HTML 文档中元素的样式定义
    – 实现了将内容与表现分离
    – 提高代码的可重用性和可维护性

CSS 与 HTML 之间的关系

• HTML 用于构建网页的结构
• CSS 用于构建 HTML 元素的样式
• HTML 是页面的内容组成，CSS 是页面的表现

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9eQAvegC-1586243773055)(C:UsersJsckDesktoppython笔记pdf4.devweb1.基本标签用法 Form标点及控件 CSS 概述web30.png)]

HTML 属性与 CSS 样式的使用原则

• W3C 建议尽量使用 CSS 样式取代 HTML 属性
    – 实现内容和表现的分离
    – 如果为 HTML 所特有的属性，则使用 HTML 属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZX3g4cip-1586243773055)(C:UsersJsckDesktoppython笔记pdf4.devweb1.基本标签用法 Form标点及控件 CSS 概述web31.png)]

使用 CSS 样式表

使用 CSS 样式表的方式

• 内联方式
    – 样式定义在单个的 HTML元素中
• 内部样式表
    – 样式定义在 HTML 页的头元素中
• 外部样式表
    – 将样式定义在一个外部的 CSS 文件中（.css 文件）
    – 由 HTML 页面引用样式表文件

内联方式使用 CSS

• 样式定义在 HTML 元素的标准属性 style 里
• CSS 语法
    – 只需要将分号隔开的一个或者多个属性/值对作为元素的style 属性的值
    – 属性和属性值之间用：连接
    – 多对属性之间用；隔开

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1873L7Q9-1586243773055)(C:UsersJsckDesktoppython笔记pdf4.devweb1.基本标签用法 Form标点及控件 CSS 概述web32.png)]

内部样式表

• 样式表规则位于文档头元素中的 <style> 元素内
    – 在文档的 <head> 元素内添加 <style> 元素
    – 在 <style> 元素中添加样式规则

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MuyqWUw1-1586243773056)(C:UsersJsckDesktoppython笔记pdf4.devweb1.基本标签用法 Form标点及控件 CSS 概述web33.png)]

内部样式表（续1）

• 在 <style> 元素中添加样式规则
    – 可以定义多个样式规则
    – 每个样式规则有两个部分：选择器和样式声明
• 选择器：决定哪些元素使用这些规则
• 样式声明：一对大括号，包含一个或者多个属性/值对

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HDaEQCDi-1586243773056)(C:UsersJsckDesktoppython笔记pdf4.devweb1.基本标签用法 Form标点及控件 CSS 概述web34.png)]

外部样式表

• 第一步：创建一个单独的样式表文件用来保存样式规则 
    – 一个纯文本文件，文件后缀为 .css
    – 该文件中只能包含样式规则 
    – 样式规则由选择器和样式声明组成

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3mGURDMo-1586243773057)(C:UsersJsckDesktoppython笔记pdf4.devweb1.基本标签用法 Form标点及控件 CSS 概述web35.png)]

外部样式表（续1）

• 第二步：在需要使用该样式表文件的页面上，使用<link> 元素链接需要的外部样式表文件
    – 在文档的 <head> 元素内添加 <link> 元素

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JNgAlZgM-1586243773057)(C:UsersJsckDesktoppython笔记pdf4.devweb1.基本标签用法 Form标点及控件 CSS 概述web36.png)]

使用 CSS 样式

• 【参见 COOKBOOK】
    – 1、使用内联样式为 <p> 元素设置样式
    – 2、使用内部样式表为 <h1> 元素设置样式
    – 3、使用外部样式表为 <h2> 元素设置样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zgBE11gE-1586243773058)(C:UsersJsckDesktoppython笔记pdf4.devweb1.基本标签用法 Form标点及控件 CSS 概述web37.png)]

最后

以上就是俏皮牛排最近收集整理的关于基本标签用法 Form标点及控件 CSS 概述HTML 快速入门基本标签用法Form表单及控件CSS概述的全部内容，更多相关基本标签用法内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：web
浏览次数：80 次浏览
发布日期：2024-06-10 11:10:01
本文链接：https://www.kaopuke.com/article/k-p-k_13_u_7_o_22_fy_14__23__14_5.html