HTML基础知识总结

小小杰啊

于 2019-04-24 11:27:39 发布

阅读量199

点赞数

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/weixin_44125429/article/details/89489294

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.基本结构
<!doctype html>

设置网页标题网页主体 2.标签
换行

横线文本条目名称2

条目内容2。。。

4.文件路径问题相对路径：相对于某个文件查找注意：相对路径必须有一个前提：所有的文件必须都在同一个根文件夹中。

   1. 如果被访问图片和当前页面在同一个文件夹中，src相对路径=“直接设置文件名称即可”；
   2. 如果被访问图片和当前页面不在同一个文件夹中，如果图片在页面的上一级文件夹中，src="../图片名称";
   注意：  一个 “../”代表返回一级
    3.如果被访问的图片和当前页面不在同一个文件夹中，如果图片在页面的下一级目录中，src="图片所在文件夹/图片名称";

当前目录（文件夹）：./（可以省略不写）
上级目录（文件夹）：…/
下级目录（文件夹）：XXX文件夹/
5.超链接
实现从当前页面跳转到目标页面

文字

例如：
跳转
 点击我跳转到百度首页


target: _self(默认在当前窗口中打开新页面) | _blank (在新窗口中打开新页面)
6.锚链接

☞ 锚链接和超链接的区别：
1. 超链接实现的是从一个页面跳转到另外一个页面
2. 锚链接实现的是在当前页面中跳转

☞ 在本页面内部跳转：

例如：

内容

内容
7.link标签
通过link标签可以设置网页图标注意： 1. 要将link标签放到head标签中 2. link标签中的属性rel="icon"。 3. href=“”图标路径 4. 一般将网页图标放到网站的根目录下。 8.表格

td标签常用属性：
属性名含义常用属性值
width 设置单元格的宽度像素值
height 设置单元格的高度像素值
align 设置单元格中的内容的水平对齐方式 left、center、right
valign 设置单元格中的内容的垂直对齐方式 top、middle、bottom
rowspan 设置要跨行（纵向）合并的单元格数要合并的数量
colspan 设置要跨列（横向）合并的单元格数要合并的数量
bgcolor 设置单元格的背景颜色
background 设置单元格的背景图

表格高级
caption：
用于表示一个表格的“标题文字”（看起来在表格线的外面），写在table标签中。
thead：
用于表示一个表格“头部区域”，其中可以包含若个tr（行），tr中自然应该有td（或th）。
写在table标签中，tr外，即这样的层次：table->thead->tr
tbody：
用于表示一个表格“主体区域”，其中可以包含若个tr（行），tr中自然应该有td（或th）。
写在table标签中，tr外，即这样的层次：table->tbody->tr
tfoot：
用于表示一个表格“底部区域”，其中可以包含若个tr（行），tr中自然应该有td（或th）。
写在table标签中，tr外，即这样的层次：table->tfoot->tr
注意：
1，thead，tbody，tfoot用于对表格的行（tr）进行分组，此时thead组在表格头部，tfoot组在底部。
2，这3个标签出现的推荐顺序是：thead, tfoot, tbody，在他们内部再写tr。
3，thead，tfoot应该只出现一次，tbody可以出现多次。
4，所有没有明确归属到上述3个标签的行（tr），都默认归属到tbody。
9.表单

账号：
邮箱：密码：
性别：男女
爱好：篮球足球羽毛球乒乓球排球
上传文件：

下面是表单框 selected 表示被默认选中北京上海广东天津河北河北海淀顺义朝阳昌平大兴好多张家口保定唐山昌平大兴好多洛阳政治唐山昌平大兴好多这里可以放内容，通常留空文字美容看了电视剧离开账号：效果图 ![表单](https://img-blog.csdnimg.cn/20190424112514642.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEyNTQyOQ==,size_16,color_FFFFFF,t_70)

补充知识
1.结构化语义标签：
article（文章）， aside（侧边）， header（头部）， footer（尾部）， nav（导航）， section（小节，文章的章节）等等。
这些标签主要是为了表示某种“含义”（即所谓语义），但其本身没有什么外观表现，跟div一样。
2.多媒体标签
音频和视频
注意：
1，如果使用了source标签，则audio或video标签上就不要用src属性，否则无效。
2，使用多个source是保证如果前面的视频不能播放就会继续播放后续的替代视频。
3.新增input标签
input标签的type属性在html5中的可用值含义
email 输入邮箱格式
tel 输入手机号码格式
url 输入url格式
number 输入数字格式
search 搜索框（体现语义化）
range 自由拖动滑块
time 时间
date 日期
datetime 时间日期
month 年/月
week 年/周
4.新增属性
placeholder属性：
设定input文本框的默认提示性文本。

autofocus属性：
设定网页一打开的时候自动获得焦点的表单元素。

multiple属性：
设定一个文件域可以一次选择多个文件（原来只能选择一个文件）。

contenteditable属性：
设定一个元素内部的文本内容是“可编辑的”。
5.特殊字符
空格 < > & " ’ © ®
< > & " ’ © ®
5 meta标签（元信息标签）
meta标签用于定义有关网页（文档）的相关信息（不作为网页的内容表现信息）。
meta标签常用的网页（文档）的相关信息如下所示：

l 设定针对搜索引擎的关键词：

l 设定对页面的描述：

l 设定网页的作者或制作组

l 设定网页每隔多少秒数自动刷新一次：

l 设定网页在一定时间后自动跳转到另一个页面：