html基础

什么是HTML

  1. HTML(HyperText Markup Language):超级文本标记语言
  2. HTML是制作网页的一种语言
  3. HTML不是编程语言
  4. HTML文档通过浏览器的解释和编译,并以我们平常所看到的网页形式展示。

HTML基本结构

1
2
3
4
5
6
7
8
9
10
 <!DOCTYPE html><!-- 头部声明:用来告诉浏览器用什么标准去解释这个文档 -->
<html>
<head><!-- 描述了文档的各种属性和信息 -->
<meta charset="UTF-8"><!-- charset:声明文档使用的字符编码,以防乱码 -->
<title>Document</title><!-- 文档的标题 -->
</head>
<body>
<!-- 文档的内容 -->
</body>
</html>

HTML基本标签

语义化
  • 有利于SEO,让网页更好的被搜索引擎理解
  • 能让页面呈现清晰的结构,提高可读性
  • 便于团队开发和维护
  • 让其他设备更方便解释 如:屏幕阅读器

SEO:是由英文Search Engine Optimization缩写而来, 中文意译为“搜索引擎优化”。SEO是指通过对网站进行站内优化(网站结构调整、网站内容建设、网站代码优化等)和站外优化,以便更好的被搜索引擎搜录和拥有更好的网站排名。

块属性标签
  • div:无语义标签,主要用于布局
  • h1~h6:作为标题使用,并且依据重要性递减。
  • ol:有序列表
  • ul:无序列表
  • p:段落
  • br:换行
块属性标签特点
  • 从上往下排列,每个元素占据一行
  • 可以设定元素的宽和高
  • 元素宽度默认与父级同宽

行内属性标签
  • span:标签是没有语义的,它的作用就是为了设置单独的样式用的。
  • strong:默认加粗、强调文本
  • em:默认斜体、强调文本
  • sa:标签定义超链接、定义锚点,有利于seo 属性
  • img:定义图片
a标签属性
  • href:链接地址,也可以定义锚点
  • target:跳转链接方式
    • _blank-在新窗口中打开。
    • _self 默认。在相同的框架中打开。
    • _parent 在父框架集中打开。
    • _top 在整个窗口中打开。
img标签属性
  • src:图片地址
  • alt:当图像不可见时指定的文本
  • title:鼠标滑过图片时显示的文本
行内属性标签特点
  • 从左往右排列
  • 不可以设定元素的宽、高和上下间距,特殊标签除外,如:img

form表单

表单:表单是一个包含表单元素的区域,用于提交表单内的数据

表单属性
  • action:设置跳转的页面地址,同时也会传送数据到新的页面
  • method:数据传送的方式(get/post)
表单标签
  • textarea:定义多行的文本输入控件

  • select:定义选择列表(下拉列表)

  • option:定义选择列表中的选项

  • label:标签为 input 元素定义标注

  • input:定义文本的变量部分

  • input的常用type属性值分别为:

  • text:文本

  • password:密码

  • button:按钮

  • submit:提交按钮

  • checkbox:复选框

  • radio:单选框

  • file:文件

  • reset:重置

  • hidden:隐藏


table表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<table>
<caption>标题</caption>
<tbody>
<tr>
<td>标签</td>
<td>描述</td>
<td>标签</td>
<td>描述</td>
</tr>
<tr>
<td>table</td>
<td>定义表格</td>
<td>td</td>
<td>定义表格单元</td>
</tr>
<tr>
<td>caption</td>
<td>定义表格标题</td>
<td>thead</td>
<td>定义表格的页眉</td>
</tr>
<tr>
<td>th</td>
<td>定义表格的表头</td>
<td>tbody</td>
<td>定义表格的主体</td>
</tr>
<tr>
<td>tr</td>
<td>定义表格的行</td>
<td>tfoot</td>
<td>定义表格的页脚</td>
</tr>
</tbody>
</table>

标签 描述 标签 描述
table 定义表格 td 定义表格单元
caption 定义表格标题 thead 定义表格的页眉
th 定义表格的表头 tbody 定义表格的主体
tr 定义表格的行 tfoot 定义表格的页脚

table的属性:
  • border: 设置单元格边框

  • cellpadding:设置单元格边框与单元格里的内容之间的距离

  • cellspacing:设置单元格间的距离

  • table合并单元格:

  • colspan:跨行

  • rowspan:跨列

table例子:
1
2
3
4
5
6
7
8
9
<table border="1" cellpadding="5" cellspacing="5">
<tr>
<td rowspan="2">跨行</td>
<td colspan="2">跨列</td>
</tr>
<tr>
<td colspan="2">跨列</td>
</tr>
</table>

url 路径(uniform resource locator)

1.绝对路径

网络资源
四部分组成:
  • 1 协议名:http/https

  • 2 主机名(ip地址/域名)

  • 3 目录路径:

  • 4 文件名:

    本机资源:从盘符位置处开始
  • 2.相对路径

  • 3.根相对路径
    从网站的根目录处开始查找资源文件的位置
    /:表示网站所在的根目录
    eg:/images/front/logo.jpg

    图像

    1. jpeg 图像图像联合专家组 有损压缩
      表现:*.jpg
  • 2.gif 图形结构格式
    表现:.gif
    特点:动态效果

  • 3.png 可移植网络图形
    表现:.png
    特点:支持透明

    链接

    • 锚点:在文档中的某行位置处做记号
      1.定义锚点
      1
      2
      3
      <a name="NAME1">内容</a>
      任意标记的 id 属性
      <any id="NAME2"></any> any:任一标记
    • 2.连接到锚点
      1
      2
      3
      4
       连接到本页锚点处
      <a href="#锚点name"></a>
      连接到其他页锚点处
      <a href="页面url#锚点name"></a>