HTML学习笔记——心动不如行动
作者：互联网
HTML学习笔记
涉及到的知识点有：
一、html简介 1、html是什么? 2、html能做什么(html的作用)? 3、html书写规范 二、html基本标签
1、标签的语法
2、标签的分类
3、常用标签：
1、文本标签：
文本修饰
段落
2、图片标签
3、链接标签
4、列表标签
5、表格标签
三、html表单标签（重点）
1、form标签
2、input标签
3、select标签
4、文本域标签
四、html框架标签及其他
1、框架标签
2、其他标签
3、特殊字符
----------------------------------------------------------------------
一、html简介
1、html是什么?
html是用来描述网页的一种语言。
(1) HTML 指的是超文本标记语言(Hyper Text Markup Language)。
(2) HTML 不是一种编程语言，而是一种标记语言(markup language)，标记语言是一套标记标签(markup tag)(包括:HTML XML XHTML)。
(3) HTML 使用标记标签来描述网页。
超文本 标记 语言
超文本：
(1) 普通文本不能实现的，超文本可以实现，能实现普通文本不能实现的功能，表达能力优于普通文本如声音、图形等。
(2) 包括超链接的文本。
标记：
就是标签，不同的标签能实现不同的功能。
语言：
人与计算机交互的工具。
-------------------------------------------------------------------------------
2、html能做什么(html的作用)?
html通过标签的形式将信息展示给用户。
HTML文档的后缀名? 答：.html/.htm 以上两种后缀名没有区别。
--------------------------------------------------------------------------------
3、html书写规范
(1) html基本结构
<html>
<head>
包括资讯信息：即整个页面的属性、指导浏览器解析的标签、引入外部文件的标签(CSS和js)。
</head>
<body>
我们需要展示的信息(正文)。
</body>
</html>
(2) html标签是以尖括号包裹关键字成对出现的，有开始标签和结束标签(又叫围堵标签)，支持正确的嵌套。
(3) 大部分标签有属性 格式：属性="属性值"（多个属性之间用空格隔开）
(4) 空标签：功能比较单一 。例如：<br></br> = <br/>(又叫自闭合标签)
(5) html不区分大小写，建议使用小写。
注意：所有标记语言，标签中的英文单词没有以数字开头的。比如<1234>。
注意：HTML中不支持：空格、回车、制表符，他们都会被解析成一个空白字符
注意：空的html标签解释
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。
在开始标签中添加斜杠，比如 <br/>，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。
-----------------------------------------------------------------------------
二、html基本标签
1、标签的语法
可以在开始标签名后面添加属性，以此来设置文本样式，属性的语法
<标签名 属性名=”属性值” 属性名=”属性值” ……> 文本 </font>
2、标签的分类
- 单标签：只有一个标签，一般把结尾的斜杠放到标签内的最后面；
- 双标签：有开始，有结尾，属性设置在开始标签内；
3、常用标签
1、文本标签：
1、文本修饰：
font、b、s、i、sub、sup、strong、u、span
2、段落
h(1-6)：标题标签；
p：段落；
hr：分割线，属性：size（高度）、width（宽度）、color、align；
center：内容居中
div: 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。
br:标签插入一个简单的换行符。
--------------------------------------------------------------------------------------------------------------------------
font:修饰文字内容,属性：face、size、color。标签规定文本的字体、字体尺寸、字体颜色。(H5不支持)；
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <p><font size="3" color="red">这是一些文本！</font></p> <p><font size="2" color="blue">这是一些文本！</font></p> <p><font face="verdana" color="green">这是一些文本！</font></p> </body> </html>
b:字体加粗；
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <p>这是一个普通的文本- <b>这是一个加粗文本</b>。</p> </body> </html>
s:删除线；
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <p><s>My car is blue.</s></p> <p>My new car is silver.</p> </body> </html>
i:斜体；
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <p>He named his car <i>The lightning</i>, because it was very fast.</p> </body> </html>
sub:标签定义下标文本
sup:标签定义上标文本
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <p>这个文本包含 <sub>下标</sub>文本。</p> <p>这个文本包含 <sup>上标</sup> 文本。</p> </body> </html>
strong：定义重要的文本。（强调）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <em>强调文本</em><br> <strong>加粗文本</strong><br> <dfn>定义项目</dfn><br> <code>一段电脑代码</code><br> <samp>计算机样本</samp><br> <kbd>键盘输入</kbd><br> <var>变量</var> </body> </html>
u:标签定义与常规文本风格不同的文本，像拼写错误的单词或者汉语中的专有名词。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <p>This is a <u>parragraph</u>.</p> </body> </html>
span:用于对文档中的行内元素进行组合。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <p>我的母亲有 <span style="color:blue;font-weight:bold">蓝色</span> 的眼睛，我的父亲有 <span style="color:darkolivegreen;font-weight:bold">碧绿色</span> 的眼睛。</p> </body> </html>
---------------------------------------------------------------------------------------------------------------------------
h1-h6:
<h1> - <h6> 标签被用来定义 HTML 标题。
<h1> 定义重要等级最高的标题。<h6> 定义重要等级最低的标题。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <h1>这是标题 1</h1> <h2>这是标题 2</h2> <h3>这是标题 3</h3> <h4>这是标题 4</h4> <h5>这是标题 5</h5> <h6>这是标题 6</h6> </body> </html>
p:标签定义段落。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <p>这是一个段落。</p> <p>这是一个段落。</p> <p>这是一个段落。</p> </body> </html>
hr:
<hr> 标签定义 HTML 页面中的主题变化（比如话题的转移），并显示为一条水平线。
<hr> 元素被用来分隔 HTML 页面中的内容（或者定义一个变化）。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <h1>HTML</h1> <p>HTML 是用于描述 web 页面的一种语言。</p> <hr> <h1>CSS</h1> <p>CSS 定义如何显示 HTML 元素。</p> </body> </html>
center:内容居中
div:
<div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。
<div>标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <p>这是一些文本。</p> <div style="color:#0000FF"> <h3>这是一个在 div 元素中的标题。</h3> <p>这是一个在 div 元素中的文本。</p> </div> <p>这是一些文本。</p> </body> </html>
br:
<br> 标签插入一个简单的换行符。
<br> 标签是一个空标签，意味着它没有结束标签。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <p> 使用 br 元素<br>在文本中<br>换行。 </p> </body> </html>
-----------------------------------------------------------------------------------------------------------------------------
2、图片标签
img：图片，属性：
src(路径)、width、height、border(边框)、title(鼠标悬停提示)、alt(图片描述)；
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <img src="smiley-2.gif" alt="Smiley face" width="42" height="42"> </body> </html>
------------------------------------------------------------------------------------------------------------------------------------
3、链接标签
a：超链接标签
属性：href(网址)、target(打开方式)、title(鼠标悬停提示)、name(定位锚点)，功能：链接网络资源、本地定位；
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <a href="//www.runoob.com">访问菜鸟教程!</a> </body> </html>
--------------------------------------------------------------------------------------------------------------------------------------
4、列表标签
ul-li：无序列表，属性：type（符号的样式）；
ol-li：有序列表，属性：type、start、value；
dl-dt-dd：自定义列表；
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
5、表格标签
table：表格根标签，属性：border(边框)、width、height、align；
tr：一行；
td：一列，属性：rowspan(合并行)、colspan(合并列)；
th：标题；
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
三、html表单标签（重点）
1、form标签
form标签
<form></form>
属性：
name 表单名称
action 提交的路径地址
method 常用提交方式（get和post），默认是get提交
get和post的区别（重点）：
(1) get提交：将数据加在地址栏的后面，格式：
file:///D:/learn/Java/MyEclipse/Workspaces/MyEclipse%202017%20CI/day01_html/WebRoot/表单标签/form.html
?username=zhangsan&password=123&sex=male&hobby=football&hobby=paiqiu&city=bj#
即：?name=value&name=value...#
post提交：将数据封装在请求体中(http中会学)，格式：
file:///D:/learn/Java/MyEclipse/Workspaces/MyEclipse%202017%20CI/day01_html/WebRoot/表单标签/form.html#
即：#
(2) get提交相对不安全，post提交相对安全。
(3) get提交有大小限制，根据浏览器不同而不同，post提交不限制大小。
示例：
<form>
<table>
<!--form里面嵌套table-->
</table>
</form>
-------------------------------------------------------------------------------------------------------------------------------------
2、input标签
<input type=" "/>
type 根据type的值不同实现各种不同功能的表单项
text 普通的文本输入框
name="username"
value="张三" <!--张三是文本输入框的默认值-->
password 密码输入框；特点是显示的是掩码
name="password"
value="123456" <!--123456是密码输入框的默认值-->
radio 单选按钮
name 如果想让一组单选按钮互斥，就用指定相同的name属性值，再加value属性值（提交的时候用）
checked 默认被选中
checkbox 复选框（多选）
name 组的概念，就用指定相同的name属性值，再加value属性值（提交的时候用）
checked 默认被选中
file 上传文件的控件
button 普通按钮，没有任何内置的功能
value="注册" <!--注册是普通按钮上的默认值(名字)-->
submit 内置功能，点击会按照action地址提交
reset 重置，点击会清空之前填写的内容，恢复默认值
image 图片按钮，功能类似与submit
src 加载图片
alt 图片的提示文字
hidden 隐藏表单和内容，作用是在提交数据的时候，服务器需要这个数据，但是用户看不到（开发中常用）
<input type="hidden" name="hide" value="xxxx"/>
<p hidden="hidden">这是一段隐藏的段落。</p> <!--这句话用户看不到-->
<p>这是一段可见的段落。</p>
注意：开发中name属性必须要写。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <form action="demo-form.php"> 用户名: <input type="text" name="usrname"><br> <input type="submit" value="提交"> </form> </body> </html>
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
3、select标签
<select></select> 用于下拉菜单
属性：
name 表单项的名称（提交的时候用）
<option></option> 可选项（下拉菜单之间的级联）
属性：
value 表单项的值
selected 默认被选中
示例：
<select name="city">
<option value="bj">北京</option>
<option value="sh" selected="selected">上海</option>
<option value="gz">广州</option>
<option value="sz">深圳</option>
</select>
<select>
<option>海淀</option>
<option>朝阳</option>
<option>昌平</option>
</select>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <form action=""> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> </form> </body> </html>
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
4、文本域标签
<textarea></textarea>
属性：
rows 行数
cols 列数
注意：
默认的文本值在标签体当中。
示例：
<textarea name="textarea" rows="20" cols="50">这是文本区域</textarea>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <textarea rows="10" cols="30"> 我是一个文本框。 </textarea> </body> </html>
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
四、html框架标签及其他
1、框架标签
<frameset></frameset>
属性：
rows 按行划分
cols 按列划分
划分格式： rows="120,*"
<frame/>
属性：
name 名称，方便target根据name值进行定位
src 加载的页面地址
iframe：内联框架
|
<iframe src=" " width="100%" height="50px" frameborder="0"> </iframe> |
frameset-frame：使用该框架结构时，要删除body标签；
|
<frameset rows="100,*"> <frame name="top" src="index.html" /> <frameset cols="50,*"> <frame name="left" src="lianjie.html" /> <frame name="right" src="gsjj.html" /> </frameset> </frameset> |
注意：
<frameset></frameset>与<body></body>会打架，二者不能共存。
-------------------------------------------------------------------------------------------------------------------------------------
2、其他标签
<meta/>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"/>
<meta http-equiv="description" content="this is my page"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link/>
<link rel="stylesheet" type="text/css" href="./styles.css"/>
href 引入css文件的地址
<script></script>
<script type="text/javascript" src=""></script>
src 引入js的文件地址
pre：原文输出；
code：在页面中添加代码；
video：添加视频；
embed：添加音频；
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
3、特殊字符
一个英文空格
> 大于号
< 小于号
© 版权符号（圈C）
® 注册符号（圈R）
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
本人原创，转载请说明出处https://www.cnblogs.com/zyx110/
如若对你有用，记得推荐，如若有误，欢迎改正!
标签：心动,runoob,标签,html,笔记,HTML,菜鸟,文本,com 来源： https://www.cnblogs.com/zyx110/p/10843736.html