html_html2048csdn-CSDN博客

本文链接：https://blog.csdn.net/zsx157326/article/details/51476434

html

HTML超文本标记语言（HyperText Markup Language）
作用：把网页标记为各种元素。表明文档的结构，以便能够正确显示它们的内容。
注释：

<!--...-->

编写元则

1.元素必须被关闭，并且<br /> 应该在“/”符号前添加一个额外的空格，来和当今的浏览器相兼容。
2.元素名和属性名必须用小写
3.属性值必须加引号
4.属性不能简写，<input checked>是错误的，<input checked=“checked”>是正确的。

基本框架

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
    </body>
</html>

<!DOCTYPE html>

<!DOCTYPE html>用来定义文档类型，告知浏览器使用了哪种html版本。位于文档最前边。

<html>

<html>用来告知浏览器这是一个html文档，是文档中最外层的元素。

<head>

<head>是所有头部元素的容器，必须包含文档的标题（title），还可包含<meta>,<link>,<script>,<style>。

<title>

<title>定义文档的标题。

<meta>

属性

charset:定义文档的字符编码。IANA 字符集
name:把content属性关联到一个名称。常用值，desctiption(规定页面的描述，搜索引擎会把这个描述显示在搜索结果中)；keywords,规定一个逗号分隔的关键词列表（告诉搜索引擎页面是与什么相关的）
http-equiv ：把content属性关联到http头部。
content：定义与name属性相关的元信息。

<meta charset="gbk" />
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!">
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东">

<link>

属性

href:定义被链接文档的位置
rel:必须。定义当前文档与被链接文档之间的关系。
type：规定被链接文档的MIME类型。

<link href="css/default.css" type="text/css" rel="stylesheet">

<script>

属性

type：规定脚本的MIME类型。
src：规定外部脚本的URL。

<style>

属性

type：规定样式表MIME类型。

<body>

<body>定义文档的主体。

链接与图表标签

<a>

<a>定义超链接，用于从一个页面链接到另一个页面。
./ 表示当前路径
../ 表示当前路径的父路径
把连接指向一个文件，就成了下载连接。

属性

href:规定链接的目标URL。
target：规定在何处打开URL。默认在本页。值为”_blank”时在新窗口打开被链接文档。
id：规定锚的名称。

在新的浏览器窗口打开链接
<a href="www.baidu.com" targe="_blank">百度</a>
使用锚跳转到同一页面的不同位置
<a id="top">顶部，底部链接可以跳到这儿</a>
<a href="#top">链接的顶部</a>
创建电子邮件链接
<a href="mailto:15732621728@163.com">send e-mail</a>

<img>

<img>定义html页面中的图像。

属性

alt：规定图像的替代文本。
src：规定显示图像的URL。
height：规定图像的高度。
width：固定图像的宽度。

显示的是个小图片，点击之后变成大图片
<a href="1.jpg"><img src="1_small.jpg" width="600" /></a>

列表标签

无序列表

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

有序列表

<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>

自定义列表

<dl>
    <dt></dt>
        <dd></dd>
    <dt></dt>
        <dd></dd>
    <dt></dt>
        <dd></dd>
</dl>

表单标签

<form>

<form>用于创建供用户输入的表单。包含以下的表单元素input，button，textarea，select，option，label。

属性

action：规定当提交表单时向何处发送表单数据。
method：规定用户发送表单数据的http方法。get，将表单数据以名称/值得形式附加到URL中，适用于非安全数据。post，将表单数据附加到http请求的body(数据不显示在URL中)。
name:规定表单的名称。
target:规定在何处打开action URL。_top

<input>

<input>规定了用户可以在其中输入数据的输入字段。输入字段可通过多种方式改变，取决于type属性。

属性

checked：规定在页面加载时应该被预先选定的input元素（只针对checkbox或radio）
name:规定input元素的名称。
value：规定input元素value的值。
type：规定要显示的input元素的类型。
maxlength:设置字符串长度。

type属性值

button：定义可点击的按钮，自己定义功能。

<input type="button" value="Click me" onclick="msg()" />

checkbox:复选框。

<input type="checkbox" name="city" value="beijing" />北京
<input type="checkbox" name="city" value="tianjin" />天津

file:定义文件选择字段和 “浏览…” 按钮，供文件上传。

Select a file: <input type="file" name="img" />

hidden:定义隐藏字段，隐藏字段对于用户是不可见的。隐藏字段常常存储默认值，或者由 JavaScript 改变它们的值

<input type="hidden" name="country" value="Norway" />

password:定义密码字段（密码字段中的字符会被遮蔽）

<input type="password" name="pwd" />

radio:单选框,name要相同

<input type="radio" name="gender" value="male" /> Male
<input type="radio" name="gender" value="female" /> Female

reset：定义重置按钮（重置所有表单值为默认值）

<input type="reset" />

submit:定义叫按钮。

<input type="submit" />

text:定义单行文本输入框。

First name: <input type="text" name="fname">

<select>

<select>用来创建下拉列表。

属性

name:定义下拉列表的名称。
size：规定下拉列表可见选项的数目。
multiple：multiple为true时，可选择多个选项。
disabled:为true时，会禁用下拉列表。

<select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
</select>

<option>属性

selected:规定选项（在首次显示在列表中时）表现为选中状态。
value：定义送往服务器的选项值。

<label>

<label>位input元素定义标记。在label元素内点击文本，就会自动将焦点转到和标签相关的表单控件上。

属性

for:规定label与哪个表单元素绑定。

<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">

<button>

<button>定义一个按钮。

属性

name:规定按钮名称。
type：规定按钮的类型。（button，reset，submit）
value：规定按钮的初始值。

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

<textarea>

<textarea>定义一个多行的文本输入控件。

属性

cols:规定文本区域内可见的列数。
disabled:规定禁用文本区域。
name:规定文本区域的名称。
rows：规定文本区域内可见的行数。
readonly：规定文本区域为只读。

表格标签

<table>

<table border="1">
    <th>table</th>
    <tr>
        <th>Month</th>
        <th>Savings</th>
    </tr>
    <tr>
        <td>January</td>
        <td>$100</td>
    </tr>
</table>

属性

border：“1”或“”，规定表格是否有边框

<tr>

<tr>:定义表格中的行。

<td>

<td>:定义表格中的标准单元格。

属性

colspan:规定单元格可横跨的列数。
rowspan：设置单元格可横跨的行数。

<th>

<th>定义表头单元格。

文本标签

<h1>-<h6>

定义标题
<h1> 定义重要等级最高的标题。<h6> 定义重要等级最低的标题。搜索引擎搜索的时候会根据标题搜索

<b>

<b>定义粗体文本。

格式标签

<p>

<p>定义段落

<br />

<br />定义换行。

<pre>

<pre>标签元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

特殊符号

分区标签

和css配合使用

<div>

<div>定义html文档中的一个分割区块或者一个区域部分。常用于组合块级元素，以便通过css来对这些元素进行格式化。

<div style="color:#0000FF">
  <h3>This is a heading</h3>
  <p>This is a paragraph.</p>
</div>

<span>

<span>提供了一种将文本的一部分或者文档的一部分独立出来的方式。

<p>我的母亲有 <span style="color:blue">蓝色</span> 的眼睛。</p>