1.HTML
<input />
<input type='button' value='按钮' />
1.1.概念
1.1.1.HTML文件是什么
HTML表示超文本标记语言（Hyper Text Markup Language）, HTML文件是一个包含标记的文本文件, 必须有htm标记或者html扩展名。
可以通过浏览器(Browser)直接解析并显示效果, 也叫作"静态页面"
HTML标签是大小写无关的，<b>跟<B>表示的含义相同。
1.1.2.HTML基本语法
- 标签 在
<>之间 ,在 < 与 标签名 之间 不能有空格 - 标签
tag元素element结点node - 有的标签 有开始标签 与 结束标签 <标签> 内容 </标签>
- 标签之间可以嵌套 存在父子关系
- 标签是大小写无关的，
<b>跟<B>表示的含义相同。 - 标签内可以编写属性 attribute 属性名 =“属性值”
1.1.3.HTML文件的基本结构
<html></html> 标签定义HTML文档( document )的开始和终止。
<head></head> 用于页面的基本信息设置.
<title></title> 标签之间的文本是文档标题，它被显示在浏览器窗口的标题栏。
<meta>信息设置, 如 : 字符编码
<body></body> 标签之间的文本是正文，会被显示在浏览器中。
HTML5的基本结构
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<input />
<input type='button' value='按钮' />
</body>
</html>
HTML4的基本结构
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
</head>
<body>
</body>
</html>
1.1.4.元素分类
1.1.4.1.按结构
-
单标签 : 独立使用
-
嵌套标签 : 组合使用
有<标签>开始 </标签>结束, 也可以单独使用
1.1.4.2.按样式
HTML 标签可分为以下几类：
-
块级标签（Block-level elements）：
这些标签用于在 HTML 页面中创建块元素，通常用于在页面中创建段落、标题、列表、表格、DIV 区块等等。
它们是由一个块级元素开始，一个块级元素结束，中间可以包含其他块级元素或内嵌行级元素。
通常占用页面的一行, 支持样式盒子
常见的块级元素有
<div>,<h1>,<p>,<ul>,<ol>,<li>和<table>等。 -
行内标签（Inline elements）：
这些标签用于在 HTML 页面中创建行内元素，通常用于标记文本内容、超链接、加粗、斜体等等。
它们只影响它包含的文本，并不会影响文本周围的排版。
常见的行内元素有
<a>,<b>,<i>,<em>,<strong>和<span>等。 -
行内块级标签（inline-block elements）：这些标签具有行内元素的特点，但是可以设定宽高，可以和其他行内元素或块级元素在同一行上显示。
常见的行内块元素有
<img>,<input>,<button>,<textarea>等。
注意：以上分类并不是完全准确的，有一些标签的表现即不是块级元素也不是行内元素，例如：<head>、<body> 和 <html> 等标签。
1.2.文本标签
类似 word 的功能
1.2.1.(**)段落标签<p></p>
通过段落标签，可以将文本内容分为多个段落。
段落内容会根据浏览器显示区域的宽度自动编排。
Spring 是一个开源的 Java 开发框架，
它提供了一种全新的编程思想和体系结构，通过依赖注入和面向切面编程等特性，
帮助开发者更加高效地进行企业级应用的开发。
Spring 的核心思想是 IoC（Inversion of Control）
和 AOP（Aspect-Oriented Programming）。
<p>
Spring 是一个开源的 Java 开发框架，
它提供了一种全新的编程思想和体系结构，通过依赖注入和面向切面编程等特性，
帮助开发者更加高效地进行企业级应用的开发。
</p>
<p>
Spring 的核心思想是 IoC（Inversion of Control）
和 AOP（Aspect-Oriented Programming）。
</p>
1.2.2.(**)标题标签<h1></h1>到<h6></h6>
标题元素由标签<h1>到<h6>定义。
<h1>定义了最大的标题元素，<h6>定义了最小的标题元素。
<h1>h1标题</h1>
<h2>h2标题</h2>
<h3>h3标题</h3>
<h4>h4标题</h4>
<h5>h5标题</h5>
<h6>h6标题</h6>
1.2.3.(**)换行标签<br/>
当需要结束一行文本，并且不想开始新段落时，使用<br>标签。<br> 标签不管放在什么位置，都能够强制换行。
1.2.4.(**)注释标签<!-- -->
注释标签<!-- -->用来在HTML文件中插入注释。
注释会被浏览器忽略，即该内容不会显示出来，但是在页面源代码内仍然可以看到。
1.2.5.水平线标签<hr/>
水平线标签<hr>用于在网页中显示一个分割内容的水平线。通过水平线标签可以把文档内容分成具有明显边界的几个部分。
主要属性:
size : 厚度 、color : 颜色 、width : 宽度 、 align : 对齐方式
1.2.6.预格式化文本<pre></pre>
文件按照原始码的排列方式,空格、回车、TAB有效。
1.2.7.(**)字体标签<font>
<font> 字体样式, face字体, size字体大小(1~7), color色彩
1.2.8.格式化文字
这是<b></b> 加粗 标签 | 这是 <strong></strong> 加粗 语意标签 |
|---|---|
这是 <i></i> 倾斜 标签 | 这是<em></em> 倾斜 语意标签 |
| 这是` 标签 | 这是<ins></ins>下划线 语意标签 |
这是<del></del 删除 | 这是
<strike></strike> 删除
|
这是<big></big 放大字体 标签 | |
这是 <small></small> 缩小字体 标签 | |
这是 <sub></sub>下标 标签 | |
这是<sup><sup 上标 标签 |
1.2.9.特殊字符
< < 小於号或显示标记
> > 大於号或显示标记
& & 可用於显示其它特殊字符
" " 引号
® ® 己注册
© © 版权
™ ™ 商标
  半方大的空白
  全方大的空白
(**)不断行的空白
¢ ¢ 分
£ £ 英镑
¥ ¥ 人民币元
§ § 章节
× × 乘号
÷ ÷ 除号
1.3.表格标签
类似 execl 功能
1.3.1.标签结构
table 是一套 嵌套标签
table > caption, tbody, thead, tfoot > tr > th, td
table 表格标签
caption 标题标签
thead，tbody，tfoot 表格的不同部分
tr 行
th 标题单元格
td 标准单元格
每行中的 或 数量是一样的
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>学校</th>
<th>补充</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>王小二</td>
<td>花园小学</td>
<td>好孩子</td>
</tr>
<tr>
<td>2</td>
<td>赵小四</td>
<td>花园小学</td>
<td>帅小伙</td>
</tr>
<tr>
<td>3</td>
<td>李小三</td>
<td>苗苗小学</td>
<td>无</td>
</tr>
</tbody>
</table>
1.3.2.重要属性
1.3.2.1.border: 边框 宽度
border 取值正整数 , 修饰 table
1.3.2.2.width 宽度 height 高度
width 可以是正整数, 也可以是百分比 , 可以修改 table , th , td
height 可以是正整数 不可以是百分比
1.3.2.3.align 左右对齐 valign 上下 对齐
内容对齐方式
align 可选值 left 左 center中 right右, 可以修改 tr th td 及 table
如果将align属性添加在table标签上,控制的是当前table在他父标签里水平的位置
valign 水平对齐 可选值 top上 middle中 bottom下
1.3.2.4.colspan 合并格 rowspan 合并行
colspan , rowspan 取值正整数 , 修饰 td
1.4.表单标签
1.4.1.form表单
打包传递的信息
action 跳转的目标 用于写 URL
method 请求模式 默认get 通常使用post
<form action="http://www.baidu.com" method="post">
<input type="submit" value=""/>
</form>
1.4.2.input 元素标签 常见属性
1.4.2.1.type类型
type 标签类型 可取值有:
text 文本框 默认, password 密码 ,
checkbox 多选 , radio 单选
button 按钮, reset 重新设置, submit 提交表单
hidden 隐藏
file 文件
date 日期, number 数字
<form action="http://www.baidu.com" method="post">
text文本框 : <input type="text" name="" id="" value="abc" readonly placeholder="请输入文本" /> <br>
password密码框 : <input type="password" name="" id="" value="" /> <br>
<hr>
radio 单选框 : <input type="radio" name="rr" id="" value="A" checked />A
<input type="radio" name="rr" id="" value="B" />B
<br>
checkbox 复选框 : <input type="checkbox" name="cc" id="" value="1" checked /> 1
<input type="checkbox" name="cc" id="" value="2" /> 2
<br> <hr>
button 按钮 : <input type="button" id="" value="按钮" disabled /> <br>
reset 重置 : <input type="reset" id="" value="重置" /><br>
submit提交 :<input type="submit" id="" value="提交"/><br>
<hr>
hidden 隐藏 : <input type="hidden" name="hh" id="" value="看不到" /> <br>
<hr>
file 文件 : <input type="file" name="ff" id="" value="" /> <br>
<hr>
date 日期 : <input type="date" name="" id="" value="" /> <br>
number 数字: <input type="number" name="" id="" value="" />
</form>
1.4.2.2.value 值 name 标识
当表单进行提交时, 可以以name 属性为标识将value属性的值 传递给目标
name 传递信息时的标识
radio , checkbox : 也用来进行分组
value 两个作用 1.传递信息 2.显示的信息
有的即显示, 又传值 : text , password , date , number
只显示 , 不传值 : button , reset , submit
不显示 , 只传值 : radio , checkbox , hidden
file : 显示选择的文件名, 传递的二进制流
1.4.2.3.其它属性
id 本地(区域内的)的唯一标识
checked 被选中 checkbox 多选/radio 单选 两个标签使用
min/max/step 最小值/最大值/步伐 number标签使用
maxlength 内容最大长度
placeholder 输入提示
required 必须填写
readonly 只读, 不可以修改, 可以传递信息
disabled 禁用, 不可以操作, 不能传递信息
1.4.3.select 下拉框
是一个嵌套标签, 由 <select> , <option> 组成, 可以在多条信息选择其中一条
<select> 下拉框
<option> 下拉框子标签
option 属性 :
value 传递值 , 表单提交时, 传递被选中option的value属性值
innerText 显示的内容, 就是开始标签与结束标签之间内容, 不用定义, 但可以通过 JavaScript 获取
selected 默认被选中
<select name="" id="" >
<option value="1" >inner a</option>
<option value="2" selected="selected" >inner b</option>
<option value="3" >inner c</option>
</select>
1.4.3.1.多选下拉框
在 <select> 结点上增加 multiple 属性
下拉框 的样式发生变化, 此时按住 Ctrl 键, 用鼠标可以选择多个选项
<select name="" id="" multiple >
<option value="1" >inner a</option>
<option value="2" selected="selected" >inner b</option>
<option value="3" >inner c</option>
</select>
1.4.4.textarea 文本域标签
可以输入 多行信息, 并能生成滚动条
rows 默认行数
cols 默认列数
<textarea rows="5" cols="60" >inner</textarea>
1.4.5.label 转焦 标签
通常用于标注输入类标签
for 对应 元素的id属性 , 当 点击 <label> for属性值对应的id属性值的元素会获得焦点
<label for="inp" >转焦 : </label>
<input id="inp"/>
1.5.其它常用内容
1.5.1.img 图片标签
<img> 图片标签
src 属性 图片的路径
alt 鼠标指向时提示
width 宽
height 高
border 边框
<img src="../img/1.jpg" alt="说明: 一张图片"/>
<br>
<img src="../img/1.jpg" width="100"/>
<img src="../img/1.jpg" height="100"/>
<br>
<img src="../img/1.jpg" width="150" height="50" >
<br>
<img src="../img/1.jpg" border="5" />
1.5.1.1.相对路径
以当前所在文件夹为基点 找到是终的共同结点
../ 向上一层
./ 当前一层
1.5.2.超链接 <a>
通过点击 切换到其它资源上
href 跳转的目标 用于写 URL
target 使用target属性，你可以定义从什么地方打开链接地址。
_blank 将连结的画面内容，开在新的浏览视窗中
_parent 将连结的画面内容，当成文件的上一个画面。
_self 将连结的画面内容，显示在目前的视窗中
_top 将框架中连结的画面内容，显示在没有框架的视窗中
<a href="http://www.baidu.com" target="_blank" >baidu</a>
1.5.2.1.超连接 锚点
# 代表本页面
name 锚点名
1.5.3.列表
HTML 中有三种常用的列表标签：<ul>、<ol> 和 <dl>。
-
<ul>：无序列表，指一组项目，每个项目之间没有中断，通常用小圆点或其他符号作为项目符号。通常用于表示一组相关性不强的项目，可以随意使用顺序。
<ul>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
<ol>：有序列表，指一组项目，每个项目之间没有中断，其中每个项目默认都有序号。通常用于表示按照一定顺序排列的项目。
<ol>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ol>
<dl>：定义列表，指一组条目，每个条目由名称和值两部分组成。通常用于表示术语的定义或者元数据。
<dl>
<dt>项目1</dt>
<dd>项目1的值</dd>
<dt>项目2</dt>
<dd>项目2的值</dd>
</dl>
需要注意的是，以上三种列表标签通常会结合使用 <li>、<dt> 和 <dd> 标签来定义列表项目和条目的具体内容。
