HTML

一、HTML概述
二、基本结构
三、基本标签
- 1.段落标记
- 2.标题字
- 3.换行
- 4.水平线
- 5.预留格式
- 6.粗体字
- 7.斜体字
- 8.插入字
- 9.删除字
- 10.右上角加字
- 11.右下角加字
- 12.font标签
四、实体符号
五、表格
- 1.基本表格
- 2.单元格合并
- 3.th标签
- 4.thead、tbody、tfoot标签
六、背景，图片，视频，声音
- 背景
- 图片
- 声音
- 视频
七、超链接
八、列表
- 1.有序列表
- 2.无序列表
- 3.定义列表
九、表单
- 1.概述
- 2.样例
- 3.用户注册表单
- 4.下拉列表多选
- 5.file控件
- 6.hidden控件
- 7.readonly与disabled
- 8.input控件的maxlength
十、ID属性
十一、div和span
总结

一、HTML概述

超文本标记语言（Hyper Text Markup Language）
主要用于数据的展示
html文件的扩展名是html/htm
直接采用浏览器打开执行

二、基本结构

HTML 的基本结构可以分成三个部分，分别为声明部分，头部和主题部分

声明部分
<!DOCTYPE html>是关于文档类型的声明，用于约束HTML5 文档结构，同时告诉浏览器，使用哪种规范来解析此文档中的代码。
头部
网页头部部分以<head>开始，</head>结束
<title>标签用于描述网页的标题，内容在浏览器的标签页中显示
<meta>标签描述的内容并不显示，它主要用于描述网页内容类型、字符编码信息、搜索关键字等。默认字符集编码为 UTF-8 为国际通用的字符编码，适用于包含中文和英文的页面。

主体部分
包含在之间的内容为网页的主体部分，所有要在页面上显示的内容都要此标签内编写。可以写在主体标签内的标签种类较多，也是学习 HTML 的核心所在。

HTML中的注释的写法
乱码产生是因为文件采用UTF-8方式，但浏览器打开该文件时采用GBK方式打开的，<meta charset="UTF-8">的作用就是告诉浏览器采用哪一种字符编码打开该文件。

三、基本标签

1.段落标记

<p><p/>
用来对一段文字进行分段

2.标题字

<h1></h1>(h1~h6)

3.换行

<br/>

4.水平线

<hr/>

运行结果

5.预留格式

<pre> <pre/>
保留当前文本的格式进行输出，例如代码这种，如果直接输出的话是不会有换行缩进的，全部会输出到一行

6.粗体字

<b></b>

7.斜体字

<i></i>

8.插入字

<ins><ins>

9.删除字

<del></del>

10.右上角加字

<sup></sup>

11.右下角加字

<sub></sub>

12.font标签

设置字体的颜色和大小
<font color="red" size="50">字体标签</font>

四、实体符号

由于诸如大于号（>），小于号（<）等已作为 HTML 的语法符号，因此要想在网页中显示此类特殊符号，就需要使用相应的 HTML 代码来表示，实体字符一般以“&”开头，以“;”结束。

具体用法

运行结果

五、表格

<tr></tr>表示一行
<td></td>单元格标签

1.基本表格

align为对齐方式

<!doctype html>
<html><head><title>表格</title></head><body><center><h1>员工信息列表</h1></center><hr><!--border="1px" 设置表格的边框为1像素宽度。width 宽度height 高度--><table align="center" border="1px" width="60%" height="150px"><!--align对齐方式--><tr align="center"><td>a</td><td>b</td><td>c</td></tr><tr><td>d</td><td>e</td><td>f</td></tr><tr><td>x</td><td>y</td><td align="center">z</td></tr></table></body>
</html>

结果：

2.单元格合并

行合并<rowspan>
列合并<colspan>

<!doctype html>
<html><head><title>表格单元格合并，以及th标签</title></head><body><!--注意事项：1、row合并的时候，删除“下面的”单元格2、col合并的时候，对删除哪个没有要求。--><table border="1px" width="50%"><tr><!--<td>员工编号</td><td>员工薪资</td><td>部门名称</td>--><!-- th 标签也是单元格标签，比td多的是居中、加粗。--><th>员工编号</th><th>员工薪资</th><th>部门名称</th></tr><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>a</td><td>b</td><td rowspan="2">f</td></tr><tr><td colspan="2">d</td></tr></table></body>
</html>

3.th标签

th 标签也是单元格标签，比td多的是居中、加粗

4.thead、tbody、tfoot标签

thead tbody tfoot 在table中不是必须的，只是这样做便于后期的JS代码的编写。

六、背景，图片，视频，声音

背景

图片

声音

<audio src=" "> </audio>

视频

<vedio src=" "> </vedio>

七、超链接

（1）超链接的作用
向服务器发送请求，链接到某个资源
（2）链接到网络中的某个资源
<a href="http://www.baidu.com"></a>
（3）链接到本地的某个资源
<a href="本地文件的相对路径或绝对路径都可以"></a>
（4）图片做超链接
<a href=""><img src=/></a>
（5）超链接的target属性

_blank : 新窗口
_self ：当前窗口（默认就是这种方式。）
_top ：顶级窗口
_parent ：父窗口

（6）用户点击超链接和在浏览器地址栏上直接输入URL是完全相同的效果，只不过超链接更傻瓜式。

除了页面间的链接外，还有一种超链接称为锚链接。
锚链接的主要作用是定位到页面的某一个具体位置。
下面以在同一页面跳转为例讲解锚链接的用法，不同页面间跳转的锚链接用法类似。
一般来说，锚链接实现起来主要分两个步骤。
（1）在页面的目标位置设置标记，该标记也称为锚点，语法为：
<a name=”marker”>目标位置</a>
name 属性用于规定锚的名称，此处锚点名称为”marker”
（2）在页面的源位置设置超链接，语法为：
<a href=”#marker”>源位置</a>

<body>
<a href="#marker">源位置</a><br>
<!—省略部分 html 代码-->
<a name="marker">目标位置</a>
</body>

八、列表

1.有序列表

<ol></ol>
type选择排序符号

2.无序列表

<ul></ul>
type可以选择前面的符号

3.定义列表

定义列表默认没有任何编号，一般用于有多个标题并且每个标题下有一个或多个列表项的情况
使用<dl>标签作为列表的开始，
使用<dt>标签作为每个列表项类别的起始标记，
使用<dd>标签来定义每个类别的列表项

九、表单

<form></form>

1.概述

用户填写表单，提交数据给服务器，所以表单是专门用来收集用户数据的。
一个网页当中可以有多个表单form。

（1）action属性用来指定数据提交给哪个服务器，等同于超链接的href属性，填写请求的url

（2）input标签属于输入域标签

常用属性

type属性

text：文本框，text 也是 type 的默认属性
password: 密码框
radio: 单选框
checkbox：复选框, checked 属性可设置默认被
submit：提交按钮，按此按钮浏览器会将表单的内容提交给 action 属性指定的URL地址
reset：重置按钮，按此按钮会将所有表单元素变为默认值。
button：普通按钮。

发送请求并提交数据时，数据格式遵循HTTP协议，所有浏览器都会采用这种格式：url?name=value&name=value&name=value…，其中name是input标签的name属性，value是input标签的value属性
文本框和密码框的value不需要开发人员指定，用户填写的数据就是value。
submit按钮放到form标签外面无法提交表单
普通按钮不具备提交表单的能力。

2.样例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>表单form</title></head><body><!--表单是以什么格式提交数据给服务器的？http://localhost:8080/jd/login?username=abc&userpwd=111格式：action?name=value&name=value&name=value&name=value&name=value...W3C的HTTP协议规定的，必须以这种格式提交给服务器。重点强调：表单项写了name属性的，一律会提交给服务器。不想提交这一项，就不要写name属性。文本框和密码框的value不需要程序员指定，用户输入什么value就是什么。当name没有写的时候，该项不会提交给服务器。但是当value没有写的时候，value的默认值是空字符串""，会将空字符串提交给服务器。java代码得到的是：String username = "";--><form action="服务器的地址"><table><tr><td>用户名</td><td><input type="text" name="username" /></td></tr><tr><td>密码</td><td><input type="password" name="userpwd" /></td></tr><tr align="center"><td colspan="2"><input type="submit" value="登录" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="清空" /></td></tr></table></form></body>
</html>

3.用户注册表单

form表单method属性：
get:采用get方式提交的时候，用户提交的信息会显示在浏览器的地址栏上。
post：采用post方式提交的时候，用户提交的信息不会显示在浏览器地址栏上。
当用户提交的信息中含有敏感信息，例如：密码，建议采用post方式提交。

method属性不指定时，默认为get
post提交的时候提交的数据格式和get还是一样的，只不过不再地址栏上显示出来。
POST提交的数据还是：name=value&name=value&name=value…
样例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>用户注册的表单</title></head><body><form action="地址">用户名<input type="text" name="username"/><br>密码<input type="password" name="userpwd" /><br>确认密码<input type="password"/><br>性别<input type="radio" name="sex" value="1" />男<input type="radio" name="sex" value="0" checked/>女 <!--单选按钮的value必须手动指定--><br>兴趣爱好<input type="checkbox" name="interest" value="smoke"/>抽烟<input type="checkbox" name="interest" value="drink" checked/>喝酒<input type="checkbox" name="interest" value="fireHair" checked/>烫头<br>学历<select name="grade"><option value="gz">高中</option><option value="dz">大专</option><option value="bk" selected>本科</option> <!--默认选中--><option value="ss">硕士</option></select><br>简介 <!--文本域，文本域没有value属性，用户填写的内容就是value--><textarea rows="10" cols="60" name="introduce"></textarea><br><input type="submit" value="注册" /><input type="reset" value="清空" /></form>    </body>
</html>

4.下拉列表多选

设置multiple属性即可，size设置选择的条目数量

5.file控件

<input type="file"/>文件上传时使用

6.hidden控件

7.readonly与disabled

8.input控件的maxlength

设置文本框中可输入的字符数量

十、ID属性

（1）讲述HTML文档是一棵树（DOM树），树上有很多节点，每个节点一般都会有id属性，id属性具有唯一性，在同一个文档中不能重复，id是该节点的唯一标识。后期所学的javascript语言可以对DOM树上的节点进行增删改，达到动态效果。javascript主要通过节点的id来获取该元素。
1、在HTML文档当中，任何元素（节点）都有id属性，id属性是该节点的唯一标识。所以在同一个HTML文档当中id值不能重复。
2、注意：表单提交数据的时候，只和name有关系，和id无关。
3、id有什么用？

javascript语言：可以对HTML文档当中的任意节点进行增删改操作。
javascript可以对HTML文档当中的任意节点进行增删改，那么增删改之前需要先拿到这个节点，通常我们通过id来拿节点对象。
id的存在让我们获取元素（节点）更方便。

4、HTML文档是一棵树，树上有很多节点，每一个节点都有唯一的id。
javascript主要就是对这棵DOM树上的节点进行增删改的。
<a id=""></a>，超链接有id；
<form id=""></form>，form表单有id；
<input type="text" id="username"/>，input标签有id。

十一、div和span

（1）div和span都可以称为“图层”

图层的作用是为了保证页面可以灵活的布局。
div和span是可以定位的，只要定下div的左上角的x轴和y轴坐标即可。

（2）主要使用在网页布局方面，通过后期所学的CSS可以设置div的宽度、高度、位置等样式。比table的布局更加灵活。
（3）可以嵌套使用
（4）默认情况下div独占一行，span不会独占行。

总结

无

Web前端——HTML基础相关推荐

Web前端-JavaScript基础教程上
Web前端-JavaScript基础教程将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...
Web前端开发基础三剑客学习知识分享
Web前端开发基础知识学习路线分享,前端开发入门学习三大基础:HTML.CSS.JavaScript.除此之外还要学习数据可视化.Vue.React.Angular相关框架,熟练运用框架提升开发效率, ...
Web前端-JavaScript基础教程下
Web前端-JavaScript基础教程下 <script>有6个属性: async对外部脚本有效,可以用来异步操作,下载东西,不妨碍其他操作. charset为src属性指定字符集. d ...
html怎么在线安装,web前端零基础学习教程，如何安装HTML编辑器！
原标题:web前端零基础学习教程,如何安装HTML编辑器! HTML 编辑器推荐: 可以使用专业的 HTML 编辑器来编辑 HTML,菜鸟教程为大家推荐几款常用的编辑器: Notepad++:http ...
Web前端零基础入门——HTML5
[尚硅谷]Web前端零基础入门HTML5+CSS3基础教程丨初学者从入门到精通 html入门 index1 > <html><head><title>我是谁? ...
Web前端技术基础实验报告三之超链接与多媒体文件应用
目录 Web前端技术基础实验报告实验题目:超链接与多媒体文件应用实验目的:熟悉超链接与多媒体文件的插入的相关标签实验内容 : 实验过程及结果 Web前端技术基础实验报告实验题目:超链接与多媒体 ...
现代前端技术解析：Web前端技术基础
最近几年,越来越多的人投入到前端大军中:时至至今,前端工程师的数量仍然不能满足企业的发展需求:与此同时,互联网应用场景的复杂化提高了对前端工程师能力的要求,一部分初期前端工程师并不能胜任企业的工作 ...
web前端开发基础——在网页中使用表格
web前端开发基础--在网页中使用表格文章目录 web前端开发基础--在网页中使用表格前言一.表格 1.表格及其基本使用 2.引用css 二.单元格的合并 1.样例 2.样例代码前言本篇主要 ...
好程序员web前端教程分享web前端入门基础知识
好程序员web前端教程分享web前端入门基础知识,作为合格的Web前端工程师必须得掌握HTML.CSS和JavaScript.只懂其中一两个还不行,必须对这三门语言都要熟悉.下面我们一起来看一看吧! ...
【尚硅谷】Web前端零基础入门HTML5+CSS3基础教程
[尚硅谷]Web前端零基础入门HTML5+CSS3基础教程学习视频来源:哔哩哔哩弹幕网(https://www.bilibili.com/video/BV1XJ411X7Ud?spm_id_from ...

Web前端——HTML基础