HTML整理2

最新推荐文章于 2023-04-27 15:35:42 发布

食兔人

最新推荐文章于 2023-04-27 15:35:42 发布

阅读量317

点赞数

分类专栏：团队项目整理文章标签： HTML5

本文链接：https://blog.csdn.net/weixin_38312031/article/details/79066845

版权

团队项目同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

整理

21 篇文章 0 订阅

订阅专栏

HTML基本整理<2>

@[基本实例|html]

HTML基本整理2

HTML类

对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。
为相同的类设置相同的样式，或者为不同的类设置不同的样式

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>
London is the capital city of England. 
It is the most populous city in the United Kingdom, 
with a metropolitan area of over 13 million inhabitants.
</p>
</div> 
</body>
</html>

HTML布局

使用`<div>` 元素的 HTML 布局

<div> 元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位。

<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>
<div id="section">
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>
<div id="footer">
Copyright W3School.com.cn
</div>
</body>

<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px; 
}
#section {
    width:350px;
    float:left;
    padding:10px; 
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px; 
}
</style>

HTML脚本

<script> 标签用于定义客户端脚本，比如 JavaScript。
script 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。
必需的 type 属性规定脚本的 MIME 类型。
JavaScript 最常用于图片操作、表单验证以及内容动态更新。

<script type="text/javascript">
document.write("Hello World!")
</script>

HTML `meta`元素

元数据（metadata）是关于数据的信息。
<meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。
典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
<meta> 标签始终位于 head 元素中。
元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

HTML 字符实体

在 HTML 中，某些字符是预留的。
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）

显示结果描述	实体	名称	实体编号
	空格	` `	` `
<	小于号	`<`	`<`
>	大于号	`>`	`>`
&	和号	`&`	`&`
“	引号	`"`	`"`
‘	撇号	`' (IE不支持)`	`'`
￠	分（cent）	`¢`	`¢`
£	镑（pound）	`£`	`£`
¥	元（yen）	`¥`	`¥`
€	欧元（euro）	`€`	`€`
§	小节	`§`	`§`
©	版权（copyright）	`©`	`©`
®	注册商标	`®`	`®`
™	商标	`™`	`™`
×	乘号	`×`	`×`
÷	除号	`÷`	`÷`

HTML表单

HTML 表单用于搜集不同类型的用户输入
表单有变单元素： input 元素、复选框、单选按钮、提交按钮等等
- <form> 元素定义 HTML 表单
- <input> 元素是最重要的表单元素。
- <input> 元素有很多形态，根据不同的 type 属性
- <input type="text"> 定义用于文本输入的单行输入字段
- <input type="radio"> 定义单选按钮
- <input type="submit">定义用于向表单处理程序（form-handler）提交表单的按钮
- action 属性定义在提交表单时执行的动作
- method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）
- 如果要正确地被提交，每个输入字段必须设置一个name属性

HTML表单元素

`<select>` 元素（下拉列表）

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab" selected>Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

<option> 元素定义待选择的选项
selected 属性来定义预定义选项

`<textarea>` 元素定义多行输入字段（文本域）

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

`<button>` 元素定义可点击的按钮

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

HTML 输入类型

<input type="text">定义供文本输入的单行输入字段

<form>
 First name:<br>
<input type="text" name="firstname">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form>

<input type="password">定义密码字段

<form>
 User name:<br>
<input type="text" name="username">
<br>
 User password:<br>
<input type="password" name="psw">
</form>

<input type="submit">定义提交表单数据至表单处理程序的按钮

<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

<input type="radio"> 定义单选按钮

<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>

<input type="checkbox"> 定义复选框

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

<input type="button> 定义按钮

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

HTML5 增加了多个新的输入类型：
- color
- date
- datetime
- datetime-local
- email
- month
- number
- range
- search
- tel
- time
- url
- week

HTML Input 属性

value 属性规定输入字段的初始值
readonly 属性规定输入字段为只读（不能修改）
disabled 属性规定输入字段是禁用的
size 属性规定输入字段的尺寸（以字符计)
maxlength 属性规定输入字段允许的最大长度
HTML5 为 <input> 增加了如下属性：
- autocomplete
- autofocus
- form
- formaction
- formenctype
- formmethod
- formnovalidate
- formtarget
- height 和 width
- list
- min 和 max
- multiple
- pattern (regexp)
- placeholder
- required
- step

食兔人

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML整理2

HTML基本整理@[基本实例|html]HTML基本整理2HTML类HTML布局使用div 元素的 HTML 布局HTML脚本HTML meta元素HTML 字符实体HTML表单HTML表单元素select 元素下拉列表textarea 元素定义多行输入字段文本域button 元素定义可点击的按钮HTML 输入类型HTML Input 属性
复制链接

扫一扫

专栏目录