Html 学习笔记

HTML基础

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 这是title</title>
</head>
<body>

<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
 
</body>
</html>

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)

HTML 标签通常是成对出现的，比如 <b> 和 </b>，第一个标签是开始标签，
部分标签在开始标签中进行关闭，如：<br />

格式化

标签	desc
<b>	定义粗体文本
<em>	定义着重文字
<i>	定义斜体字
<small>	定义小号字
<strong>	定义加重语气
<del>	定义删除字

属性

属性	desc
class	为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id	定义元素的唯一id
style	规定元素的行内样式（inline style）
title	描述了元素的额外信息 (作为工具条使用)

在某些情况下，比如属性值本身就含有双引号，那么必须使用单引号，如：name='John "ShotGun" Nelson'

head头部标签元素

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

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

标签	desc
<head>	定义了文档的信息
<title>	定义了文档的标题，添加收藏夹标题，显示在搜索引擎结果页面的标题
<base>	定义了页面链接标签的默认链接地址
<link>	定义了一个文档和外部资源之间的关系
<meta>	定义了HTML文档中的元数据
<script>	定义了客户端的脚本文件
<style>	定义了HTML文档的样式文件

其他

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

XHTML 是以 XML 格式编写的 HTML，是更严格更纯净的 HTML 版本，得到所有主流浏览器的支持

常用标签

<a> 超链接标签

HTML使用标签 <a>来设置超文本链接。

<a href="http://www.runoob.com#id_field" target="_blank">跳转锚点</a>
<a id="id_field">我是锚点</a>

请始终将正斜杠添加到子文件夹。假如这样书写链接：href="http://www.runoob.com/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="http://www.runoob.com/html/"。

img 标签

<p>无边框的图片链接:
<a href="http://www.runoob.com/html/html-tutorial.html">
<img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"/></a>
</p>

<!-- alt 是占位文本 -->

假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。

表格 table

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <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>

image

标签	desc
<th>	定义表格的表头
<tr>	定义表格的行
<td>	定义表格单元
<caption>	定义表格标题
<colgroup>	定义表格列的组
<col>	定义用于表格列的属性
<thead>	定义表格的页眉
<tbody>	定义表格的主体
<tfoot>	定义表格的页脚

列表

无序列表使用 <ul> 标签，每个列表项始于 <li> 标签。无序列表使用 <ol> 标签

<ol type="A">
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ol>

区块 div span

大多数 HTML 元素被定义为块级元素或内联元素。

块级元素在浏览器显示时，通常会以新行来开始（和结束）。
<h1>, <p>, <ul>, <table>
内联元素在显示时通常不会以新行开始。
<b>, <td>, <a>, <img>

div

<div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

span

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

表单

HTML 表单用于收集不同类型的用户输入。
表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

表单使用表单标签 <form> 来设置:

<form action="demo-form.php">
 <input type="radio" name="sex" value="male">Male<br>
 <input type="radio" name="sex" value="female">Female
 <input type="checkbox" name="vehicle" value="Bike" checked="checked">I have a bike<br>
 <input type="checkbox" name="vehicle" value="Car">I have a car 
 First name: <input type="text" name="FirstName" value="Mickey"><br>
 Last name: <input type="text" name="LastName" value="Mouse"><br>
 Password: <input type="password" name="pwd"> 
 <select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="audi">Audi</option>
 </select>

<input type="reset" name="button" id="button" value="重置">
<input type="submit" value="提交">
</form>

script

JavaScript 使 HTML 页面具有更强的动态和交互性。
<script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。

<script>
document.write("Hello World!")
</script>

<script>
function myFunction(){
  document.getElementById("demo").innerHTML="Hello JavaScript!";
}
</script>
<button type="button" onclick="myFunction()">点我Hello</button>


<script>
function myFunction(){
    x=document.getElementById("demo") // 找到元素
    x.style.color="#ff0000";          // 改变样式
}
</script>
<button type="button" onclick="myFunction()">点击改变样式</button>

其他

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

CSS

CSS修饰标签的样式

内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素来包含CSS
外部引用 - 使用外部 CSS 文件

# 内联
<p style="color:blue;margin-left:20px;">This is a paragraph.</p>

# 内部样式表
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

# 外部样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML5

DOM（文档对象模型）