HTML

HTML 标签
• HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
• HTML 标签是由尖括号包围的关键词，比如 <html>
• HTML 标签通常是成对！出现的，比如 <b> 和 </b>
• 标签对中的第一个标签是开始标签，第二个标签是结束标签
• 开始和结束标签也被称为开放标签和闭合标签
案例解析
• <html> 与 </html> 之间的文本描述网页
• <head>与</head>之间标签用于定义文档的头部，它是所有头部元素的容器。
• <body> 与 </body> 之间的文本是可见的页面内容
• <h1> 与 </h1> 之间的文本被显示为标题
• <p> 与 </p> 之间的文本被显示为段落
HTML编辑器
1. Adobe Dreamweaver
2. notepad++
3. 记事本
________________________________________
基本的 HTML 标签
HTML 标题
HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
head定义和用法
<head> 标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
<html>

<head>
<title>文档的标题</title>
</head>

<body>
文档的内容... ...
</body>

</html>
HTML 段落
HTML 段落是通过 <p> 标签进行定义的。
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML 链接
• HTML 链接是通过 <a> 标签进行定义的。
• <a> 标签定义超链接，用于从一张页面链接到另一张页面。
• <a> 元素最重要的属性是 href 属性，它指示链接的目标。
<a href="https://www.baidu.com">This is 51zxw link</a>
HTML 图像
HTML 图像是通过 <img> 标签进行定义的。
<img src="w3school.jpg" width="104" height="142" />
HTML 注释
可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。注释是这样写的：

HTML 换行
如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签：
<p>This is<br />a para<br />graph with line breaks</p>
HTML Div
<div> 可定义文档中的分区或节（division/section）。 <div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。
<html>

<body>

<h1>百度口号</h1>
<p>自学成才，快速成功！！增加收入，改变命运</p>
<p>这是一个神奇的网站，你值得拥有！</p>

<div style="background-color:red;">
<h3>This is a div block </h3>
<p>hello </p>
</div>

</body>

</html>
更多标签请见：http://www.w3school.com.cn/tags/index.asp

name 属性
name 属性用于指定标签元素的名称。 <a> 标签内必须提供 href 或 name 属性。
<a name="value">
id 属性
1. id 属性规定 HTML 元素的唯一的 id。
2. id 在 HTML 文档中必须是唯一的。
3. id 属性可通过 JavaScript（HTML DOM）或通过 CSS 为带有指定 id 的元素改变或添加样式。
<html>
<head>

<script type="text/javascript">
function change_header()
{
document.getElementById("myHeader_1").innerHTML="You have clicked!";
}
</script>
</head>

<body>
<h1 id="myHeader">Hello 51zxw!</h1>
<h1 id="myHeader_1">Hello zxw!</h1>
<button onclick="change_header()">Change text</button>
</body>

</html>
注意：
id 或 name 属性的值可以是引号引起来的任何字符串。字符串必须是唯一的标记，不能在同一文档中的其他 name 或 id 属性中重复使用，但是可以在不同的文档中再次使用。
style 属性
样式是 HTML 4 引入的，它是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式，能够通过使用 style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义。
HTML 样式实例 - 背景颜色
background-color 属性为元素定义了背景颜色：
<html>

<body style="background-color:yellow">
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>

</html>
HTML 样式实例 - 字体、颜色和尺寸
font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸： <html>
<body>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>

</html>
HTML 样式实例 - 文本对齐
text-align 属性规定了元素中文本的水平对齐方式：
<html>

<body>
<h1 style="text-align:center">This is a heading</h1>
<p>The heading above is aligned to the center of this page.</p>
</body>

</html>
更多HTML属性请见
http://www.w3school.com.cn/tags/html_ref_standardattributes.asp

表 (Cascading Style Sheets)
CSS产生缘由
HTML 标签原本被设计为用于定义文档内容。通过使用 <h1>、<p>、<table> 这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。由于两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。
CSS作用
样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。
CSS语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
selector {declaration1; declaration2; ... declarationN }
• 选择器通常是您需要改变样式的 HTML 元素。
• 每条声明由一个属性和一个值组成。
• 属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
selector {property: value}
例子：
将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。
h1 {color:red; font-size:14px;}
Css外部样式引用
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
更多css内容请参考
http://www.w3school.com.cn/css/index.asp
本文档参考来源：http://www.w3school.com.cn/index.html

posted @ 2018-04-08 13:16 澄心阅读(228) 评论(0) 编辑收藏举报

刷新页面返回顶部

澄心

HTML

公告