HTML
Hyper Text Markup Language
使用后缀.html
或者 .htm
可以使用任何的文本编辑软件进行编写
基本结构:
<html>
<head>
<title>My page</title>
</head>
<body>
This is my first homepage.
</body>
</html>
注释
<!-- -->
正则表达式
Tag
Tag: 使用 < >
包裹,通常为成对的出现,结束的要有 </..>
,文本就写在两个开始Tag和结束Tag之间
例如:<title> </title>
<title>My Page</title>
Paragraph
<p> </p>
包裹段落
<html>
<body>
<p>
This is the 1st paragraph
</p>
<p>
This is the 2nd paragraph
</p>
</body>
</html>
Heading
<h> </h>
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
Line Break
<br />
插入简单的换行符
添加一个行内间隔
<html>
<body>
<p>This paragraph has <br />
a line break here</p>
</body>
</html>
Horizontal Rule
<hr>
水平分割线
<html>
<body>
<p>This is a paragraph</p>
<hr>
<p>This is another paragraph</p>
<hr>
</body>
</html>
Tag 总结
字体效果
效果图:
符号表示
超链接
<a href="url">Text to be displayed</a>
例子:
<a href="first.html">This text</a> is a link to a page on this Web site
<a href="http://www.qmul.ac.uk/">Qmul</a> is a link to QMUL
在新的页面打开超链接
target = "_blank"
<a href=“http://www.qmul.ac.uk/”
target=“_blank”>Visit QMUL</a>
Target中的Value的描述
Value | Desription |
---|---|
_blank | Opens the linked document in a new window or tab |
_self | Opens the linked document in the same frame as it was clicked (this is default) |
_parent | Opens the linked document in the parent frame |
_top | Opens the linked document in the full body of the window |
framename | Opens the linked document in a named frame |
有超链接的图片
<p> Use an image as a link:
<a href=“linkpage.htm”><img border=“0”
src=“image.jpg” width=“65” height=“38”></a>
</p>
表格
基本格式:
- 每一行用一个
<tr> </tr>
标签隔开 - 每一行中的每一列在
<tr> </tr>
标签中用<td> </td>
隔开
例子:
<table border="“1”">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
背景颜色
在开始标签中使用 bgcolor = "red"
例如:<table border="1" bgcolor="red">
背景照片
在开始标签中使用 background = "图片地址"
例如:<table border="1" background="bg.jpg">
对齐方式
在开始标签中使用 align = "left"
有以下对其方式:
- left
- right
- center
功能性标签总结
列表
Unordered List:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
效果图:
- Coffee
- Tea
- Milke
Ordered List:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
效果图:
- Coffee
- Tea
- Milk
可以选择不同种类的ordered list
图像
<img>
,并且可以设置width
和height
<img src=“image.gif” width=“144” height=“50”>
设置该图像的标签
<alt>
<img src=“me.jpg” alt=“This is me”>
背景图片
写在其他标签内的图片
<body background=“background.jpg”>
背景颜色
bgcolor
-
数值可以是16进制的RGB,
#000000
-
可以是
rgb(0,0,0)
分别输入RGB的值 -
可以有预设的String代表的颜色
black
<body bgcolor=“#d0d0d0”>
文本语言
text = "color"
<body bgcolor=“#000000” text=“yellow”>
基本颜色表
用户输入 Form
HTML Form用来收集用户的各种输入,Form包含了各种支持用户输入的组件
- text fields, textarea fields, drop-down menus, radio buttons,
checkboxes …
最常用的标签为<input>
Form定义为:
<form>
<input>
<input>
</form>
Text field
定义type属性为text,输入的内容可见,默认长度为20
<form action=“”>
First name:
<input type=“text”
name=“firstname”>
<br>
Last name:
<input type=“text”
name=“lastname”>
</form>
The name is the identifier that is sent to the server when you submit the form.
Password field
type定位为"password"
,输入内容不可见
<form action=“”>
Username:
<input type=“text”
name=“user”>
<br>
Password:
<input type=“password”
name=“password”>
</form>
选择
Radio button
Select one of the choices.
<form>
<input type="radio"
name="sex"
value="male"> Male
<br>
<input type="radio"
name="sex"
value="female"> Female
</form>
Checkboxes
Select one or more options.
<form>
I have a bike:
<input type=“checkbox”
name=“vehicle”
value=“Bike”>
<br>
I have a car:
<input type=“checkbox”
name="vehicle"
value=“Car”>
<br>
I have an airplane:
<input type=“checkbox”
name=“vehicle”
value=“Airplane”>
</form>
Label
每一个都应该又一个label,这些标签定义了<input>
标签的作用
用户可以点击标签也可以点击按钮来实现功能
例如:
Action
action是form的一个标签
例子:当用户点击了“submit”按钮,包含内容的Form会被发送道另一个file
action属性定义了文件发送到何处,通常用于实现点击按钮后实现什么功能
把图片当作Submit 按钮
定义 type="image"
<input type="image" src="path to image" name="submit" />
默认情况下,图像类型是一个表单提交按钮。
选择栏
dropdown box
<option>
<form action=“”>
<select name=“cars”>
<option value=“volvo”>Volvo</option>
<option value=“saab”>Saab</option>
<option value=“fiat”>Fiat</option>
<option value=“audi”>Audi</option>
</select>
</form>
Fieldset
<fieldset>
<fieldset>
<legend>
Health information:
</legend>
<form action=“”>
Height <input type=“text” size=“3”>
Weight <input type=“text” size=“3”>
</form>
</fieldset>
大输入行
<textarea>
<textarea rows=“10” cols=“30”>
The cat was playing in the garden.
</textarea>
Button
<type = "button">
<form action=“”>
<input type=“button” value=“Hello world!”>
</form>
Button 与 Submit的区别
button: <input type="button" />
- 默认不做任何事
submit: <input type="submit">
- 点击时候会submit文件,可以通过Js更改
发送邮件例子
<form action="MAILTO:yourname@company.com" method="post" enctype="text/plain">
Name:<br />
<input type="text" name="name" size="20" />
<br />
Mail:<br />
<input type="text" name="mail" size="20" />
<br />
Comment:<br />
<input type="text" name="comment" size="40" />
<br /><br />
<input type="submit" value="Send" />
<input type="reset" value="Reset" />
</form>
name和id的区别
name属性伴随form一起submit,可以重复
id是每个页面内元素唯一的标识,唯一
<form id="“gender_form”">
<input type="radio" name="sex" value="male" /> Male
<br />
<input type="radio" name="sex" value="female" /> Female
</form>
HTML5
页面结构:
- Section: Generic section of a document or application.
- Nav: Section of a page that links to other pages.
- Div: Added to help style the document.
- Aside: Section of a page that consists of content related to the content around the aside element (e.g. the equivalent of a sidebar in printed typography).
- Footer: Typically contains information about its section.
CSS
在html中调用css
<input type="submit" name="submit" class="states" />
使用class
属性,value为css的class
默认值
对于<fieldset>
SVG
Scalable Vector Graphics
定义了图像在XML中的格式
无损的图片
<!DOCTYPE html>
<html>
<head><title>Embedding SVG in HTML5</title></head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;
stroke-width:5;
fill-rule:evenodd;">
</svg>
</body>
</html>