本人作为一个即将入坑全栈的不知名的小码农,准备记录下自己学习过程中遇到的问题,以及学习到的各种知识,希望能在记录的过程中加深印象,也方便日后的复习。主要用作经验分享与学习记录,文章如有不妥或错误之处,还请指出,谢谢大家。
一、HTML
HTML称为超文本标记语言,是一种标识性的语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等
1.1 基本结构
<!DOCTYPE>
<html lang="ZH-cn">
<head>
<meta charset="utf-8" >
<title>标题</title>
</head>
<body>
网页正文内容
</body>
</html>
1.2 标签元素划分
上图引用自原博客如有侵权联系删除,谢谢。
二、常见HTML标签对照表
标签 | 描述 |
---|---|
<! – xxx --> | <!- -这是一段注释- -> |
<!DOCTYPE> | 声明该文件为HTML文件 |
html | 此元素可告知浏览器其自身是一个 HTML 文档 |
head | 头部元素的容器,可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等 |
body | 文档主体,包括文本图像、表格和列表等等 |
footer | 定义文档或节的页脚 |
a | 定义超链接 |
audio | 定义声音,比如音乐或其他音频流 |
b | 粗体文本 |
br | 换行(单标签) |
button | 定义一个按钮 |
canvas | 图形容器,用来放置图表和其他图像 |
caption | 定义表格标题,需要跟在table标签之后 |
div | 定义文档中的分区或节,盒模型容器 |
form | 表单 |
h1~h6 | 分别对应六级标题 |
header | 义文档的页眉(介绍信息) |
hr | 在 HTML 页面中创建一条水平线 |
img | 向网页中嵌入一幅图像 |
input | 用户输入信息 |
label | 为 input 元素定义标注,标签 |
li | 定义列表条目 |
link | 定义文档与外部资源的关系 |
nav | 定义导航链接的部分 |
ol | 定义有序列表 |
p | 定义段落 |
script | 定义客户端脚本 |
span | 被用来组合文档中的行内元素 |
style | 用于为 HTML 文档定义样式信息 |
table | 定义 HTML 表格 |
tbody | 表格主体(正文) |
th | 表格内的表头单元格 |
td | 定义 HTML 表格中的标准单元格 |
title | 定义文档的标题 |
tr | 定义 HTML 表格中的行 |
ul | 定义无序列表 |
三、HTML标签具体使用
1、<!DOCTYPE>
<!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 html 标签之前。<!DOCTYPE> 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令
<!DOCTYPE html>
2、html、head、body
(2.1)html:
(html, /html) 标签限定了文档的开始点和结束点,在它们之间是文档的头部和主体。正如您所了解的那样,文档的头部由 (head ,/head) 标签定义,而主体由(body,/body)标签定义。
(2.2)head:
下面这些标签可用在 head 部分:base、link、meta、script、style、title。title定义文档的标题,它是 head 部分中唯一必需的元素
(2.2.1)base:
base标签是HTML语言中的基准网址标记,它是一个单标签,位于网页头部文件的head标签内,一个页面最多只能使用一个base元素,用来提供一个指定的默认目标,也算是一种表达路径和连接网址的标记。比如由base制定了一个URL地址,接下来你所要调用的文件或图片等就无须再填写完整的地址,只需写上该文件名或图片名即可
(2.2.2)link:
是网页头部head中的元素,在html语言中,link标签是单独出现的,并且可以被多次使用,该元素的用途是与外部文件建立链接。
rel属性:定义当前文档与被链接文档之间的关系。
href属性:定义被链接文档的位置
type属性:指定所连接文档的MIME类型,css的MIME是type/css,一般使用
type=“text/css”
(2.2.3)meta:
meta标签提供关于HTML文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。
(2.2.4)script:
script标签用于定义客户端脚本,比如 JavaScript。script 元素既可以包含脚本语句,也可以通过 src 属性指向外部脚本文件。必需的 type 属性规定脚本的 MIME 类型。JavaScript 的常见应用时图像操作、表单验证以及动态内容更新。
src属性:定义引用外部脚本的URI,这可以用来代替直接在文档中嵌入脚本。指定了 src 属性的script元素标签内不应该再有嵌入的脚本。
type属性:定义script元素包含或src引用的脚本语言。属性的值为MIME类型; 支持的MIME类型包括text/javascript、text/ecmascript、application/javascript、 application/ecmascript。如果没有定义这个属性,脚本会被视作JavaScript
(2.2.5)title:
浏览器会以特殊的方式来使用标题,并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样,当把文档加入用户的链接列表或者收藏夹或书签列表时,标题将成为该文档链接的默认名称。
(2.2.6)style:
在 style 中,规定在浏览器中如何呈现 HTML 文档。type 属性是必需的,定义 style 元素的内容。唯一可能的值是 “text/css”。style 元素位于 head 部分中。
(2.3)body:
表示网页的主体部分,也就是用户可以看到的内容,可以包含文本、图片、音频、视频等各种内容!
<!DOCTYPE html>
<html>
<head>
<title>这是一个标题</title>、
<meta charset='utf-8' > /*声明编码*/
<base href="www.xxxxx.com/images/" target="_blank"> /*target标签用于定义访问该链接时打开新的浏览器窗口*/
<link rel="stylesheet" type="text/css" href="style.css"> /*引用外部的style.css样式文件*/
<style type="text/css">
h1 {color:red}
p {color:blue}
</style> /*css样式*/
<script type="text/javascript">
document.write("<h1>Hello World!</h1>")
</script> /*脚本执行*/
<!-- HTML4 and (x)HTML -->
<script type="text/javascript" src="javascript.js">
<!-- HTML5 -->
<script src="javascript.js"></script> /*引入外部js脚本文件*/
</head>
<body>
<a href="1.png"> /*使用base标签*/
<a href="www.xxxxx.com/images/1.png"> /*不使用base标签*/
</body>
</html>
3、a
使用标签 a来设置超文本链接。超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。在标签 a 中使用了href属性来描述链接的地址。
默认情况下,链接将以以下形式出现在浏览器中:
(1)一个未访问过的链接显示为蓝色字体并带有下划线。
(2)访问过的链接显示为紫色并带有下划线。
(3)点击链接时,链接显示为红色并带有下划线。
如果为这些超链接设置了 CSS 样式,展示样式会根据 CSS 的设定而显示。
在a标签里面有四种链接方式
(1)内部链接: 内部链接在同一级的文件夹上:加上文件名和后缀即可
(2)外部链接: 外部链接跳转到网址一定要加上:http://在加上网址名即可
(3)空连接: 空连接跳转到当前页面的顶端:在a标签里面的href里面加上#即可
(4)描点链接: a标签通name属性实现锚点的定位,再通过href属性指向具体锚
点。注意,这里name属性只是针对a标签,其他标签不可随意添加name属性,而且其余诸如表单之类的name属性的意义作用是不同的。所以a标签的锚点链接有局限性,如果想在其他元素中设置锚点,需要在其他标签中添加一层带有name属性的a标签。
/*图片链接*/
<a href="www.xxx.com">
<img src="./img.jpg" width="50" height="50">
</a>
<a href="www.xxxxx.com" target="_blank"></a>
<a href="javascript:void(0)" click="show()" /> /*点击a标签调用js函数show方法*/
<a href="text.html">内部链接</a>
<a href="http://www.biadu.com">外部链接</a>
<a href="#">空链接</a>
<a href="#miao">描点链接</a>
<a id="miao">上述描点链接的目标</a>
<a href="#miao">描点链接</a>
<a name="miao">上述描点链接的目标</a>
4、footer
在html5开发使用footer标签时,把当作普通div标签对待即可,只不过一般用于网站底部布局。一般情况下一篇网页只有一个底部区,所以使用最好只使用一次footer即可。需要注意:footer是html5新增的,在IE8及以下IE浏览器不兼容,谨慎使用。
<footer class="color-F00">
©Copyright 2020 xxx科技公司版权所有 | xxICP备xxxxxxxx号-xx
</footer>
5、button
(1)button 标签定义一个按钮。它的作用是在网页中显示一个类似按钮的内容,它可以点击,拥有一定的效果。在 button 元素内部,您可以放置内容,比如文本或图像。(2)input标签也可以使用来定义按钮,但是它是一个空标签(没有元素内容),不能放置元素内容,所以它的功能没有button标签强大
(3)button标签功能虽然强大,但是在html表单中建议使用input标签来创建按钮,因为对于button标签在html表单中,不同的浏览器可能提交不同的按钮值。
(4)button标签的基础常见属性
autofocus: 按钮获得焦点,值为:autofocus;
disabled: 禁用该按钮,值为:disabled;
form: 关联一个或多个表单,值为:表单的id属性值;
name: 按钮的名称,值为:自定义;
type: 按钮的类型,只可以是:button、reset、submit;
value: 按钮的初始值,值为:自定义;
<button type="button">普通按钮</button>
<button type="button" onclick="alert('hello, world')">pick me!</button>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
6、canvas
在html中,canvas标签是使用来规定一个图形容器(画布),然后通过脚本( JavaScript等)来绘制图形,比如:绘制路径、盒、圆、字符以及添加图像等,canvas标签默认没有边框和内容,如果不使用脚本来绘制图形,它本身是没有任何效果的,所以它必须和脚本配合使用来绘制图形<canvas id="Canvas_1" width="300px" height="200px">
绘制好的图形
</canvas>
7、div
div元素,是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。div的起始标签和结束标签之间的所有内容都是用来构成这个块的,其中所包含元素的特性由div标签的属性来控制,或者是通过使用样式表格式化这个块来进行控制。width 表示div的宽
height 表示div的高
padding 表示div的内边距
margin 表示div的外边距
margin: 0 auto; //div居中
border 表示div的表框
border-color 边框的颜色
border-top-color 上边框颜色
border-right-color 右边框颜色
border-bottom-color 下边框颜色
border-left-color 左边框颜色
border-color: 上 右 下 左
border-width 边框宽度
border-style 边框风格 dashed(虚线) dotted(点线) solid(实线) double(双线)
8、form、input、label、textarea、select
(8.1)form:
form标签用于为用户输入创建 HTML 表单。表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。表单用于向服务器传输数据。
form属性
(1)accept: 服务器接收到的文件的类型(html5版本也不支持);
(2)accept-charset: 服务器可处理的表单数据字符集;
(3)action: 当提交表单时向何处发送表单数据;
(4)enctype: 在向服务器发送表单数据之前如何对其进行编码,method="post"时可以使用,值可以是:multipart/form-data、text/plain等;
(5)method: 用于发送表单数据的HTTP方法,值可以是:get、post;Method的值为get时,是通过URL传内容与参数,这个时候我们通过网址URL能看见自己填写内容提交处理
Method的值为post时,是通过类似缓存传填写内容与参数,而URL是不能看到form表单填写内容提交内容。
(6)name: 规定表单的名称,在xhtml中也废弃,使用id来代替;
(7)target: 在何处打开action属性中的地址,值可以是:_blank、_self、_parent、_top;
(8.2)input:
input标签用于搜集用户信息。根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
(8.2.1)name属性
name属性用于规定input元素的名称,用于对提交到服务器后的表单数据进行标识,或者在客户端通过javascript引用表单数据。注意只有设置了name属性的表单元素才能在提交表单时传递它们的值。
(8.2.2)checked属性
checked属性规定在页面加载时应该被预先选定的input元素,也可以在页面加载后,通过javascript进行设置注意;checked属性只能与type="radio"或type="checkbox"的input元素配合使用
(8.2.3)disabled属性
disabled属性规定应该禁用input元素。被禁用的字段是不能修改的,也不可以使用tab按键切换到该字段,但可以选中或拷贝其文本disabled属性无法与type="hidden"的input元素一起使用
(8.2.4)maxlength属性
maxlength属性规定输入字段的最大长度,以字符个数计,该属性只能与type="text"或type="password"的input元素配合使用
(8.2.5)size属性
size属性对于type="text"或"password"的input元素是可见的字符数;而对于其他类型,是以像素为单位的输入字段宽度
(8.2.6)value属性
value属性为input元素设定值。对于不同的输入类型,value属性的用法也不同:
type=“button”、“reset”、"submit"用于定义按钮上的显示的文本
type=“text”、“password”、"hidden"用于定义输入字段的初始值
type=“checkbox”、“radio”、"image"用于定义与输入相关联的值
注意1:type="checkbox"或"radio"必须设置value属性
注意2:value属性无法与type="file"的input元素一起使用
(8.2.7)placeholder属性
placeholder属性提供占位符文字,描述输入域所期待的值。占位符会在输入域为空时显示出现,在输入域获得焦点时消失
placeholder属性适用于以下类型的input元素:text、search、url、tel、email、password
(8.2.8)required属性
required属性规定必须在提交之前填写输入域(不能为空)
required属性适用于以下类型的input元素:text、search、url、telephone、email、password、date pickers、number、checkbox、radio、file
(8.2.9)type属性
(1)type=“text”:创建单行文本输入框
<input type="text" size="20" maxlength="20" value="文本输入框">
(2)type=“password”:创建密码输入框
<input type="password" size="30" maxlength="20" value="">
(3)type=“radio”:单选按钮
/* 所有的radio应具有相同的name属性值 */
/* value值,表示每个选项的值 */
<label><input name="sport" type="radio" value="basketball" />篮球 </label>
<label><input name="sport" type="radio" value="fooball" />足球 </label>
<label><input name="sport" type="radio" value="" checked />排球 </label> /* checked属性表示默认选中 */
(4)type=“checkbox”:复选框
/* 所有的checkbox应具有相同的name属性值 */
/* value值,表示每个选项的值 */
/* checked属性表示默认选中 */
北京<input type="checkbox" value="beijing" checked name="city">
上海<input type="checkbox" value="shanghai" checked name="city">
深圳<input type="checkbox" value="shenzhen" name="city">
香港<input type="checkbox" value="hongkong" name="city">
澳门<input type="checkbox" value="aomen" name="city">
(5)type=“button”:普通按钮
input元素的类型为普通按钮,在value属性中输入的值为按钮上显示的文本,name代表该按钮的名称,onclick表示处理程序
<input type="button" value="确认" name="bt" onClick="">
(6)type=“submit”:提交按钮
提交按钮不需要设置onclick参数,在单击提交按钮时可以向服务器发送表单数据,数据会发送到表单的action属性中指定的页面,value属性中的值为按钮上显示的文字。
<input type="submit" value="提交" name="sm" />
(7)type=“reset”:重置按钮
重置按钮的作用是点击之后表单会刷新回到默认状态,在value属性中输入的值为按钮上显示的文本;
<input type="reset" value="重置" name="reset"/>
(8)type=“hidden”:隐藏域
隐藏域在页面上不显示,用来存储与传递表单的值,当用户提交表单时,隐藏域的内容会一起提交给处理程序。
<input type="hidden" name="hidden" value="需要向服务器提交的值">
(9)type=“file”:文件域
文件域用于从本地硬盘中上传文件并提交。
<input type="file" name="file" value="选择文件" />
(10)HTML5新增input type属性
(10.1)type=“url”: 输入URL字段
(10.2)type=“tel”: 用来输入电话号码
(10.3)type=“search”: 搜索字符串
(10.4)type=“email”: 改控件用来输入"email"地址,若用户输入非email格式,那么再支持HTML5的浏览器中提交改表单时,会提示为不是合法格式。
(10.5)type=“number”: 数字字段
用于输入数字的字段,其中min允许的最小值,max为允许的最大值,value规定默认值,还有step可规定合法数字间隔。
<input type="number" name="number" min="2" max="8" value="3" />
(10.6)type=“date”:日期控件
可以用来选择或输入日期,包括(年/月/日),不包括时间:其中设定min属性控制开始日期,max属性控制结束日期。如果使用type=“time” 则用来输入时间,不包括日期。
<input type="date" min="2019-05-09" max="2020-05-09" />
(10.7)type=“month” 年月控件
<input type="month" value="2019-05" />
上述部分借鉴自原文章地址的内容,如有侵权,请联系删除,谢谢。
(8.3)label标签:
label标签通常和input标签一起使用,label标签为input元素定义标注(标记)。label标签的作用是为鼠标用户改进了可用性,当用户点击label标签中的文本时,浏览器就会自动将焦点转到和该标签相关联的控件上;
即,当用户没有选中选定框,只是点击了文字也可以完成选择功能。
<label><input type="checkbox" name="fav" value="LOL">英雄联盟</label>
<label><input type="checkbox" name="fav" value="wangzhe">王者荣耀</label>
<label><input type="checkbox" name="fav" value="QQ">QQ飞车</label>
Label标签内for属性的值为自定义,一般与想实现点击会触发控件对象的ID对应相同。
<input name="sex" id="man" type="radio" value="" />
<label for="man">男</label>
<input name="sex" id="woman" type="radio" value="" />
<label for="woman">女</label>
/*for属性应该与input中id对应,当点击“女”的时候,会自动选中绑定的woman radio*/
(8.4)textarea标签:
在html中,textarea标签是用来定义一个多行的文本输入控件,在文本输入域中可以输入任意长度的文本
<textarea rows="8" cols="40">
我是一个文本框,可以输入任意长度的文本!!!
</textarea>
(8.4.1)基本属性
cols:文本区域内可见的列数(值:number)。
disabled:禁用文本区域(值:disabled)。
form:定义文本区域所属的一个或多个表单(值:form_id)。
maxlength:文本区域允许的最大字符数(值:number)。
name:文本区域的名称(值:text)。
placeholder:一个简短的提示,描述文本区域期望的输入值(值:text)。
required:文本区域是必需的/必填的(值:required)。
rows number:文本区域内可见的行数(值:number)。
(8.5)select标签:
在html中,select标签是使用来定义下拉列表的,通常在网页中用来实现下拉菜单。select标签定义的下拉列表中的各个选项由option标签来定义
<select name="sel">
<option value="gaungzhou">广州</option>
<option value="shenzhen">深圳</option>
<option value="shandong">山东</option>
<option value="beijing">北京</option>
</select>
常见属性:
(8.5.1)selected
selected预选中,注意:如果不设置selected属性的话,那么选项框中的第一项会默认被选中。
/*size:size大于1,下拉框会呈现滚动条,一次显示size条数目*/
/*multiple 多选*/
<select name="sel" size="3" multiple>
<option value="1">广州</option>
<option value="2">深圳</option>
<option selected value="3">山东</option>
<option value="4">北京</option>
</select>
(8.5.2)optgroup
下拉框分组功能,用optgroup标签包着option标签,optgroup label属性为组名
<select name="city" size="5" multiple="multiple">
<optgroup label="广东省">
<option value="1">广州</option>
<option value="2">深圳</option>
</optgroup>
<optgroup label="浙江省">
<option value="1">杭州</option>
<option value="2">温州</option>
</optgroup>
</select>
9、img
在html中,img标签是使用来在网页中嵌入一幅图像。从技术上讲,图像并不是插入到网页中,而是链接到网页中,img标签的作用是为被引用的图像创建占位符。img标签在网页中很常用,比如,引入一个logo图片、按钮背景图片、工具图标等等。(9.1)alt属性是使用来规定图像的替代文本,当图像不显示时,将显示该属性值内容。搜索引擎会读取该属性值内容作为图像表示的意思,所以搜索引擎优化中需注意该属性
(9.2)src属性和alt属性是标签必须属性,虽然,alt属性不写也不会出错,但是建议必须写上。如果不写,搜索引擎是看不懂图像是什么意思的。还有就是如果图片不能显示了,那么会出现空白,读者也不知道这是什么意思
<img src="yellowDuck.png" alt="小黄鸭" width="200px" height="200px">
10、nav
在html中,nav标签是html5版本中新增的标签,是使用来定义导航链接的部分。 nav标签中的内容默认没有显示效果,只表示该区域是导航链接部分;nav标签只起语义的作用,没有实际的显示效果; nav标签中的内容通常是一个列表<nav>
<a href="#">首页</a>
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">新闻</a>
</nav>
10、span
span标签是内联元素,不像块级元素(如:div标签、p标签等)哪样有换行的效果;如果不对span元素应用样式,使用span标签没有任何的显示效果;span标签可以设置id或class属性,这样不仅能增加语义,还能更方便的对span元素应用样式;<p>在内容中我希望<span style="color:blue;">这部分字体蓝色</span>的做法</p>
12、table
简单表格由table元素以及一个或多个tr(行标签)、th(表头单元格标签)、td(普通单元格标签)组成
<table border=1>
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
</table>
复杂的表格还包括caption(表格标题)、col(定义列)、colgroup(对表格中的列进行组合)、thead(组合表头的内容)tbody(组合表格的主题内容)、tfoot(组合表格的脚注内容)
<table width="400" border="1">
<caption>表格的标题</caption>
<col align="left"/>
<col align="left"/>
<col align="left" />
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>脚注1</td>
<td>脚注2</td>
<td>脚注2</td>
</tr>
</tfoot>
</table>
常见属性
1.width: 规定表格的宽度
2.height: 规定表格的高度
3.align属性: 规定表格相对周围元素的对齐方式
4.border属性: 规定表格边框的宽度,border属性会为每个单元格应 用边框,并用边框围绕表格,border属性值改变,只会改变表格外边框,表格内部的边框不会改变
5.cellspacing属性: 规定单元格之间的间距
cellspacing设为0时,表格间没有间距,表格边框将紧挨着显示,若要使表格边框合并,则需使用CSS的border-collapse:collapse
6.cellpadding属性: 规定单元格边界与单元格内容之间的间距,默认为0
13、ul 、ol、 li
这里html ul li无序列表布局与ol li有序列表布局语法与结构相同,不同是默认无初始化CSS样式情况下一个是有序号列表(1、2、3、4 ;I、II、III这类有序序号),一个为没有序号的列表。无论是有序ol li列表还是无序的ul li列表,在日常时候都需要重新设置CSS样式使用布局<ul>
<li></li>
<li></li>
<li></li>
</ul>