超链接在页面中起到跳转或定位的作用(超链接、锚链接、a链接、a标签)
作用: 可以从一个页面跳转到另一个页面
代码: 文本或图像
效果:
注意:
**href:**a 标签跳转的目标地址(路径)
https:// www.baidu.com
< a href="index.html"> 首页
**target:**用于指定链接页面的打开方式
_self
:在当前页面,进行跳转_blank
: 保留原始页面,再进行跳转相关标签 :
base 标签
**作用:**可以为页面上所有的a标签设置跳转的方式(base标签一般放在titile标签下面)
href="#"
a标签可以快速定位到当前页面或者其他页面的目标内容(百度百科)
步骤:
给目标标签加上id属性
<p id="mao">我是一只猫p>
给链接的href属性中写上#目标标签的id属性值
<a href="#mao">吸猫大法a>
步骤:
给目标文件中的目标标签加上id属性
<p id="mao">我是一只猫p>
给当前文件的链接的href属性中写上 目标文件路径#目标标签的id属性值
<a href="目标文件路径#mao">吸猫大法a>
作用: 用来定义文档类型(告诉浏览器,使用哪种规范去解析html页面)
**位置:**文档的最前面的位置
**规范:**HTML 或 XHTML 规范
**html:xt :**XHTML规范,已经淘汰了, 一些特别老的网站会有,知道即可
html:5 : HTML5规范,非常的简洁
**作用:**所有html中标签的一个根节点(老祖宗)
**lang:**用来设置当前页面的语言(标签的语言、对比易语言)
<html lang="en">
html>
en-英文 zh-中文
英文的意思并不是告诉浏览器,我们这就是纯英文的,而且告诉浏览器我们的内容以英文为主,提高浏览器的渲染性能
作用:用于存放网页的配置标签和引入文件的标签
title、meta、base、style、script、link
注:在head标签中我们必须要设置的标签是title, 其他可有可无
**作用:**页面在的主体部分,用于存放页面中的html标签
p、h、a、b、u、i、s、em、del、ins、strong、img
**作用:**设置网页的元信息
**注意:**meta中设置的所有的内容在页面都不会显示, 在其中可以设置编码格式、样式、关键字等等
设置字符集(编码格式):
<meta charset="UTF-8">
Charset(字符集的格式):UTF-8
最常见的3种字符集(字典):
UTF-8:国际化的字典,字体库,收录是全世界所有的语言中的文字
1汉字 = 3个字节
GBK:收录了大陆汉字,还加了港澳台的文字-》ANSI(中国)
1个汉字= 2个字节
GB2312:收录了大陆汉字
**约定:**将来我们在整个学习过程中都用utf-8(与国际接轨)
**作用:**让页面拥有一个属于自己的标题。
**注意:**title中的文本在 seo 中占有很大的权重,不能乱写
Search Engine Optimization
写网页的目的-》用户的习惯-》用户的结果-》怎样排名靠前-》seo
作用:用来优化网站,使用网站在搜索引擎上的排名靠前
百度是如何收录一个网站的信息的呢?
百度自己写的一个程序来收录每个网站的信息。
花钱买排名
缺点:烧钱。
优点:效果杠杠的
将页面做成静态页面(html后缀)
发外链(类似于广告)
标签语义化(语义化规范)
在合适的地方使用合适的标签
标签语义化的应用:每个html标签都有属于自己的语义,有使用标签时候要一定要了解每个标签的语义,合理使用。
在合适的地方使用合适的标签(比如title和h1)
一列没有顺序的列表(用的最多)
**作用:**显示一列没有排列顺序的数据
**语义:**一组没有顺序的数据
代码:
<ul>
<li>列表项1li>
<li>列表项2li>
<li>列表项3li>
......
ul>
注意:
中只能嵌套
,不能放其他标签或者文字
标签中可以嵌套任意标签(嵌套ul都可以)一列有顺序的列表(用的很少)
#####考试成绩表
作用:显示一列有顺序的数据
语义:一组有顺序的数据
- 列表项1
- 列表项2
- 列表项3
......
注意:
中只能嵌套
,不能放其他标签或者文字
标签中可以嵌套任意标签(ul都可以)现在一般情况下ul标签用的比较多,ol标签用的比较少(关键看语义,和样式无关)。
一列格式自定义的列表(几乎不用)
作用:显示一列数据,格式自己定义
dt : 标题
dd : 列表正文
代码:
<dl>
<dt>小标题dt>
<dd>小标题的解释1dd>
<dd>小标题的解释2dd>
dl>
有时候需要在页面中显示空格、<、>等特殊字符
在HTML代码中同时出现多少个空格、缩进、换行。最后浏览器只会解析出一个空格显示
**总结:**html代码中对空格、缩进、换行不敏感,如果同时出现多个空格、缩进、换行, 页面只会把它们当做一个空格来解析
html 中特殊字符有对应的 转译符 :
将数据以表格的形式在网页中展示
感知表格相关标签:
<table>table> : 代表 表格
<tr>tr> : 代表一行 (row : 行 )
<td>td> : 代表一个标准单元格
代码:
<table>
<tr>
<td>单元格td>
<td>单元格td>
tr>
<tr>
<td>单元格td>
<td>单元格td>
tr>
table>
属性 | 作用 |
---|---|
border | 边框 |
width | 给表格设置宽 |
height | 给表格设置高 |
cellspacing | 规定单元格与单元格之间的空白 |
cellpadding | 单元格内部边框与内容的空白 |
align | 对齐方式(table、tr、td分别设置有不同效果) |
虽然我们可以使用table中的标签来设置标签的一些样式,但是最好不要用,因为将来凡是与样式相关内容都是由css来设置的
总结:
标签 | 作用 | 特点 | |
---|---|---|---|
|
起到表头单元格、标题的作用(代替td) | 文字加粗居中 | |
|
给表格设置标题 | 在表格的最上面显示标题 | |
|
(结构)存放当前表的表头 | 高度自适应(由内容撑开) | |
|
(结构)存放表格主体数据 | ||
|
(结构)一般不用、有兼容性问题 | 高度自适应(由内容撑开) |
注意:
中只能嵌套
或者
标签像一个容器,可以容纳所有的元素上下合并------》跨行合并:属性: rowspan=“合并的个数”------》留住最上,删除其他
左右合并------》跨列合并:属性: colspan=“合并的个数”-------》留住最左,删除其他
1.确定合并哪几个单元格
2.利用左上原则,确定保大保小
3.确定跨行(rowspan)还是跨列合并(colspan)
步骤: