HTML基础教程-CSDN博客

本文链接：https://blog.csdn.net/weixin_43552734/article/details/114379873

前言

从今年1月份左右我开始跟着慕课网的前端课程学习前端，断断续续学习了两个多月了。期间一直使用有道云笔记记录学习的内容，现在集中发布在csdn中，供大家参考。

主体

DTD

DocType Definition文档类型定义：用来定义文档的规范。指明浏览器使用的是哪个版本的html书写规范。

内部声明：
```
<!DOCTYPE html>
```

外部声明：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

DTD版本

html4.0.1：结构和样式做了分离
Xhtml1.0：规范做了拓展升级（代码必须用小写，属性必须用双引号包裹，结束标签必须写关闭字符/

以上两个版本分别包括三个小规范

Strict 严格版：不能使用font/u等废弃标签，不能使用框架集
Transitional 过渡版：可以使用废弃标签，不能使用框架集
Framset 框架集版：可以使用框架集

严格程度：Xhtml1.0 Strict>html4.0.1 Strict>Xhtml1.0 Transitional>html4.0.1 Transitional

html5不基于SGML规范，不再区分3个小规范，所以不需应用DTD。

html标签

属性

manifest：定义一个URL ？？？
xmlns：规定xml的命名空间namespace

head标签

base标签

<base href="全局地址" target="全局属性">

href规定页面中所有相对链接的基准URL，针对href属性为相对路径的标签使用，
target规定在何处打开页面中的链接，针对没有设置target的标签使用

<!DOCTYPE html>
<html lang="en">
<head>
    <base href="E:\爱创前端\CSS\代码\引入css\">  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 由于base标签指定了基准URL，所以a的完整地址为E:\爱创前端\CSS\代码\引入css\test.html -->
    <a href="test.html">a</a>
</body>
</html>

title标签

标签内部放置网页的名字，帮助我们提高搜索引擎优化

<title>百度</title>

meta标签

提供页面相关的元信息

content：定义与http-equiv或者name相关的元信息
http-equiv：把content属性关联到HTTP头部

name：把content属性关联到一个名字中

<!--keywords和description的使用会提高搜索引擎优化-->
<!--定义网页关键词-->
<meta name="keywords" content="前端" />
<!--定义网页描述-->
<meta name="description" content="前端培训" />

charset指定字符集

字符集：定义了当前文件使用的字符

中文字库：UTF-8、GBK
```
<meta charset="UTF-8">
```

body标签

body标签是网页主体，给客户浏览的区域。里面放置html标签书写的网页结构

标签分类

容器级标签：h1-h6、pre、div
文本级标签：p、code、span

容器级标签可以嵌套文本级标签，文本级标签不能嵌套容器标签

属性

对元素的描述以及控制信息

必需属性
可选属性
全局属性：所有标签都可以使用的属性。eg：id、class、style、lang
事件属性

标签的常用属性

image：src引入文件的地址、alt图片加载失败提示的内容、title鼠标悬停时提示的文本

标题标签h（h1-h6）

默认样式（加粗、具有换行符）、不要利用标题来改变字体样式

不能相互嵌套。如果要改变标题的大小，可以使用span标签、而不是嵌套高一级的h标签

    <!--错误示例，将会显示为两行-->
    <h4>四级<h1>标题</h1></h4>   
    
    <!--正确示例-->
    <h4>四级<span style="font-size=50px">标题</span></h4>

其他标签

段落标签p

图片标签img

src：引入文件的路径
alt：图片加载失败提示的内容
title：鼠标悬停时显示的内容

路径

本地路径

线上路径

<!--百度页面上的logo-->
<img src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="baidu" />

如果是本地服务器，可以直接使用/开头

<!-- 如果是本地服务器，可以省略域名 -->
<img src="/tech/1.png" alt="">

超链接标签a

href：超链接地址
- 只写#，打开当前页面
title：文本提示信息
target：页面打开的方式
- _self：在当前窗口载入文档（页面）
- _blank：在新的窗口中载入文档
- _top：在顶层窗口载入文档
- _parent：在父级窗口载入文档
- framename：在指定窗口载入文档

锚点

在要跳转的标签声明id
超链接中的href属性：链接#id

<!--跳转到当前页面的顶部-->
<p id="top">顶部</p>

<a href="#top">跳转到顶部</a>

无序列表

ul标签：定义无序列表

ul里可以放一个或者多个li标签
ul只能放li标签，不能放其他内容

li标签：定义列表项

li是一个容器标签，可以放置任何的内容标签，包括ul标签和li标签。

列表项前面默认为小圆点的样式，可以通过type属性修改（ul的type标签定义整个列表的样式，li的type标签定义该列表项的样式）

dist默认实心圆
circle空心圆
square实现方块

有序列表

ol标签：定义有序列表，和ul用法差不多

type：定义序列号样式
- A：大写英文字母
- a：小写英文字母
- 1：阿拉伯数字
- I：大写罗马数字
- i：小写罗马数字
start：定义列表符号从第几个开始排序
reversed：定义序列号倒序。如果序列号小于等于0，则显示为0、-1、-2、…

li标签：定义列表项

在css中，可以使用list-style设置列表的属性： 比如list-style-type设置列表项的样式

定义列表

dl标签：定义定义列表

dt标签：定义标题

dd标签：定义描述

dt和dd是同一级别的标签。dd是对dt的解释、说明和定义
dl只能放置dt和dd标签
dt后面可以没有dd，表示没有解释说明

表格

table标签定义表格

tr定义表格行

td定义单位格

合并单元格：
td和th有两个属性可以合并单元格

rowspan：跨行合并
colspan：跨列合并

边框属性

border：定义表格边框的大小。0为无边框
bordercolor：定义边框颜色
background：定义表格背景图片
bgcolor：定义表格颜色
cellspacing：定义边框与边框之间的距离
cellpadding：定义内容与边框之间的距离
align：定义表格的水平对齐方式

表格划分

表格标题caption

表头thead

主体部分tbody

表单

使用表单标签可以提交数据到服务器

<form>定义表单

属性

action:数据所提交到的地址，默认当前页面
method：表单提交方式，get和post
- get请求地址栏会携带所提交的数据，post不会
- get请求安全级别较低
- get请求数据大小有限制
enctype

输入项

大部分输入项使用<input type="输入类型"/>,且要使用属性name，用于提交数据

普通输入项<input type="text"/>
密码输入项<input type="password"/>
单选输入项<input type="radio"/>
- 必须使用属性value
- 同一组属性name必须相同
- 默认选中属性：checked=“checked”
复选输入项<input type="checkbox"/>
- 必须使用属性value
- 同一组属性name必须相同
- 默认选中属性：checked=“checked”
文件输入项 <input type="file"/>

下拉输入项

生日:<select name="birth">
        <option value="0">请选择</option>
        <option value="1999">1999</option>
        <option value="1998">1998</option>
     </select>

必须有value属性
默认选中属性 selected=“selected”

文本域

<textarea cols="10" rows="10"></textarea>

提交按钮<input type="submit" value="注册”/>
- value为按钮的文本
重置按钮<input type="reset"/>
普通按钮<input type="button"/>