1 Html基础
l W2school
1.1 什么是 HTML？
HTML 是用来描述网页的一种语言。
l HTML 指的是超文本标记语言 (Hyper Text Markup Language)
l HTML 不是一种编程语言，而是一种标记语言 (markup language)
l 标记语言是一套标记标签 (markup tag)
l HTML 使用标记标签来描述网页
1.2 HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
l HTML 标签是由尖括号包围的关键词，比如 <html>
l HTML 标签通常是成对出现的，比如 <b> 和 </b>
l 标签对中的第一个标签是开始标签，第二个标签是结束标签
l 开始和结束标签也被称为开放标签和闭合标签
1.3 解释
l <html> 与 </html> 之间的文本描述网页
l <body> 与 </body> 之间的文本是可见的页面内容
l <h1> 与 </h1> 之间的文本被显示为标题
l <p> 与 </p> 之间的文本被显示为段落
1.4 使用 Notepad 或 TextEdit 来编写 HTML
可以使用专业的 HTML 编辑器来编辑 HTML：
- Adobe Dreamweaver
- Microsoft Expression Web
- CoffeeCup HTML Editor
- Notepad (PC)
- TextEdit (Mac)。
2 基本的 HTML
|
标签 |
描述 |
|
定义 HTML 文档。 |
|
|
定义文档的主体。 |
|
|
定义 HTML 标题 |
|
|
定义水平线。 |
|
|
定义注释。 |
2.1 HTML 标题
HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
2.2 HTML 段落
HTML 段落是通过 <p> 标签进行定义的。
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
2.3 HTML 链接
HTML 链接是通过 <a> 标签进行定义的。
<a href="http://www.w3school.com.cn">This is a link</a>
注释：在 href 属性中指定链接的地址。
2.4 HTML 图像
HTML 图像是通过 <img> 标签进行定义的。
<img src="w3school.jpg" width="104" height="142" />
注释：图像的名称和尺寸是以属性的形式提供的。
2.5 HTML 注释
您能够通过如下语法向 HTML 源代码添加注释：
<!-- 在此处写注释 -->
注释：在开始标签中有一个惊叹号，但是结束标签中没有。
浏览器不会显示注释，但是能够帮助记录您的 HTML 文档。
您可以利用注释在 HTML 中放置通知和提醒信息：
<!-- 这是一段注释 -->
<p>这是一个段落。</p>
2.6 HTML 水平线
<hr /> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。
2.7 Html换行
您可以利用注释在 HTML 中放置通知和提醒信息：
< a href="http://www.w3school.com.cn">This is a link</a >
<br> </br>
<p>这是一个段落。</p>
2.8 HTML 格式化
style 属性用于改变 HTML 元素的样式。
<div style = "background-color:yellow; height:60;120">
2.9 Html div
<div> 可定义文档中的分区或节（division/section）。
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。
DIV标签应用于 Style Sheet（样式表）方面会更显威力，它最终目的是给设计者另一种组织能力，有 Class、Style、title、ID 等属性。
<div style = "background-color:yellow; height:60;120">
<p> DIV段落标签1 </P>
</div>
3 Html属性
|
属性 |
值 |
描述 |
|
class |
classname |
规定元素的类名（classname） |
|
id |
id |
规定元素的唯一 id |
|
style |
style_definition |
规定元素的行内样式（inline style） |
|
title |
text |
规定元素的额外信息（可在工具提示中显示 |
4 CSS层叠样式表
CSS渲染HTML元素标签的样式.
5 样例
button.html
<html> <head> <title>JLL的网站</title> <!--定义一个js方法，根据id切换内容--> <script type="text/javascript"> function change_header() { document.getElementById("header2").innerHTML="you have changed"; } </script> </head> <body> <h1 id="header1"> 测试一下一级标题 </h1> <hr /> <h1 id="header2"> 测试一下二级标题 </h1> <hr /> <h3> 测试一下三级标题 </h3> <hr /> <button onclick="change_header()"> change_header </button> </body> </html>
new1.html
<html> <head> <title>new1的网站</title> </head> <!--引用CSS:href如果非当前路径，则应写出路径--> <link rel="stylesheet" type="text/css" href="test.css"> <body style="background-color:99CCFF"> <h1> 测试一下一级标题 </h1> <hr /> <h2> 测试一下二级标题 </h2> <hr /> <h3> 测试一下三级标题 </h3> <hr /> <!--text-align:文字位置--> <p style="font-family:隶书;color:990000;font-size:34;text-align:center"> 段落标签1 </P> <p> 段落标签2 </P> <a href="http://www.w3school.com.cn">This is a link</a> <br> </br> <img src="qingtianwawa.png" width="500" height="300" /> <div style = "background-color:yellow; height:60;120"> <p> DIV段落标签1 </P> </div> </body> </html>
test.css
h1{color:green;font-size:50}