html基础

什么是HTML

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

HTML基本结构

 <!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表格

<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例子：

<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.连接到锚点

 连接到本页锚点处
    <a href="#锚点name"></a>
连接到其他页锚点处
    <a href="页面url#锚点name"></a>

html基础

什么是HTML

HTML基本结构

HTML基本标签

语义化

块属性标签

块属性标签特点

行内属性标签

a标签属性

img标签属性

行内属性标签特点

form表单

表单属性

表单标签

table表格

table的属性：

table例子：

url 路径（uniform resource locator）

1.绝对路径

网络资源

四部分组成：

本机资源：从盘符位置处开始

图像

链接