1.网页构成
1.结构
超文本标记语言 Xhtml可扩展标识语言
2.表现
表现标准语言CSS层叠样式表 负责描述页面样式
3.行为 w3c定制了规范和标准 称为 web标准
主要包括对象模型如DOM（文档队形模型） JavaScript标准脚本语言 负责描述页面的动态效果
2.前端标签
头部：
标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:
<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>
标签定义了文档与外部资源之间的关系。标签通常用于链接到样式表:
<link rel="stylesheet" type="text/css" href="mystyle.css">
标签定义了HTML文档的样式文件引用地址.元素中你也可以直接添加样式来渲染 HTML 文档:
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
超链接：
<a href="http://www.runoob.com" target="_blank" rel="noopener noreferrer">这是一个链接</a> 如果你将 target 属性设置为 "_blank", 链接将在新窗口打开
创建图片链接:
有边框
<a href="//www.runoob.com/html/html-tutorial.html"><img border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a>
无边框的图片链接:
<a href="//www.runoob.com/html/html-tutorial.html"><img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>
查看对应章节
<a href="#C4">查看章节 4</a>
<h2><a id="C4">章节 4</a></h2>
<p>这边显示该章节的内容……</p>
电子邮件链接（两种方式）
<a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">发送邮件</a>
<a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">发送邮件!</a>
创建无下划线超链接：
<a href="//www.runoob.com/" style="text-decoration:none;">访问 runoob.com!</a>
段落：
<p style="color: blueviolet; text-indent: ;">test</p>
color 颜色
test-indent: 2em 首行缩进
test-align: center 居中
<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p> <!-- 该段落文字从右到左显示 -->
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
<p style="color:blue;margin-left:20px;">这是一个段落。</p> 显示出如何改变段落的颜色和左外边距
<p style="background-color:green;">这是一个段落。</p> 背景色属性（background-color）定义一个元素的背景颜色
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p> font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式
<h1 style="text-align:center;">居中对齐的标题</h1> text-align（文字对齐）属性指定文本的水平与垂直对齐方式：选择居中对齐
文本格式化：
<b>这个文本是加粗的</b>
<strong>这个文本是加粗的</strong>
<big>这个文本字体放大</big>
<em>这个文本是斜体的</em>
<i>这个文本是斜体的</i>
<small>这个文本是缩小的</small>
<sub>下标</sub>
<sup>上标</sup>
<pre>
此例演示如何使用 pre 标签
对空行和 空格
进行控制
</pre>
计算机输出标签：
<code>计算机输出</code>
<kbd>键盘输入</kbd>
<tt>打字机文本</tt>
<samp>计算机代码样本</samp>
<var>计算机变量</var>
地址：
<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
前端注释：<!-- 这是一个注释 -->
表格定义：
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<table border="1">
<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>
垂直标题：
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
水平标题：
<table border="1">
<tr>
<th>Name</th>
<th>Telephone</th>
<th>Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
单元格跨两列：
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
单元格跨两行：
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
设置单元格边距
<table border="1" cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
单元格间距为0 为10时 间距为10
<h4>单元格间距="0":</h4>
<table border="1" cellspacing="0">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
定义表格：
<th> 定义表格的表头
<tr> 定义表格的行
<td> 定义表格单元
<caption> 定义表格标题
<colgroup> 定义表格列的组
<col> 定义用于表格列的属性
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚
列表
无序列表：
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
有序列列表：
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
常见标签:
块级
1. H1,H2,H3,H4,H5,H6 标题
2. p段落,换行
3. div 块
4. ul无序列表
5. Ol有序列表
6. li列表项
7. dl,dt,dd自定义列表
行级:
1. span区别样式
2. strong 加粗强调
3. b 加粗
4. em 倾斜,强调
5. i 倾斜
6. <small> 定义小号字
7. <abbr> 定义缩写
属性：
class 为html定义一个或多个类名
id 定义元素的唯一ID
style 规划元素的行内样式
title 描述元素额外的信息
表头:引入图片
<link rel="icon" href="./images/FBC1C0D0-CDB8-4f05-8B70-FCF2C5D016AF.png" type="image/x-icon"/>
图片:
引入image标签 <img src='./image.jpg'>
<img src="/images/chrome.gif" alt="Google Chrome" width="33" height="32"> 利用文件夹下的图片
<img src="//www.runoob.com/images/logo.png" alt="runoob.com" width="336" height="69"> 利用网站下查询的图片
视频:
视频标签: <video src='./video.mp4' contols></video>
音频:
音频标签: <audo src="./music.mp3" controls></audo>
布局标签:
<header> 头部信息
<nav> 导航栏
<aside> 侧边栏
<main> 内容区域
<footer> 底部信息
<article> 文章详情
<section> 页面分区
<hr> 水平线
属性标签:
<font></fount>
<h1>这是我的<font>dog</font></h1>
在html5中不可使用
属性:是一个键值对 键key 值value
属性设置标签内容如何显示
属性和标签名或其他属性应该使用空格隔开
属性不能瞎写,应该根据文档中的规范填写
有些属性有属性值 有些属性没有 如果有属性值,属性值可以使用单引号或者双引号引起来
480
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
