Las Nubes
0%

html（1）

Posted on Edited on

[TOC]

一，基础知识

1，html标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>

<body>

<!--标题-->
<h1>This is heading 1</h1>

<!--段落-->
<p>请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。</p>

<!--链接-->
<a href="http://www.w3school.com.cn">This is a link</a>

<!--水平线-->
<hr />    

<!--图片-->
<img src="w3school.jpg" width="104" height="142" />

</body>
</html>

2，html元素

开始标签 元素内容 结束内容
<p> This is a paragraph </p>
<a href=”default.htm” > This is a link </a>
<br />(定义换行)

特点：

  • 元素始于开始标签，终于结束标签
  • 元素可以具有空内容
  • 空元素以开始标签的结束而结束
  • 大多数html元素可具有属性
  • <p> 元素定义了 HTML 文档中的一个段落
  • <body> 元素定义了 HTML 文档的主体
  • <html> 元素定义了整个 HTML 文档

3，html属性

特点：

  • 以键值对形式出现
  • 总是在开始标签中规定
  • 始终为属性值加引号

例子：

1
<a href="http://www.w3school.com.cn">This is a link</a>

其中，href属性用于指定链接

4，html标题

  • 标题通过<h1>到<h6>等标签定义
  • 其中<h1>定义最大标题，<h6>定义最小标题

二，表单

1，表单

  • 表单用于收集用户输入

  • 包含input元素、复选框、单选按钮、提交按钮等。

  • 提交表单时，默认为GET方法

2，<input>元素

  • <input>元素根据不同type属性分为不同的形态
类型 描述
text 定义常规文本输入
radio 定义单选按钮输入
submit 提交表单

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<body>

<form>
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
<br><br>
<input type="submit" value="Submit">
</fieldset>
</form>

</body>
</html>

  • 若想要正确的提交，每个输入字段必须设置一个name属性
  • <fieldset>元素组合表单中相关数据
  • <legend>元素为<fieldset>指定标题

①InputType：checkbox

1
2
3
4
5
<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>

②InputType：url

1
2
3
4
<form>
  Add your homepage:
  <input type="url" name="homepage">
</form>