html属性
|
属性 |
描述 |
|
class |
为html元素定义一个或多个类名（classname）(类名从样式文件引入) |
|
id |
定义元素的唯一id |
|
style |
规定元素的行内样式（inline style） |
|
title |
描述了元素的额外信息 (作为工具条使用) |
html <head> 元素
<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（css），及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
html <title> 元素
<title> 标签定义了不同文档的标题。
<title> 在 html/xhtml 文档中是必须的。
<title> 元素:
定义了浏览器工具栏的标题
当网页添加到收藏夹时，显示在收藏夹中的标题
显示在搜索引擎结果页面的标题
html <base> 元素
<base> 标签描述了基本的链接地址/链接目标，该标签作为html文档中所有的链接标签的默认链接:
eg:
<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>
html <link> 元素
<link> 标签定义了文档与外部资源之间的关系。
<link> 标签通常用于链接到样式表:
eg:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
html <style> 元素
<style> 标签定义了html文档的样式文件引用地址.
在<style> 元素中你也可以直接添加样式来渲染 html 文档:
<head>
<style type="text/css">
body {/style>
</head>
html <meta> 元素
meta标签描述了一些基本的元数据。
<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
meta 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他web服务。
<meta> 一般放置于 <head> 区域
<meta> 标签- 使用实例
为搜索引擎定义关键词:
<meta name="keywords" content="html, css, xml, xhtml, javascript">
为网页定义描述内容:
<meta name="description" content="免费 web & 编程 教程">
定义网页作者:
<meta name="author" content="runoob">
每30秒钟刷新当前页面:
<meta http-equiv="refresh" content="30">
html head 元素
标签 描述
<head> 定义了文档的信息
<title> 定义了文档的标题
<base> 定义了页面链接标签的默认链接地址
<link> 定义了一个文档和外部资源之间的关系
<meta> 定义了html文档中的元数据
<script> 定义了客户端的脚本文件
<style> 定义了html文档的样式文件
html图像-图像标签<img>
<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 url 地址。
定义图像的语法是：
<img src="url" alt="some_text">
html 图像- alt属性
alt 属性用来为图像定义一串预备的可替换的文本。
替换文本属性的值是用户定义的。
<img src="boat.gif" alt="big boat">
在浏览器无法载入图像时，替换文本属性告诉读者他们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
html 图像- 设置图像的高度与宽度
height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。
属性值默认单位为像素:
<img src="pulpit.jpg" alt="pulpit rock" width="304" height="228">
提示: 指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏html页面的整体布局。
html 图像标签
标签 描述
<img> 定义图像
<map> 定义图像地图
<area> 定义图像地图中的可点击区域
1、矩形：(左上角顶点坐标为(x1,y1)，右下角顶点坐标为(x2,y2))
<area shape="rect" coords="x1,y1,x2,y2" href=url>
2、圆形：(圆心坐标为(x1,y1)，半径为r)
<area shape="circle" coords="x1,y1,r" href=url>
3、多边形：(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) ......)
<area shape="poly" coords="x1,y1,x2,y2 ......" href=url>
html 表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
eg:
（水平标题）
<tr>
<th>name</th>
<th>telephone</th>
<th>telephone</th>
</tr>
<tr>
<td>bill gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
（垂直标题）
<tr>
<th>first name:</th>
<td>bill gates</td>
</tr>
<tr>
<th>telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<th>telephone:</th>
<td>555 77 855</td>
</tr>
带标题
<caption>monthly savings</caption><!--标题内容-->
<tr>
<th>month</th>
<th>savings</th>
</tr>
<tr>
<td>january</td>
<td>$100</td>
</tr>
单元格跨两格（标题）
<th colspan="2">telephone</th>
定义边框的宽度
<table border="1">
定义单元格边距
<table border="1" cellpadding="10">
定义单元格间距
<table border="1" cellspacing="0">
html 表格标签
标签 描述
<table> 定义表格
<th> 定义表格的表头
<tr> 定义表格的行
<td> 定义表格单元
<caption> 定义表格标题
<colgroup> 定义表格列的组
<col> 定义用于表格列的属性
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚
html无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表使用 <ul> 标签
<ul>
<li>coffee</li>
<li>milk</li>
</ul>
html 有序列表
同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
列表项使用数字来标记。
<ol>
<li>coffee</li>
<li>milk</li>
</ol>
<ol start="50"><!--start用于定义列表开始数字-->
<li>coffee</li>
<li>tea</li>
<li>milk</li>
</ol>
html 自定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl>
<dt>coffee</dt>
<dd>- black hot drink</dd>
<dt>milk</dt>
<dd>- white cold drink</dd>
</dl>
<h4>大写字母列表：</h4>
<ol type="a">
<li>apples</li>
<li>bananas</li>
<li>lemons</li>
<li>oranges</li>
</ol>
大写字母列表：
a. apples
b. bananas
c.lemons
d. oranges
<h4>罗马数字列表：</h4>
<ol type="i">
罗马数字列表：
i.apples
ii.bananas
iii.lemons
iv.oranges
html 布局 - 使用<div> 元素
div 元素是用于分组 html 元素的块级元素。
html 表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签 <form> 来设置:
<form>
.
input 元素
.
</form>
例子：
<form action="">
username: <input type="text" name="user"><br>
password: <input type="password" name="password">
</form>
html 表单 - 输入元素
多数情况下被用到的表单标签是输入标签（<input>）。
输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：
文本域（text fields）
文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
密码字段
密码字段通过标签<input type="password"> 来定义:
<form>
password: <input type="password" name="pwd">
</form>
单选按钮（radio buttons）
<input type="radio"> 标签定义了表单单选框选项
<form>
<input type="radio" name="sex" value="male">male<br>
<input type="radio" name="sex" value="female">female
</form>
复选框（checkboxes）
<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>
提交按钮(submit button)
<input type="submit"> 定义了提交按钮.
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:
<form name="input" action="html_form_action.php" method="get">
username: <input type="text" name="user">
<input type="submit" value="submit">
</form>
简单的下拉列表。
<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>
带预选的下拉列表
<option value="fiat" selected>fiat</option>
按钮
<form action="">
<input type="button" value="hello world!">
</form>
文本框
<textarea rows="5" cols="30">
我是一个文本框。
</textarea>
提交
<form action="demo-form.php">
first name: <input type="text" name="firstname" value="mickey"><br>
last name: <input type="text" name="lastname" value="mouse"><br>
<input type="submit" value="提交">
</form>
<p>点击"提交"按钮，表单数据将被发送到服务器上的“demo-form.php”。</p>
html 框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
iframe语法:
<iframe src="url"></iframe>
该url指向不同的网页。
iframe - 设置高度与宽度
height 和 width 属性用来定义iframe标签的高度与宽度。
属性默认以像素为单位, 但是你可以指定其按比例显示 (如："80%")。
实例
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
iframe - 移除边框
frameborder 属性用于定义iframe表示是否显示边框。
设置属性值为 "0" 移除iframe的边框:
实例
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
html 脚本
javascript 使 html 页面具有更强的动态和交互性。
<script>
document.write("hello world!")
</script>
不支持 javascript 的浏览器会使用 <noscript> 元素中定义的内容（文本）来替代。
html 字符实体
html 中的预留字符必须被替换为字符实体。
一些在键盘上找不到的字符也可以使用字符实体来替换。
html 实体
在 html 中，某些字符是预留的。
在 html 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 html 源代码中使用字符实体（character entities）。
实体名称对大小写敏感！
显示结果 描述 实体名称 实体编号
空格
< 小于号 < <
> 大于号 > >
& 和号 & &
" 引号 " "
' 撇号 ' (ie不支持) '
html 统一资源定位器(uniform resource locators)
url 是一个网页地址。
url可以由字母组成，如"runoob.com"，或互联网协议（ip）地址： 192.68.20.50。大多数人进入网站使用网站域名来访问，因为 名字比数字更容易记住。
语法规则:
scheme://host.domain:port/path/filename
说明:
scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 runoob.com
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称
url 字符编码
url 只能使用 ascii 字符集.
来通过因特网进行发送。由于 url 常常会包含 ascii 集合之外的字符，url 必须转换为有效的 ascii 格式。
url 编码使用 "%" 其后跟随两位的十六进制数来替换非 ascii 字符。
url 不能包含空格。url 编码通常使用 + 来替换空格。
访问https://www.runoob.com/html/html-tutorial.html查看详细教程
如对本文有疑问， 点击进行留言回复！！
深入理解CSS background-blend-mode的作用机制
我要评论
网友评论