全面介绍HTML的语法！轻松写出网页
文章目录
- heading(标题)
- paragraph(段落)
- link(超链接)
- image
- map(映射)
- table(表格)
- list(列表)
- layout(分块)
- form(表单)
- 更多输入:
- datalist
- autocomplete
- autofocus
- multiple
- novalidate
- pattern
- placeholder
- required
- head(首部)
- title
- base
- link
- style
- meta
- script
- noscript
- iframe
HTML，即Hypertext Markup Language(超文本标记语言), 是网页显示的核心语言.
HTML中最重要的要素是tag(标签). 所有的关键词都被一组标签包含.
<!doctype html>
<html class="no-js" lang="">
<body> <h1>My First Heading</h1> <p>My first paragraph.</p>
</body>
</html>
例如<p>和</p>, 分别标志着内容的开始和结束.
浏览器通过HTML tag对网页内容进行解析, 并显示成我们看到的样子.
HTML 文档 = 网页
Tag作用介绍:
heading(标题)
<h1>,<h2>,...,<h6>
paragraph(段落)
<p>
link(超链接)
<a>
用href指定跳转的链接
<a href="http://www.w3school.com.cn/>访问W3School</a>
标签之间的内容是显示在页面上的文字
image
<img>
<img src="iron.png" alt="Yellow Star" width="192" height="192">
-
src: 图片的路径
-
alt: 图片加载失败时显示的文字
-
width, height: 长,宽
在原生HTML中, 长宽用字符串表示
map(映射)
<map>和<area>配套使用
<img src="./img/life.png" alt="Life" usemap="#lifemap" width="650" height="451">
<map name="lifemap"> <area shape="rect" coords="10,208,155,338" alt="AirPods" href="./airpods.html"> <area shape="rect" coords="214,65,364,365" alt="iPhone" href="./iPhone.html"> <area shape="circle" coords="570,291,75" alt="Coffee" href="./coffee.html">
</map>
<map>:
- name: 映射的名字
<area>: - shape: 区域的形状
- coords: 坐标
- rect: 左下角和右上角
- circle: 中心, 半径
- href: 点击后跳转到的页面
table(表格)
<table>
<th> (table heading)
<tr> (table row)
<td> (table data)
list(列表)
<ul> 无序列表
<ol> 有序列表
<li> 列表中的每一项(包括无序和有序列表)
<dl> 定义列表
<dt> term(术语)
<dd> description(解释)
layout(分块)
<div>
<div id = "nav">London<br>Paris<br>Tokyo<br>
</div>
<br> 换行符
div id:
- header 标题
- nav 导航栏
- section 章节部分
- footer 脚注
form(表单)
<form action="404.html" method="GET"> User name:<br> <input type="text" name="username"> User password:<br> <input type="password" name="psw"> <input type="radio" name="sex" value="male" checked>Male <input type="radio" name="sex" value="female">Female <input type="checkbox" name="vehicle" value="Bike">I have a bike <input type="checkbox" name="vehicle" value="Car">I have a car <input type="button" onclick="alert('Hello World!')" value="Click Me!"> <input type="submit" value="Submit">
</form>
form:
- action: 表单提交时将数据发送到的目标页面
- method: 数据传输方式
<input>: 输入框
type属性:
- text: 文本输入框
- name: 标识名称, 用来通过该名称检索输入的值
- password: 密码输入框，输入的内容将被掩码，用于输入密码等敏感信息。
- radio: 单选按钮,
name属性相同的按钮属于同一组- value: 选中的值
checked: 默认选中
- checkbox: 复选框
- button: 按钮
- onclick: 按下按钮后触发的事件.
在本例中是弹出一个警示框 - value: 按钮显示的文字
- submit: 提交, 用于提交表单数据到服务器(
axtion属性指定的目标页面)
- submit: 提交, 用于提交表单数据到服务器(
- onclick: 按下按钮后触发的事件.
更多输入:
- number
<form> Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5" step="2" value="3">
</form>
- date
<form>
Date:
<input type="date" name="bday" min="2000-01-02"><br>
Month:
<input type="month" name="bday" min="2000-01-02"><br>
Week:
<input type="week" name="bday" min="2000-01-02"><br>
Time:
<input type="time" name="bday" min="2000-01-02"><br>
Date & Time:
<input type="datetime-local" name="bday" min="2000-01-02"><br>
</form>
- color
<input type="color" name="favcolor">
- range
<input type="range" name="points" min="0" max="10" step="2" value="6">
- emial, url
会检查格式
datalist
<select>, <option>
<label> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select>
</label>
label: 标签
autocomplete
规定form或input域具有自动完成功能
autofocus
域自动获得焦点
multiple
域中可以输入多个值
novalidate
提交表单时不验证form或input域
pattern
用于验证input域的模式
<input type="text" id="fname" name="fname" pattern="[A-Z]{3}" title="3 letters">
其中pattern规定的是正则表达式
placeholder
域期待的值
required
非空
<input type="text" id="fname" name="fname" required="required">
head(首部)
包含有Script(页面脚本), CSS(样式表), metadata(元数据)
| 标签 | 描述 |
|---|---|
| <head> | 定义关于文档的信息 |
| <title> | 定义文档标题 |
| <base> | 定义页面上所有链接的默认地址或默认目标 |
| <link> | 定义文档域外部资源之间的关系 |
| <meta> | 定义关于HTML脚本的元数据 |
| <script> | 定义客户端脚本 |
| <style> | 定义文档的样式信息 |
title
<title>Examples of HTML5</title>
base
<head><base href="http://www.w3school.com.cn/images/" /> <base target="_blank" />
</head>
link
<head> <link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
style
<head> <style type="text/css"> body {background-color:yellow} p {color:blue} </style>
</head>
body: 文档背景颜色
p: 段落文字颜色
meta
不会显示在页面上,但是被机器读取
meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
<head> <meta name="description" content="Free Web tutorials on HTML, CSS, XML" /> <meta name="keywords" content="HTML, CSS, XML" /> <meta charset="UTF-8"/></head>
script
使用javaScript脚本可以直接更改页面
如
<p id="demo"></p>
<script> document.getElementById("demo").innerHTML = "Hello JavaScript!"; document.getElementById("demo").style.fontSize = "25px"; document.getElementById("demo").style.color = "red"; document.getElementById("demo").style.backgroundColor = "yellow";
</script>
noscript
替代内容,显示给浏览器中禁用了脚本的用户
iframe
Inline Frame, 内联框
<iframe src="http://www.w3school.com.cn/example/html/demo_iframe.html" name="iframe_a"></iframe>
当然,这些都是最原生的HTML语法. 现在使用的HTML5增加了一下特色:
- canvas(画布)
- video and audio(视频\音频)
- local storage
- Application Cache(应用程序缓存)
- server-sent event(服务器发射事件)
- SVG(Scalable Vector Graphics, 可变向量图)
内容过于丰富,下次再介绍.