<!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:规定被链接文档的位置。
扫描二维码关注公众号,回复: 4779654 查看本文章 -
<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>, 脚本可写响应函数。