HTML学习总结—

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
</body>
</html>

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落
HTML 不是一种编程语言，而是一种标记语言
"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.
<!DOCTYPE>声明有助于浏览器中正确显示网页。

网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。

doctype 声明是不区分大小写的
HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的.
HTML 段落是通过标签 <p> 来定义的.
HTML 链接是通过标签 <a> 来定义的.
HTML 图像是通过标签 <img> 来定义的.以上均是HTML元素的意思。<br/>换行的意思.HTML 提示：使用小写标签
HTML 元素可以设置属性, 属性一般描述于开始标签, 属性总是以名称/值对的形式出现.通用属性：class，ID，style，title。
<h1> 定义最大的标题。 <h6> 定义最小的标题。请确保将 HTML 标题标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。<hr>元素可用于分隔内容。
HTML 使用标签 <b>("bold") 与 <i>("italic") 对输出的文本进行格式, 如：粗体 or 斜体
<a> 超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.。
<title> 在 HTML/XHTML 文档中是必须的。定义了浏览器工具栏的标题
<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:<base> 是基于的意思，比如<base href="http://www.lanrentuku.com">那么就是说，网页中所有的路径都相对 http://www.lanrentuku.com的根目录的，一个单独的网页中就可以写<img src="images/xx.jpg">，这样图片也能显示，但是你跟本找不到图片夹，因为都在http://www.lanrentuku.com下.
<link> 标签定义了文档与外部资源之间的关系。<link> 标签通常用于链接到样式表:<link rel="stylesheet" type="text/css" href="mystyle.css">。rel：规定当前文档与被链接文档之间的关系。type：规定被链接文档的 MIME 类型。href：规定被链接文档的位置。
<style> 标签定义了HTML文档的样式文件引用地址.在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:
```
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
```
<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
<script>标签用于加载脚本文件，如： JavaScript。
CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式.CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.
CSS 可以通过以下方式添加到HTML中:
内联样式- 在HTML元素中使用"style" 属性

<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>

内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素来包含CSS

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

最好的方式是通过外部引用CSS文件.当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
外部引用 - 使用外部 CSS 文件
```
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
```
CSS修饰标签的样式，有 "内联" 和 "外引" 两种方式。

对于大部分标签，以上两种方法均可，且修改父级标签，子级标签特性也会改变。但某些标签确无法通过修改父级标签来改变子级标签特性，如a标签，修改其颜色特性，必须直接修改 a 标签的特性才可。
定义图像的语法是：<img src="url" alt="some_text" width="304" height="228" >alt 属性用来为图像定义一串预备的可替换的文本。在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。
HTML 支持有序、无序和定义列表:<ol>,<ul>,<li>
<ul><li>Coffee</li><li>Tea</li> <li>Milk</li></ul>,每一列代表每一行，自动换行。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
HTML 可以通过 <div> 和 <span>将元素组合起来。

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

块级元素在浏览器显示时，通常会以新行来开始（和结束）。<h1>, <p>, <ul>, <table>
内联元素在显示时通常不会以新行开始。 <b>, <td>, <a>, <img>
<p>我的母亲有 <span style="color:blue;font-weight:bold">蓝色</span> 的眼睛</p>
<div style="color:#0000FF">
- <h3>这是一个在 div 元素中的标题。</h3>
- <p>这是一个在 div 元素中的文本。</p>
</div>
HTML 布局 - 使用<div> 元素
HTML 表单用于收集不同类型的用户输入。
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>,在原本页面中显示demo_iframe.htm页面。
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>
iframe可以显示一个目标链接的页面
<script> 标签用于定义客户端脚本，比如 JavaScript。<script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。<script> document.write("Hello World!")</script>, 脚本可写响应函数。

HTML 布局 - 使用<div> 元素

猜你喜欢