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

HTML快速入门
HTML概述
HTML基础语法
文档结构
超文本
什么是HTML
标记语法
元素
元素嵌套
属性和值
标准属性
注释
HTML文档的结构
文档类型声明
html元素
head元素
文档头部内容title
文档头部内容meta
body元素

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)]

基本标签用法
使用文本标记
图像和链接
表格
列表
文本与特殊字符
文本样式
标题元素hn
段落元素p
换行元素br
分区元素span和div
行内元素与块级元素
分隔线元素hr
URL
图像元素img
链接元素a
链接的表现形式
锚点
创建表格
表格的常用属性
不规则表格
列表的作用
有序列表ol
无序列表ul
列表嵌套

基本标签用法

使用文本标记

文本与特殊字符

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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表单及控件
表单概述
input元素
其它控件
表单的作用
表单元素form
表单控件
元素input
文本框与密码框
单选框和复选框
按钮
隐藏域和文件选择框
label元素
选项框
textarea元素

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样式表
CSS的作用
什么是CSS
CSS与HTML之间的关系
HTML属性与CSS样式的使用原则
使用CSS样式表的方式
内联方式使用CSS
内部样式表
外部样式表

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概述的全部内容,更多相关基本标签用法内容请搜索靠谱客的其他文章。

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

评论列表共有 0 条评论

立即
投稿
返回
顶部