html

html之于页面，就好比骨骼之于人体

css好比皮肤

js则为血液

HTML主体head&body

  • < !DOCTYPE html > 声明为 HTML5 文档 （13年）
  • < html > 元素是 HTML 页面的根元素
  • < head > 元素包含了文档的元（meta）数据，如 定义网页编码格式（charset）为 utf-8。
  • < title > 元素描述了文档的标题
  • < body > 元素包含了可见的页面内容
  • < h1 > 元素定义一个大标题
  • < p > 元素定义一个段落

HTML 标签

  • HTML 标签是由 尖括号 包围的关键词，比如

  • HTML 标签通常是 成对出现

  • 开始标签与结束标签统称为 元素

HTML 属性

  • HTML 元素可以设置属性
  • 属性可以在元素中添加附加信息
  • 属性一般描述于开始标签
  • 属性总是以名称/值对的形式出现，比如：name=“value”，比如 < a href=“http://www.runoob” >
  • 属性被希望用小写的属性/属性值。
  • 属性值在引号内，一般用双引号，也用单双引号做区分

HTML 标题（headline）

HTML 标题（Heading）是通过< h1 > - < h6 > 标签来定义的。

<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>

HTML 水平线

< hr > 标签在 HTML 页面中创建水平线。

< hr > 元素可用于分隔内容。

HTML 注释

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

<!-- 这是一个注释 -->

HTML 段落（paragraph）

HTML 段落是通过标签

来定义的。

<p>这是一个段落。</p>
<p>这是另外一个段落。</p><p>这是一个段落。</p>
<p>这是另外一个段落。</p>

HTML 折行

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 < br >标签：

<p>这个<br>段落<br>演示了分行的效果</p>

HTML 格式化标签

HTML 使用标签 (“bold”) 与 (“italic”) 对输出的文本进行格式, 如：粗体 or 斜体

HTML 链接

HTML 链接是通过标签 来定义的。

<a href="https://www.runoob">这是一个链接</a>

默认情况下，链接将以以下形式出现在浏览器中：

  • 一个未访问过的链接显示为蓝色字体并带有下划线。
  • 访问过的链接显示为紫色并带有下划线。
  • 点击链接时，链接显示为红色并带有下划线。

HTML 链接 - target 属性

使用 target 属性，你可以定义被链接的文档在何处显示。

<a href="http://www.runoob/" target="_blank">访问菜鸟教程!</a>
<!--如果你将 target 属性设置为 "_blank", 链接将在新窗口打开。-->

HTML 链接- id 属性

id 属性可用于创建一个 HTML 文档书签。

提示: 书签不会以任何特殊方式显示，即在 HTML 页面中是不显示的，所以对于读者来说是隐藏的。

HTML 图像（image）

HTML 图像是通过标签 来定义的.

<img src="/images/logo.png" width="258" height="39" />

HTML 图像- 图像标签（ < img >）和源属性（Src）

在 HTML 中，图像由 标签定义。

是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。

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 < head > 元素

< head > 元素包含了所有的头部标签元素。在 元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为: ,

HTML < title > 元素

< title > 标签定义了不同文档的标题。

< title > 在 HTML/XHTML 文档中是必需的。

< title > 元素:

  • 定义了浏览器工具栏的标题
  • 当网页添加到收藏夹时，显示在收藏夹中的标题
  • 显示在搜索引擎结果页面的标题

HTML < base > 元素

< base > 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:

<head>
<base href="http://www.runoob/images/" target="_blank">
</head>

HTML < link > 元素

标签定义了文档与外部资源之间的关系。 标签通常用于链接到样式表

HTML < style > 元素

~~~

HTML < meta > 元素

meta标签描述了一些基本的元数据。

< meta > 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。

META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

< meta > 一般放置于 区域

HTML < script> 元素

< scrip t>标签用于加载脚本文件，如： JavaScript。

HTML 表格

表格由

标签来定义。

tr 每个表格均有若干行（由 < tr > 标签定义），

td 每行被分割为若干单元格（由 < td > 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob)</title> 
</head>
<body>

<h4>一行三列:</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
</table>

<h4>两行三列:</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

</body>
</html>

HTML 列表

HTML 支持有序orderList、无序和定义列表:unorderList

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
  • Coffee
  • Milk

< h4 >圆点列表：< /h4 >
< ul style=“list-style-type:disc” >

< h4 >圆圈列表：< /h4 >

< ul style=“list-style-type:circle” >

< h4>正方形列表：
< ul style=“list-style-type:square” >

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
  1. Coffee
  2. Milk

默认有序列表为编号列表（1. 2. 3. ）

< ol type="A "> 以 ABC编号

< ol type="a >以abc编号

< ol type=“I” >以罗马数字编号

< ol type=“i” > 用小写罗马数字编号

HTML 自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以

标签开始。每个自定义列表 项以 开始。每个自定义列表项的定义以
开始。 

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Coffee
- black hot drink
Milk
- white cold drink

HTML 表单（form）和输入

HTML 表单作为容器收集用户的输入信息。

HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。

<form action="">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

密码字段

<form>
Password: <input type="password" name="pwd">
</form>

密码字段字符不会明文显示，而是以星号 ***** 或圆点 . 替代。

单选按钮

<form action="">
<input type="radio" name="sex" value="male">男<br>
<input type="radio" name="sex" value="female">女
</form>

复选框

<form>
<input type="checkbox" name="vehicle" value="Bike">我喜欢自行车<br>
<input type="checkbox" name="vehicle" value="Car">我喜欢小汽车
</form>

checked = “checked” 表示某一项默认选中

属性名与属性值相同时可以只写属性

多行文本框

<textarea name = "remark" rows = "4" colos = "50"></textarea>

4行 宽为50像素的文本框

提交按钮

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

action 属性 是传输数据的目标文件

method 属性，它用于定义表单数据的提交方式，可以是以下值：

  • post：指的是 HTTP POST 方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等。
  • get：默认值，指的是 HTTP GET 方法，表单数据会附加在 action 属性的 URL 中，并以 **?**作为分隔符，一般用于不敏感信息，如分页等。
type = "reset" 重置按钮
type = "button" 普通按钮

HTML < div > 和< span >

HTML 可以通过

和 将元素组合起来。

HTML 样式- CSS

CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。

CSS 可以通过以下方式添加到HTML中:

  • 内联样式- 在HTML元素中使用"style" 属性
  • 内部样式表 -在HTML文档头部 区域使用

最好的方式是通过外部应用css

在html内使用style标签，被style标签包围的是css环境

HTML < script > 标签

< scrip t> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。

HTML< noscript > 标签

< noscript > 标签提供无法使用脚本时的替代内容 default

<script>
document.write("Hello World!")
</script>
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>

url

6个组成部分

更多推荐

【黑曼巴】菜鸟HTML