目录
1. 前端三板斧
- HTML（Hyper Test Markup Language）：超文本标记语言，对字体、视频、音频、动画等进行标记。
- CSS：层叠样式表，对网页进行修饰。
- JavaScript：脚本语言，实现网页上的结构特效。
用盖房子举例：HTML就是房子的主体，CSS相当于装修，JavaScript表示房子中每一个房间的功能。
2.HTML简介
-
2.1 HTML
-
超文本标记语言，具有标记标签的集合。
-
是一种用于创建网页的语言，使用HTML标记标签创建html文档来创建网页。
-
HTML标签通常成对出现，由<>括起来；通常称成对出现的标签 -> 有标签体的标签
-
一对标签中，第一个是开始标签（起始标签），第二个是结束标签（闭合标签）
-
-
2.2 HTML元素
标签 + 内容 = 代码元素
<!--
起始标签: <code>
结束标签： </code>
标签之间是元素的内容，即public...args）
-->
<code>public static void main(String[] args)</code>- 注意
- 元素的效果应用于元素内容
- 每个HTML元素都有不同的和特定的含义
- 元素名称不区分大小写
- HTML定义了在HTML文档中实现各种角色的不同类型的元素。
- eg：代码元素是语义元素的示例
- 语义元素允许定义自己内容的意义以及内容不同部分之间的关系
2.3 HTML结构
- Html标准结构：
<html> <!--html页面的根标签-->
<head> <!--头标签-->
<title> </title> <!--窗口标题标签-->
<meat charset="utf-8"> <!--指定当前html页面的编码格式，防止乱码-->
</head>
<body> <!--页面主体部分-->
<!--最终在浏览器中展示的内容-->
</body>
</html>- 注意
- 所有的网页标签都在<html></html>
- <head> 标签用于定义文档的头部，是所有头部元素的容器。
- 头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签
-
2.4 注释
HTML注释：
<!--注释文字 -->CSS注释（HTML中使用）：
/ 注释语句 /-
2.5 HTML语义化
用最合适的标签来标记内容，在去除了CSS的修饰后，本质不变（eg：标题去除CSS修饰后还是一个标题）
- 作用
- 与搜索引擎建立良好的联系，容易被搜索引擎收录
- 在没有CSS的修饰下，也可以呈现出很好的结构
-
2.6 HTML文档声明
由于web中有很多不同类型的文档，HTML中也有多个版本，只有声明后才能帮助浏览器正确的显示网页。
<!DOCTYPE html>- 注意：
- 该声明不是HTML标签
- 必须放在HTML文档首行
3. 文本标签
-
3.1 标题标签<hx>
通过<h1> ~ <h6>（从大到小）对标题标签进行定义
<!-- 标题标签 h1~h6 -->
<html>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>- 注意
- 浏览器自动在标题前后添加空行
- 将该标签只用于标题
-
3.2 段落标签<p>
当想在网页上显示段落，使用<p>标签
<!-- 段落标签 p标签 -->
<html>
<body>
<p>段落1</p>
<p>段落2</p>
</body>
</html>- 注意
- 浏览器自动在段落前后添加空行
- 不要忘记结束标签
- 无法通过在 HTML 代码中添加空格或换行来改变输出的效果。
- 当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。
<!--在源代码中换行不会显示在网页中 -->
<html>
<body>
每一片雨中不同的云彩
都需要找到天空去存在
</body>
</html>
-
3.3 强调标签<em>、<strong>
<em>在浏览器中以斜体展示（带语义），<i>也可以表示斜体（不带语义）
<strong>在浏览器中以粗体显示（带语义），<b>也可以表示粗体（不带语义）
<!--斜体标签 i em -->
<!--粗体标签 b strong -->
<html>
<body>
<pre>
<i>无语义</i>
<em>带语义</em>
<b>无语义</b>
<strong>带语义</strong>
</pre>
</body>
</html>-
3.4 分隔线标签<hr/>与换行标签<br/>
分隔线标签：一个空标签，只有开始标签，没有结束标签
换行标签：一个空标签，在不产生一个新段落的情况下进行换行，相当于word中的回车
<!--换行标签 br/ -->
<!--分隔线标签 hr/ -->
<html>
<body>
每一片与众不同的云彩<br/><hr/>都需要找到天空去存在
</body>
</html>-
3.5 引用标签<q>、<blockquote>
<q>：用于短引用（引用一句话），浏览器展示加“ ” ，语义：引用他人的话
<blockquote>：用于长引用（引用长文本），浏览器展示缩进，语义：引用他人的文本
<html>
<body>
<!--引用标签
<q>短引用
<blockquote>长引用
-->
<q>解释说明第一章内容</q>
<p>以下为百度百科对于JavaScript的定义
<blockquote>JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。
它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，
早是在HTML（标准通⽤用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。</blockquote></p>
</body>
</html>-
3.6 特殊字符
| 属性 | 描述 | 显示 |
|---|---|---|
| | 空格 | |
| ® | 已注册 | ® |
| © | 版权 | © |
| ™ | 商标 | ™ |
<html>
<body>
<!--特殊字符-->
C‘est la vie！<br/>
注册：®<br/>
版权：©<br/>
商标：™<br/>
</body>
</html>
4. address标签
为网页加入地址信息，浏览器上默认显示斜体。
<html>
<body>
<!-- 地址标签：展示效果字体斜体效果-->
<address>陕西省西安市莲湖区</address>
</body>
</html>5. code标签
-
5.1 <code>
能够在网页中显示编程代码
<html>
<body>
<!--code标签：对一些代码进行展示-->
<code>public static void main(String[] args){}{<br/>
int i=1;<br/>
}</code>
</body>
</html>-
5.2 <pre>
预格式化文本，最常用来显示源代码。
<html>
<body>
<!--pre标签：原样输出-->
<pre>
function checkUserName(){
var div = document.getElementById("id") ;
}
</pre>
</body>
</html>6. 列表标签
-
6.1 无序列表
无序列表始于<ul>标签，每行始于<li>
列表项内部可以使用段落、换行符、图片、链接以及其他列表等。
-
6.2 有序列表
有序列表始于<ol>标签，每行始于<li>。
列表项目使用数字进行标记。
列表项内部可以使用段落、换行符、图片、链接以及其他列表等。
<html>
<body>
<!--列表标签
无序列表：ul li
有序列表：ol li
ul和ol中都有默认属性type:指定当前的列表项前类型
ul
disc（实心圆点,默认） circle（空心圆点） square（正方形实点）
ol
默认1. 2. 3.
-->
您的爱好
<ul type="circle">
<li>唱歌</li>
<li>弹琴</li>
<li>跑步</li>
<li>烘焙</li>
</ul>
<hr />
您喜欢的编程语言
<ol type="A">
<li>Java</li>
<li>C++</li>
<li>PHP</li>
</ol>
</body>
</html>
-
6.3 自定义列表
自定义列表始于<dl>标签，标题始于<dt>，每行始于 <dd> 。
<html>
<body>
<dl>
<dt>您的爱好</dt>
<dd>弹琴</dd>
<dd>跑步</dd>
<dd>烘焙</dd>
</dl>
</body>
</html>7. 链接
HTML使用超链接与网络上的文档连接。
-
7.1 链接语法
- 通过使用<a>标签在HTML中创建链接
- 有两种使用 <a> 标签的方式：
- 通过使用 href 属性 - 创建指向另一个文档的链接
- 通过使用 name 属性 - 创建文档内的锚点
- 开始标签和结束标签之间的文字作为超链接来显示，"链接文本" 不一定是文本。图片或其他 HTML 元素都可以成为链接。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超链接</title>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
</body>
</html>-
7.2 属性
- 7.2.1 target属性
定义被链接的文件是在当前窗口打开还是在新建窗口打开。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超链接</title>
</head>
<body>
<a href="http://www.baidu.com" target="_blank">百度</a> <!--新建窗口打开-->
<a href="http://www.baidu.com" target="_self">百度</a> <!--当前窗口打开-->
</body>
</html>-
7.2.2 name属性
规定锚的名称
- 使用命名锚时，可以创建直接跳至该命名锚的链接
- 将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超链接</title>
</head>
<body>
<!--在页面顶部打锚点-->
<a name="top"></a>
<!--创建底部跳转链接-->
<a href="#foot">跳转[底部]</a></br>
<!--跳转到别的窗口的锚点处
<a href="资源文件url#锚点名称">跳转到指定标记</a>
-->
<a href="文本标签.html#ul_list" target="_blank">跳转</a><br />
<!--为了让当前窗口出现滚动条-->
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<!--创建顶部跳转链接-->
<a href="#top">跳转[顶部]</a></br>
<!--在页面底部打锚点-->
<a name="foot"></a>
</body>
</html>8. 图像
图像由<img>标签定义。<img>是空标签，只包含属性，没有闭合标签
-
8.1 属性
- 8.1.1 src属性
在页面上显示图片，该属性的值是图像的URL地址。
- 8.1.2 alt属性
当图片失效时，用来解释的文字。
- 8.1.3 align属性
设置图片的对齐方式
- 8.1.4 width/height属性
设置图片的宽、高。
可以通过百分比设置，也可以通过像素设置。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图像标签</title>
</head>
<body>
<img src="img/海景1.jpg" alt="海景图片" align="center" height="400px" width="80%"/>
</body>
</html>-
8.2 背景图片
gif 和 jpg 文件均可用作 HTML 背景。body标签的background属性设置背景图片。如果图像小于页面，图像会进行重复。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>背景标签</title>
</head>
<body background="img/3.jpg">
</body>
</html>
9. 表格
html中的表格没有列的概念，列的概念是通过单元格来体现的。
表格由<table>标签定义。每个表格有若干行（<tr>标签定义），每行有若干个单元格（<td>标签定义）。
单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。
-
9.1 属性与标签
- 9.1.1 <caption>标签
定义表格标题，必须紧跟<table>之后。
每个表格只能定义一个标题，通常标题会被居中置于表格上方。
- 9.1.2 <th>标签
表头（粗体居中）由<th>标签定义。
- 9.1.3 空格占位符
在一些浏览器中，没有内容的单元格可能无法显示出边框。为了避免这种情况，可以在空单元格中添加一个空格占位符“ ”。
- 9.1.4 border属性
显示表格边框
- 9.1.5 cellspacing属性
单元格边沿和边框线之间的空间
- 9.1.6 cellpadding属性
单元格和内容的空间
- 9.1.7 bgcolor属性
设置背景色
-
9.1.8 rowspan属性
合并行
- 9.1.9 colspan属性
合并“列”
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="5" bgcolor="cornflowerblue">
<caption>个人信息</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>爱好</th>
</tr>
<tr>
<td>小明</td>
<td>10</td>
<td colspan="2">跑步</td>
</tr>
<tr>
<td>小红</td>
<td>15</td>
<td>女</td>
<td>唱歌</td>
</tr>
<tr>
<td>小同</td>
<td>16</td>
<td rowspan="2">男</td>
<td>唱歌</td>
</tr>
<tr>
<td>小禾</td>
<td>20</td>
<td>游泳</td>
</tr>
</table>
</body>
</html>
10. 表单
HTML表单用于搜集不同类型的用户输入，由<form>标签定义。
HTML表单包含表单元素（不同类型的input元素：复选框、单选按钮、提交按钮等）。
-
10.1 属性
-
10.1.1 action属性
定义提交表单时执行的动作，表单会被提交到we服务器上的网页。
若省略action属性，默认设置为当前页面。
若action="#"，提交到本地。
- 10.1.2 method属性
规定在提交表单时使用的HTTP方法（GET / POST）
-
GET和POST区别
-
GET
-
提交数据大小有限制（一般不超过4kb）
-
提交的数据会显示在URL地址栏中，不安全
-
-
POST
-
提交数据大小无限制
-
提交的数据不会显示在地址栏中
-
-
-
10.1.3 name属性
将当前的内容提交到后台的标记
若想要正确提交，输入字段必须设置name属性
- 10.1.4 target属性
规定action属性中地址的目标
-
10.2 标签
- 10.2.1 <input>标签
<input>是最重要的表单元素
-
type属性
-
text：常规文本输入
-
文本字段的默认宽度是20个字符
-
-
radio：单选按钮输入
-
submit：提交按钮（向表单处理程序提交表单）
-
表单处理程序
-
通常包含用来处理输入数据的脚本的服务器页面
-
在action属性中指定
-
-
-
password：密码输入
-
checkbox：复选框输入
-
file：文件上传
-
hidden：隐藏域，没有效果但下带数据
-
button：普通按钮
-
reset：重置按钮
-
-
value属性：规定输入字段的初始值
-
readonly属性：规定输入字段为只读
-
disabled属性：输入字段是禁用的
-
被禁用的元素不可用、不可点击、不可提交
-
-
maxlength属性：规定输入字段允许的最大长度
- 10.2.2 <fieldset>和<legend>标签
<fieldset>组合表单中的相关数据（将表单用一个框框框起来）
<legend>为<fieldset>定义标题
- 10.2.3 <textarea>标签
定义多行输入字段（文本域）
- 10.2.4 <select>标签
下拉菜单
-
option属性：下拉选项
-
通常会把首个选项显示为被选选项
-
selected属性：预定义选项
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form action="#" method="get">
<fieldset>
<legend align="center">个人信息填写</legend>
用户<input type="text" name="username"/></br> <!--文本输入-->
密码<input type="password" name="password" /></br> <!--密码输入-->
性别<input type="radio" name="性别" value="男" />男 <!--单选按钮-->
<input type="radio" name="性别" value="女" />女
</br><input type="submit" name="提交" value="注册"/> <!--提交按钮-->
<input type="button" name="普通按钮" value="普通按钮"/></br> <!--普通按钮-->
<!--复选框-->
语言<br/>
<input type="checkbox" name="语言" value="中文" />中文
<input type="checkbox" name="语言" value="法语" />法语
<input type="checkbox" name="语言" value="英语" />英语
<!--下拉菜单-->
</br>籍贯：
<select>
<option value="无">请选择</option>
<option value="陕西省">陕西省</option>
<option value="甘肃省">甘肃省</option>
<option value="重庆市">重庆市</option>
</select>
<!--文件上传-->
<input type="file" name="photo" /></br>
<!--文本域-->
评价：<textarea rows="5" cols="30">******</textarea>
<!--重置-->
<input type="reset" value="重置"/>
</fieldset>
</form>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
