html简介
1.html概述
网页最主要由3部分组成:结构、表现和行为。网页现在新的标准是W3C,目前模式是HTML、CSS和JavaScript。
(1)HTML是什么?
HTML,全称“Hyper Text Markup Language(超文本标记语言)”,简单来说,网页就是用HTML语言制作的。HTML是一门描述性语言,是一门非常容易入门的语言。
(2)CSS
CSS,全称“(层叠样式表)”。以后我们在别的地方看到“层叠样式表”、“CSS样式”,指的就是CSS。
(3)JavaScript
JavaScript是一门脚本语言。
学习路线:HTML入门→CSS入门→HTML进阶→CSS进阶→JavaScript入门→jQuery入门→ASP.NET入门(或PHP入门)→Ajax→ASP.NET进阶(或PHP进阶);
2.html语法规则
1.html结构:包括head body
2.html标签是以尖括号包围的关键字
3.html标签通常是成对出现的,有开始就有结束,包含成对标签、独立标签
4.html通常都有属性,格式:属性名=“属性值”(多个属性之间空格隔开)
5.html标签不区分大小写,建议小写
<head>内部标签 | 说明 |
---|---|
<title> | 定义网页的标题 |
<meta> | 定义网页的基本信息(供搜索引擎) |
<style> | 定义CSS样式 |
<link> | 链接外部CSS文件或脚本文件 |
<script> | 定义脚本语言 |
<base> | 定义页面所有链接的基础定位(用得很少) |
3.html标签
(一)、段落标签
(1)、段落与文字标签
标签 | 语义 | 说明 |
---|---|---|
<h1>~<h6> | header | 标题 |
<p> | paragraph | 段落 |
<br> | break | 换行 |
<hr> | horizontal rule | 水平线 |
<div> | division | 分割(块元素) |
<span> | span | 区域(行内元素) |
代码:
简介:<h1></h6>标题标签(双标签)
标题(H1-H6)标签是指网页html 中对文本标题所进行的着重强调的一种标签,以标签<h1>、<h2>、<h3>到<h6>依此显示重要性的递减,制作<h>标签的主要意义是告诉搜索引擎这个是一段文字的标题,起强调作用。
简介:<p></p>段落标签(双标签)
标签定义的段落文本与上下相邻文本均有一定的间距。
简介:<br>换行标签(单标签)
进行文字换行。
DIV与span的区别
(1)、HTML元素根据浏览器表现形式分为两类:①块元素;②行内元素;
(2)、块元素特点:
(1)独占一行,排斥其他元素跟其位于同一行,包括块元素和行内元素;
(2)块元素内部可以容纳其他块元素或行元素;
常见块元素有:h1~h6、p、hr、div等。
(3)、行内元素特点:
(1)可以与其他行内元素位于同一行;
(2)行内内部可以容纳其他行内元素,但不可以容纳块元素,不然会出现无法预知的效果;
(2)、文本格式化标签
标签 | 语义 | 说明 |
---|---|---|
<strong> | strong(加强) | 加粗 |
<em> | emphasized(强调) | 斜体 |
<cite> | cite(引用) | 斜体 |
<sup> | superscripted(上标) | 上标 |
<sub> | subscripted(下标) | 下标 |
(3).Html3种列表
列表有3种:有序列表、无序列表和定义列表。
有序列表和无序列表都比较常用,而定义列表比较少用。在实际应用中,最常用的是无序列表,请大家重点掌握。
目录列表和菜单列表已经被废除,大家可以直接忽略这两种列表。
(1)、有序列表
1 2 3 4 5 |
|
(2)、无序列表
无序列表是三个列表中最为重要的列表。
语法:
1 2 3 4 5 |
|
4、表格
(1)、表格语义记忆
通过语义化记忆表格标签:
标签 | 语义 | 说明 |
---|---|---|
table | table(表格) | 表格 |
tr | table row(表格行) | 行 |
td | table data cell(表格单元格) | 单元格 |
表格结构标签
标签 | 语义 | 说明 |
---|---|---|
thead | table head | 表头 |
tbody | table body | 表身 |
tfoot | table foot | 表脚 |
th | table header | 表头单元格 |
1. 表格的定义
<table> 标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 <tr>、<th> 或 <td> 元素组成表格结构;其中: <tr> 元素定义表格行,<th> 元素定义表头,<td> 元素定义表格单元。
为了让表格更美观,我们会用到:border,colspan,rowspan,align,bgcolor 等来美化表格,具体在本文都有讲解;
2. 表格的标签
在HTML定义表格的时候,有以下标签供我们使用
NO 表格标签 用处
1 <table> 定义表格,生成的表格在一对<table></table>中;
2 <caption> 定义表格标题,当表格需要标题时,使用<caption>表格标题</caption>
3 <thead> 定义表格的页眉
4 <tbody> 定义表格的主体
5 <tfoot> 定义表格的页脚
6 <th> 定义表格的表头,一般是表头中的内容会被加黑;
7 <tr> 定义表格的行
8 <td> 定义表格单元格
9 <col> 定义用于表格列的属性
10 <colgroup> 定义表格列的组
3. 单元格边框(border)
表格边框:在使用<table border="1"></table> 的方式来定义,其中:数字表示边框的宽度,单位为像素;以下举三个边框的例子;
<!--无边框-->
<table>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>1</td>
<td>马里奥</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>桃花公主</td>
<td>女</td>
</tr>
</table>
<br>
<!--边框宽度为2-->
<table border="2">
<tr>
<th> 编号 </th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>1</td>
<td>马里奥</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>桃花公主</td>
<td>女</td>
</tr>
</table>
<br>
<!--边框宽度为10-->
<table border="10">
<tr>
<th> 编号 </th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>1</td>
<td>马里奥</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>桃花公主</td>
<td>女</td>
</tr>
</table>
4. 合并单元格
合并单元格时,合并行使用:colspan=“2”; 合并列使用:rowspan=“2” (这里的 ‘2’ 表明合并两个单元格),举例如下:
4.1 合并行单元格(colspan)