HTML 和 CSS 的关系
-
HTML 是网页内容的载体。内容是网页制作者放在页面上想要让用户浏览的信息，可以包括文字、图片、视频等。
-
CSS 是表现。比如，标题字体、颜色变化或者标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
-
JavaScript 是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单，或鼠标滑过表格的背景颜色改变。可以这么理解，有动画的，有交互的一般都是用 JavaScript 来实现。
标签的语法
- 标签有英文尖括号 < 和 > 括起来，如 <html> 就是一个标签。
- HTML 中的标签一般是成对出现的，分开始标签和结束标签。
- 标语标签之间是可以嵌套的，但是先后顺序必须保持一致，如 <div><p>...</p></div>
- HTML 标签不区分大小写，但建议都小写。
HTML文件的基本结构
<html>
<head>...</head>
<body>...</body>
</html>
-
<html></html> 称为根标签，所有的网页标签都在 <html></html> 中
-
<head> 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有 <title> 、<script>、<style>、<link>、<meta>等标签。
-
在 <body> 和 </body> 标签之间的内容是网页的主要内容，如 <h1> 、<p> 、<a> 、<img> 等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。
head 标签
<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>
HTML 的代码注释
语法：`<!--注释文字 -->`
body 标签: 在网页上显示的页面内容一定要放在 body 标签中。
<p> 标签: 在网页上显示文章，把文章的段落放到 <p> 标签中。
<hx> 标签
为你的网页添加标题，文章的标题使用 <hx> ，一共有 6 个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。依据重要性递减。<h1>是最高的等级。
<strong> 和 <em> 标签
强调语气
<em> 表示强调，<strong> 表示更强烈的强调。在浏览器中 <em> 默认用斜体表示，<strong> 用粗体表示。
<span> 标签
为文字设置单独样式
-
<em> 和 <strong> 标签是为了强调一段话中的关键字时使用的，它们的语义是强调。
-
<span>标签是没有语义的，作用是为了设置单独的样式用的。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>了不起的盖茨比</title>
<style>
span{
color:blue;
}
</style>
</head>
<body>
<p>1922年的春天，一个想要成名名叫尼克•卡拉威（托比•马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的<span>美国梦</span>，他搬入纽约附近一海湾居住。</p>
<p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p> </body>
</html>
<q> 标签：短文本的引用
<blockquote> 标签：长文本的引用
<br/> 标签：分行显示文本
这种标签属于空标签，只有一个开始标签，没有结束标签。
：输入空格
<hr/> :添加水平横线（空标签）
<address> 标签：为网页加入地址信息
<code> 标签：加入一行代码
插入多行代码就不能使用<code>标签，可以使用<pre>标签。
<ur> 无序标签：添加信息列表
<ul>
<li>
我的第一个列表信息
</li>
</ul>
每项li前都自带一个圆点
<ol> 有序标签
添加有前后顺序的信息列表
<ol>
<li>我的第一个列表信息</li>
<li>我的第二个列表信息</li>
</ol>
每项<li>前都自带一个序号，序号默认从1开始
<div> 标签
相当于一个容器，用来盛放一些独立的逻辑部分。
逻辑部分：页面上相互关联的一组元素，如网页中的独立的版块。
标记版块名称：
`<div id="板块名称">
...
</div>`
<table> 标签
网页上的表格
创建表格的4个元素：table、tbody、tr、th、td
1.整个表格是以`<table>`开始，</table>结束。
2.<tboby>...</tbody>:如果不加<thead>、<tbody>、<tfooter>，table表格加载完成后才显示出来。加上这些表结构，tbody包含行的内容下载完优先显示不必等待表格结束后再显示。如果表格很长，可以使用tbody分段一部分一部分的显示。
3.<tr>...</tr>:表格的一行，有几对tr表格就有几行。
4.<td>...</td>:表格的一个单元格，一行中包含几对td就说明一行中有几列。
5.<th>...</th>:表格的头部的一个单元格。
6.表格中列的个数，取决于一行中数据单元格的个数。
添加下面代码可以给表格添加边框
`<style type="text/css">
table tr td,th{border:1px solid #000;}
</style>`
<table>
<tbody>
<tr>
<th>班级</th>
<th>学生数</th>
<th>平均成绩</th>
</tr>
<tr>
<td>一班</td>
<td>30</td>
<td>89</td>
</tr>
<tr>
<td>二班</td>
<td>35</td>
<td>85</td>
</tr>
<tr>
<td>三班</td>
<td>32</td>
<td>80</td>
</tr>
</tbody>
</table>
<caption>标签
为表格添加标题和摘要
摘要
摘要的内容是不会在浏览器中显示出来，作用就是增加表格的可读性（语义化），是搜索引擎更好的读懂表格的内容。
语法
<table summary="表格的简介文本">
标题
用来描述表格的内容，标题的显示位置在表格的上方。
语法：
<table>
<caption>标题文本</caption>
<tr>
<td>…</td>
<td>…</td>
…
</tr>
…
</table>
<a>标签
链接到另一个界面
使用<a>标签可以实现超链接
语法：
<a href="目标网址" title="鼠标划过显示的文本">链接显示的文本</a>
<a href="http://www.baidu.com" title="点击进入百度">Click here!</a>
在新建浏览器窗口中打开链接
<a href="目标网址" target="_blank">链接显示的文本</a>
使用`mailto`在网页中链接E-mail地址
<a href="mailto:收件人邮箱地址?cc=抄送地址&bcc=密件抄送地址&subject=主题&body=内容">链接显示的文本</a>
<img>标签
为网页插入图片
语法：
<img src="图片地址" alt="下载失败时的替换文本">
网友评论