目录
a. 无序列表 (unorder list)(导航、侧边栏)
1.W3C
W3C(World Wide Web Consortium)即万维网联盟。W3C中国
W3C标准包括:结构化标准语言:HTML、XML
表现标准语言(CSS)
行为标准(DOM、ECMAScript)
2.HTML定义
HTML(Hyper Text Markup Language)即超文本标记语言,是Internet上用于编写网页的主要标记语言。
HTML是一种建立网页文件的语言,通过标记式的指令(Tag),将超文本——影像、声音、图片、文字、动画等内容显示出来。
HTTP的制定使浏览器在运行超文本时有了统一的规则和标准。
HTML5 提供了一些新的元素和一些有趣的新特性,同时也建立了一些新的规则。
(新的网页功能:使用网页实现动态渲染图形、图表、图像和动画,以及不需要安装任何插件直接使用网页播放视频等)
HTML5 优势:微软、Google、苹果、Opera、Mozilla均支持HTML5。
市场的需求
跨平台
3.HTML基本结构
<!DOCTYPE html><!-- 表示HTML5文档协议声明标签,协议的不同会影响整个页面的显示效果 -->
<html><!-- 表示文档标签 -->
<head><!-- 标签表示文档的头部标签,在<head>标签中的信息是用于给浏览器识别的内容,如这里的<meta charset="UTF-8">用于告知浏览器该文档的编码为UTF-8 -->
<meta charset="UTF-8">
<!-- 我是注释,不会显示在网页上,注释的内容写在符号之间 -->
<title>我的第一个HTML文件</title>
</head>
<body><!-- 标签为我们在浏览器中看到的内容 -->
我的第一个HTML文件
</body>
</html>
<!-- 注释内容 --> 注释内容不会显示在网页上
如<title>、</title> 成对的标签,分别叫开放标签和闭合标签。
单独呈现的标签(空元素),如<hr/>;意为用 / 来关闭空元素。
4.HTML头部标签
1)DOCTYPE标记
<!DOCTYPE> 标记位于文档的最前面,告诉浏览器,我们要使用什么规范。
主要用于浏览器解析文档标签的依据,协议的不同会影响整个页面的显示效果。
2)html标记
<html> -- </html> --里面包括<head>和<body>等标记, HTML文件中所有的内容都应该在这两个标记之间。
可以通过lang属性设置当前文档的主要语言是什么,帮助搜索引擎解析文档。 如:<html lang="zh-cn"></html>表示当前文档语言为中文。 <html lang="en"></html>表示当前文档语言为英文。
3)head标签
<head>标记用于定义HTML文档的头部信息,也称为头部标记,紧跟在<html>标记之后。
主要用来封装其他位于文档头部的标记,例如<title>、<meta>、<link>及<style>等,用来描述文档的标题、作者以及和其他文档的关系等。
一个HTML文档只能含有一对<head>标记,head标签定义的内容只是提供给浏览器使用,不用于用户的呈现。绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。
4)meta标签
描述性标签,一般用来做SEO。(Search Engine Optimization,搜索引擎优化),必须位于<head>标记之内。
<meta>标记可提供有关页面的元信息(meta-information)位于文档的头部,不包含任何内容。
<meta> 标签的属性定义了与文档相关联的名称/值对。
<meta name="keywords" content="HTML,ASP,PHP,SQL">
<meta name="description" content="来这个地方可以学习HTML">
"keywords" 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时,会用这些关键字对文档进行分类。
5)title标签
<title>标记用于定义HTML页面的标题,即给网页取一个名字,必须位于<head>标记之内。一个HTML文档只能含有一对<title></title>标记,<title></title>之间的内容将显示在浏览器窗口的标题栏中。
<title>我的网页标题</title>
title标签对于网站SEO至关重要,标题的好坏直接影响网站的SEO。
6) link标签
<link>标记最常用的用法是用来链接外部的CSS文件,必须位于<head>标记之内。
<link rel="stylesheet" type="text/css" href="theme.css" />
此外还可以用来引入网站的icon图标
<link rel="shortcut icon" href="<http://www.baidu.com/favicon.ico>" />
5.HTML内容标签
1)标题标签
标题标签用<h1> - <h6> 来表示,其中<h1> 定义最大的标题。<h6> 定义最小的标题。
从<h1> - <h6>,相对于当前文档的重要性递减。
<h1>一级标题是重中之重,一般运用于网站标题或者头条新闻上;
<h2>二级标题主要出现在页面的主体内容的文章标题和栏目标题上。
<h3>三级标题一般出现在页面的边侧栏上。
由于页面层级关系不能太深,<h4>、<h5>和<h6>一般较少出现。
建议h1标签在整个页面中最多出现一次(当然可以超过,但是不利于搜索SEO)。
标题标签是用于体现文档内容的重要性,不要仅仅是为了产生粗体或大号的文本而使用标题。
ps:浏览器会自动地在标题的 前 后 添加空行。
2)段落标签
段落是通过<p>标签定义的,p标签之间不会相互共用一行,会独占一行或者多行的空间。
3)水平线标签
hr标签,表示在页面中插入一条水平线,hr标签是单标签,不需要闭合标签。
4)换行标签
<p>标记中的属性align能够设置段落中文字的对齐方式,对齐方式分为左对齐,居中和右对齐。
语法:<p align="对齐方式"> — </p> ( left,center,right )
5)span标签
<span>标签被用来组合文档中的行内元素,span标签可以跟其他的span标签共用一行。
通常情况下,需要给span标签应用样式,否则与页面上的其他文本没有什么任何区别。
6)div标签
<div>标签用来组合块级元素,这样就可以使用样式,对他们进行格式化。
7)img标签
<img> 标签向网页中嵌入一幅图像。从技术上讲,<img> 标签并不会在网页中插入图像,而是从网页上链接图像。
<img> 标签创建的是被引用图像的占位空间。最好专门创建一个文件夹放resource。
<img src="path" alt="备选文本” title="悬停文字" width=“宽度” height=“长度”>
alt 属性:(图像显示不出时,图像备选文本)。
title属性:(鼠标在图像上悬停时,出现的文字)
../ 表示当前页面的上一级目录 (相对路径)
<img> 标签有两个必需填的属性:src 属性 和 alt 属性。
8)字体样式标签
粗体 <strong> </strong> 斜体 <em> </em>
9)滚动标签
<marquee>标记可以让文字滚动,常用属性有:滚动方向(direction)、滚动方式(behavior)、滚动次数(loop)、滚动速度(scrollamount)、滚动延迟(scrolldelay)、背景颜色(bgcolor)、宽度(width)、高度(height)等。
<marquee direction="滚动方向" behavior=“滚动方式” >滚动的文字</marquee>
direction的值有up、down、left、right,向左滚动是默认情况;
behavior的值有scroll、slide、alternate(循环滚动、只滚一次,来回交替滚动);
loop的值为整数;
scrollamount的值为文字每次移动的长度,以像素为单位;
scrolldelay的单位是毫秒。
10)多媒体标签(bgm/音频/视频)
背景音乐:<bgsound src="音乐文件的路径及名称" loop=“播放次数”> (单标签)
多媒体文件:<embed src="多媒体文件的路径及名称" width=“播放器宽度” height=“播放器的高度”></embed>
视频:<video src="视频文件的路径及名称" controls autoplay></video>
音频:<audio src="音频文件的路径及名称" controls autoplay></audio>
路径可以是相对路径也可以是绝对路径
相对路径:是以当前文件所在的路径为基准进行相对文件的查找。
绝对路径:是完全路径,是文件在硬盘上的真正路径。
11)超链接标签
超链接的作用是建立从一个位置到另一个位置的链接。 成对出现
利用超链接不仅可以进行网页间的相互访问,还可以使网页链接到其他相关的多媒体文件上。
../ 表示当前页面的上一级目录 (相对路径)
同一级别目录下可以省略路径名。
<a href=“链接路径(必填)” target=“目标窗口的打开方式”>链接内容(文字or图片)</a>
target的值有_self、_blank、 _top、 _parent,_self是默认值。
_blank表示目标页面会在一个新的空白窗口中打开;
_top表示目标页面会在顶层框架中打开;
_parent表示目标页面会在当前框架的上一层打开。
12)锚链接
定位文章具体位置,类似于书签。
-
首先在页面上命名锚记
如在页面顶部如下代码<a id="top">(可以写字可以不写)</a>(id做锚记)
-
然后在页面的最下面可以这样写<a href="#top">回到顶部</a>。
图片锚链接
<a href="你要链接到的地址" target="_blank" ><img scr="图片地址URL" width="宽度" height="高度" alt="图片说明" border="0" ></a>
文字锚链接
<a href="所要链接的地址" target="_blank">输入的文字</a>
LOGO锚链接
<img src="图片logo地址" border="0">
把以下代码加在已经存在的面板里(想选那种方式就加那段代码,不要全部都加)
13)功能性链接
<a href="mailto:邮箱地址“>点击联系我</a>
QQ链接,QQ推广(先在页面登录QQ页面会自动生成代码)
14)特殊符号
空格  
<font size="数字">文字<font>
15) iframe内联框架(实现了网页的 拼装组合)
<iframe src="path" name="名字" frameborder="数字" width=“数字” height=“数字”></ifram>
和<a href="跳转地址" target=“iframe的名字”>点击跳转</a> 搭配使用
在iframe里面打开href的地址
6.块元素和行内元素
块元素
无论内容多少,该元素独占一行。(p段落、h1-h6几级标题)
行内元素
内容撑开宽度,左右都是行内元素的可以排在一行。(a、strong、em)
可以放在一行里的标签,都是行内元素
7.HTML高级标签
1)列表标签
a. 无序列表 (unorder list)(导航、侧边栏)
无序列表用<ul>标签来表示。在每个列表项目文字之前,以项目符号作为每条列表项的前缀。
项目符号默认是●,可以通过<ul>的type属性,改变无序列表的项目符号。
<ul type="disc"></ul>
type的值有disc ●,circle○,square■。
其中的列表项用<li>标签表示,无序列表的各个列表项之间没有顺序级别之分,是并列的。
b. 有序列表 (order list)(试卷、问答)
有序列表用<ol>标签来表示。也有项目类型,可以通过type属性设置自己的项目类型。
项目序号默认是数字。
type的值有1(1、2、3、4····)、a(a、b、c、d···)、A(A、B、C、D····)、i(i、ii、iii、iv···)、Ⅰ(Ⅰ、Ⅱ、Ⅲ、Ⅳ···)
可以通过start属性改变项目序号的起始值,起始值只能是数字,但同样对字母、罗马数字起作用。
其中的列表项也用<li>标签表示,其各个列表项按照一定的顺序排列定义。
c. 自定义列表
自定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号.
自定义列表用<dl>标签来表示;
其中的列表项用<dt>标签表示;
每个列表项的解释用<dd>标签表示。
2)表格标签
简单的 HTML 表格由 table 元素
以及一个或多个 tr、th 或 td 元素组成(行、列、单元格组成)
表格的code都需写在<table></table>之间 table的属性有border、style。
colspan=“跨的列数值”,rowspan=“跨的行数值”,align=“对齐格式”
table的属性,border=“边框(像素)”
<caption>表格标题</caption>
tr 元素定义表格行;row
th 元素定义表头;head
td 元素定义表格单元
3)表单标签
表单就是用户提交数据到后台的一个虚拟单子,表单一般由文本框、下拉列表、单选、多选、文本域等组成。
A.表单语法框架
<form method="post" action="result.html">
<p> 名字:<input name="name" type="text"></p>
<p> 密码:<input name="pass" type="password"></p>
<p>
<input type="submit" name="Button" value="提交"/>
<input type="reset" name="Reset" value="重填"/>
</p>
</form>
面试必考!
method的值有get、post,提交方式
get 可以直接在URL中看见我们提交的信息(高效、不安全、默认值)
post 在URL中看不见我们提交的信息(比较安全,可以传输大文件)
可以在审查元素中抓住post,network,headers,form data中看见密码!(可以加密)
action 表示向何处发送表单数据(必填)(可以是网站 or 请求处理地址)
From标签
<form></form>表单的域标签,用于包裹整个表单的内容。
Input标签
Input标签是文本框、单选、多选、按钮等。Type属性不同的取值决定了input标签的作用。
<input /> 自闭合标签
name属性,指定表单元素的名称,一般所有都要写!
value属性,元素的初始值。type为radio时必须指定一个值。
size属性,指定表单元素的初始宽度。当type为text或password时,表单元素的大小以字符为单位。对于其他类型,宽度以像素为单位。文本框长度
maxlength属性,type为text或password时,输入的最大字符数。
type的值有text、password、checkbox(多选)、radio(单选)、submit()、reset(清空表单)、file、hidden、image和button,默认值是text。
B.文本框与密码框
type的值为text,表示是单行文本框,输入内容以单行显示。(可以输入数字、字母、文本)
type的值为password,表示是密码框,在其中输入的字符都以星号*****或者圆点●显示。
此时value可以是用户自定义或官方设定默认值
C.单选框和多选框
radio单选框,一般由○表示,name一般写成同一组,name不一样就可以同时选。
checkbox多选框,一般由□表示,name一般写成同一组。(数组形式获取)
checked属性,属性值只有一个checked,可以省略属性值,在单选按钮和多选按钮中表示此按钮被选中。type为radio或checkbox时,指定按钮是否是被选中。可以用户自选或官方默认选中
D.按钮
实现和用户的交互,主要配合脚本语言(JavaScript)来进行表单的处理。
此时value中的值是可以显示在按钮框里
关闭窗口:<input type="button" value="关闭" οnclick="window.close()"/>
type值为image时,也可以跳转。
Select标签
select 元素可创建单选或多选菜单,<select> 元素中的 <option> 标签用于定义列表中的可用选项。
1.下拉列表
selected 直接写出,表示默认选中某一项。
2.列表标签
列表标签(左)
Multipe:也是一个单属性。值只有一个multiple。设置了此属性,表示select标签表现为列表标签,否则表示下拉列表标签。
文本域
文本域实现上传照片或文件的功能,由文本框和“浏览”按钮组成。
文本框<textarea name="" id="" cols="30" rows="10"></textarea>
文件域 type=“file”
文件域,可以选择直接输入上传文件的路径,“浏览”按钮可以选择文件。
使用文件域上传文件时,一定不要忘记设置form表单信息提交编码方式为(enctype=“multiple/form-data”)
Lable标签
Lable标签,可以在你点击文本时,让label指向的表单标签获得焦点。
8.页面结构分析
header😁
标题头部区域的内容
footer😁
标记脚部区域的内容
section
Web页面中的一块独立区域
article
独立的文章内容
aside
相关内容或应用(常用于侧边栏)
nav😁
导航类辅助内容
9. 简单验证
邮箱验证
<input type="email" name="邮箱名字"> (自动验证)
<input type="button" value="上传" name="upload">
URL验证
<input type="url" name="url"> (自动验证)
数字验证
<input type="number" name="num" max="100" min="0" step="1">(自动验证)
滑块
<input type="range" name=“音量或者进度条” min="0" max="100" step="2">
搜索框
<input type="search" name="search">
10.表单的应用
隐藏域
hidden (属性还在,但是隐藏了,可以传递默认值,提前设定value)
只读
value=“定值” readonly (就不能改了)
禁用
disabled (点不了选不了了)
11.表单初级验证
为了安全,减轻处理压力。
方框里的灰色提示信息
文本框中才有用 placeholder=“提示信息”
非空判断
required 直接使用
正则表达式 😁
pattern="用什么查什么"
12.HTML的不足之处
HTML不可扩展。
HTML不允许应用程序开发者为具体的应用环境定义自定义的标记。
HTML只能用于信息显示。
HTML可以设置文本和图片显示方式,但没有语义结构。
即HTML显示数据是按照布局而非语义的。
随着网络应用的发展,各行业对信息有着不同的需求,这些不同类型的信息未必都是以网页的形式显示出来。例如:当通过搜索引擎进行数据搜索时,按照语义而非按照布局来显示数据会具有更多的优点。
HTML的缺点使其交互性差,语义模糊,这些缺陷难以适应Internet飞速发展的要求,因此一个标准、简洁、结构严谨以及可高度扩展的XML就产生了。
13.参考
清华大学出版社出版:Java Web开发(从入门到实战)ISBN:978-7-302-52911-8
文章基本框架参考,我做了扩展:HTML入门
视频参考:哔哩哔哩【狂神说Java】HTML5