文章目录
一、HTML
1、初始HTML
HTML 指 超文本标签语言，HTML 是通向 WEB 技术世界的钥匙。
**WEB 技术：Web就是在Http协议基础之上, 利用浏览器进行访问的网站。Web Page指网站内的网页. 我们常说的WWW(World Wide Web 万维网)**就是这个概念下的内容。
而Internet(互联网)则是一个更大的概念 Internet 上不只有Web, 还有FTP, P2P,Email, 或者App等其他多种不同的互联网应用方式. Web只是其中最广泛的一种 Internet的概念要大于Web。
“Web已死 Internet永生”, 意思是传统网站的重要性可能会降低, 新生的互联网服务可能会取代其重要性. 虽然单纯从流量上看, Web已经不是最大的互联网应用. 但由于其主体是文本(或者说是超文本hypertext), 流量开销本身就远小于视频等其他应用. Web可能仍是最最重要的互联网载体。
1.1、网络是什么?
将信息保存在web服务器上，人们可以使用客户机(浏览器)读取该信息。这种架构称为“服务器-客户端架构”。
为什么HTTP ?
最初，这些信息都是作为文本存储的——这就是为什么在现在文本、媒体和文件都通过该协议进行交换的情况下，名称超文本传输协议仍然存在。
1.2、如何保存、检索和保存信息?
在web上存储信息的最基本和最长久的方式是在HTML文件中。为了更好的理解，让我们举一个公司发布价格信息的简单例子，这样它的供应商就可以下载并查看这个列表，它包含有价格和生效日期的产品。这在服务器上作为HTML文件保存，可以使用web浏览器查看。浏览器从服务器请求文件，服务器端起它并关闭连接。
HTML是一种用于创建web页面的标准标记语言。换句话说，它是一个带有标记的简单文本文件，帮助浏览器找到如何显示信息的方法。
2、HTML语言和基础标签
HTML：超文本标签/标记语言，由大量HTML标签组成的，用来描述网页。不是编程语言只是一种标记。通过对标记的解析来描述页面。通常我们是用浏览器去解析HTML。
2.1、HTML标签
HTML的标签就是组成HTML网页的内容，这些内容因场景不同会被称为：标记、标签、元素、节点、对象。构成是：
- HTML标签是由尖括号包含的关键词组成的，比如：<HTML>
- HTML标签通常成对出现。比如:<HTML></HTML>
- 第一个是开始标签，第二个是结束标签。
- 开始和结束标签也可以被称为开放、闭合标签。
HTML标签编写的文本文件就是网页，包含HTML标签和纯文本。
HTML语言标签的语法：标签可以嵌套， 但是不能交叉只能包含。
<关键字 属性="值">内容</关键字>
2.2、HTML主体部分
主要由HTML、BODY、HEAD组成。
<HTML><!--根节点-->
<head><!--head 浏览器部分-->
<title>标题栏</title>
</head>
<body><!--body 文本部分-->
<font color="blue" size="7">This is HTML Page.</font>
</body>
</HTML>
HEAD下其它标签：
以<head>标签为主，包含脚本、样式、元数据等。
<meta charset="UTF-8"><!--绑定数据 不现实但可以读写-->
<title>html基础标签</title><!--标题 ：1.浏览器工具标题 2.收藏夹显示的标题 3.搜索引擎结果的标题-->
<!--<base></base> 绑定链接默认地址和默认目标的标签-->
<!--<link></link> 定义与外部资源的关系，通常链接外部样式表。-->
<!--<style></style> 内连样式-->
<!--<script> zcvcxzcdxz</script> 关联js的标签-->
3、HTML其它常用标签
3.1、居中标签
<center><!--居中标签--></center>
3.2、font字体
修改文字样式，**color属性：**指代字体颜色 ，其值是一些封装了颜色的单词或RGB （#FFF #999999）。 size属性： 字体大小 其值是1~7的数字，或 +n 在原有内容上增加2个层次但不超过7 。
<font color="#FF0000" size="+3" id="top">这是我的首页面。</font>
3.3、段落和标题
段落标签p: 它自身有换行和令其后内容换行的特征。
标题标签h: 有 1~6 个取值，数字越大字体越小。
<p>我是标签 <font color="#FF0000" size="5">段落里的标记</font></p>
<!--hn 标题标签 1~6 数字越大字体越小-->
<h1>标题1</h1>
3.4、文本分割线、换行和特殊字符
**文本分割线hr：**width表示分割线宽度单位是【px像素 和 百分比会自适应】。
**换行b’r：**用于文本和标签后的换行。
转义字符: 一些有意义的单词和&组成。
<!--文本分割线 width 宽度 px像素 百分比会自适应-->
<hr color="red" width="50%"/>
<!--转义字符: 代表空格 空几个就是几个& 代表& < <> > -->
<br/><!--换行-->
3.5、超级链接
**超级链接a：**可以点击后跳转到另一位置的标签，可以是另一个网页也可以是本网页的另一个地方。
<!--a 超级链接 href 跳转的地址 target 跳转方式 _blank 新窗口 _self 当前值 _parent 父类 无框架时等效于_self _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口-->
<a href="https://www.baidu.com" target="_blank">百度</a>
<!--name 属性设置锚点 失效时请使用id-->
3.6、span和div
<!-- HTML 块元素 大多数 HTML 元素被定义为块级元素或内联元素。
1.HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
2.HTML <span> 元素是内联元素，可用作文本的容器。
<span> 元素也没有特定的含义。-->
<div style="background-color:green">div3</div>
<span style="background-color:#00FFFF">span1qhgwehqv</span>
3.7、有序和无序列表
使用有序列表ol和无序列表ul，都是通过li来组成列表的每一项。
<!-- ol 有序的 type属性 1（默认） i
ul 无序的 type 默认● square ■ circle ○-->
<ol type="i">四大名著
<li>《师徒四个送快递》</li>
<li>《富二代落魄史》</li>
<li>《卖草鞋的百万富翁》</li>
<li>《名营企业奋斗史》</li>
</ol>
<ul type="square">sony第四世代神作
<li>《新战神》</li>
<li>《美国末日》</li>
<li>《对马岛之魂》</li>
<li>《死亡搁浅》</li>
</ul>
3.8、表格
table表格，每一行由tr组成，称之为单元行。第一行每一个单元是th称之为标题格。其他行每一个单元td称之为单元格。
<!--表格 table 标签 属性{border:边框 cellspacing 外间距 cellpadding 内边距}
align:水平排列方式 left center right table上 整个表格不作用于内容 tr上整行 td上单个单元格
rowspan:合并行 colspan:合并列
-->
<table border="1px" width="750px" height="240px" cellspacing="0px" cellpadding="0px" align="center">
<!--valign:垂直排列方式 top middle bottom -->
<tr align="center" valign="bottom"><!--tr 单元行-->
<!--<th>编号</th><th>姓名</th><th>年龄</th><!--th 标题格 -->
<td><b>编号</b></td><td>姓名</td><td>年龄</td></tr><!--td 单元格 -->
</tr>
<tr><td align="center">1</td><td>张三</td><td>23</td></tr><!--td 单元格 -->
<tr><td align="center">2</td><td>李四</td><td>33</td></tr>
<tr>
<td>3</td><td rowspan="2" align="center">麦哲伦</td><td>46</td>
</tr>
<tr>
<td>4</td><td>28</td>
</tr>
<tr>
<td>5</td><td colspan="2" align="center">略</td>
</tr>
</table>
3.9、表单与表单元素
form表单，通过form标签组成表单根元素。收集用户录入信息发送到服务器指定位置 action 提交的位置和方向 method 提交方式 get/post。
**表单：**收集用户输入的信息发送到服务器指定位置。
<!--form表单 收集用户录入信息发送到服务器指定位置 action 提交的位置和方向 method 提交方式 get/post-->
<form action="OK.html" method="get"></form>
**表单元素：**可以接收用户输入的各标签。
input标签的type类型为：text、password、hidden、radio、checkbox、submit、button、reset、file。即：文本输入框、密码框、隐藏域、单选框、多选框、提交按钮、按钮、重置按钮、文件选择。
select标签下拉列表，option是组成列表的每一个选项。
<!--为了可以接收用户输入设置了各种标签称为 表单元素 必须在form下才能搜集-->
用户名：<input type="text" name="username" value="默认值"/><!--输入文本框 type:text 文本框 value 输入的内容--><br/>
密码：<input type="password" name="pwd" value="123"/><!--密码输入框--><br/>
性别：男：<input type="radio" name="sex" value="男" checked/> 女：<input type="radio" name="sex" value="女"/>
<!--单选框 type:radio 如果多个单选框加入互斥只需要name一致即可 checked 选中状态 值：true checked 或者不写值 --><br/>
<!--下拉菜单 select代表下拉 option代表下拉选项 selected 选中状态，值：true selected 或者不写值-->
地址：<select>
<option value="">----</option>
<option value="beijing" selected>--北京--</option>
<option value="xian">--西安--</option>
</select>
<br/>
<!--复选框 type:checkbox checked 选中状态，值：true checked 或者不写值 name一致也不会互斥-->
爱好：篮球：<input type="checkbox" name="hobby" value="篮球" checked/>
足球：<input type="checkbox" name="hobby" value="足球"/>
排球：<input type="checkbox" name="hobby" value="排球" checked/>
<br/>
<input type="file" value="" name="filename"/><!--选择文件-->
<br/>
<!--文本域 rows 占行数 cols占列数 -->
备注：<textarea rows="10" cols="30" name="more">说点什么吧.....</textarea>
<!--按钮-->
<br/>
<input type="button" value="按钮"/><br/><!--毫无作用按钮-->
<input type="reset" value="清除"/><br/><!--清除按钮 所填内容归零-->
<input type="submit" value="提交"/><br/><!--提交按钮 让表单内容提交到指定位置-->
<input type="hidden" name="xu" value="热铁别摸！！！"/><!--隐藏文本域-->
2089
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
