前言
开始写Web前端内容，这是JavaWeb开发必不可少的东西，包括HTML、CSS、JS等。
HTML简介
HTML（Hyper Text Markup Language） 超文本标记语言，用于描述网页的结构，浏览器对HTML代码进行渲染后就形成了我们常见的页面。
HTML基本结构
HTML代码由各种标签组成，标签由一对<>括起来，网页的标签有固定的结构：
说明：
- <!doctype html> 是html5页面文档声明
- <html> 是根标签，代表整个网页
- <head> 代表网页头部，用于存在标题、元数据、CSS等元素，通常不会显示出来
- <body> 代表主体内容，是显示出来的网页内容
- <title> 是网页标题，能在浏览器上显示
- <meta charset=“utf-8”/> 是元标签，可以设置字符编码解决中文乱码问题
HTML标签分类
HTML标签按显示效果可以分为：
- 块级标签：单独占一行，可以设置高和宽
- 内联标签：一行显示多个，不可以设置高和宽
块级标签包括：
- 标题：h1~h6
- 段落：p
- 水平线：hr
- 有序列表：ol + li
- 无序列表：ul + li
- 目录列表：dl + dt + dd
- 区块 div
- 表格 table
- 表单 form
内联标签包含：
- 图像标签：img
- span标签
- 换行： br
- 超链接： a
- 格式标签：斜体<i>、加粗<b>、下划线<u>、删除线<del>
常用HTML标签
有序列表： ol + li
type可以设置排序的类型：数字1、字母A、罗马数字I 等
<ol type="I">
<li>米饭</li>
<li>青菜</li>
<li>牛肉</li>
<li>炒肥肠</li>
</ol>
- 米饭
- 青菜
- 牛肉
- 炒肥肠
无序列表：ul + li
type可以设置前面符号的类型：circle、square等
<ul>
<li>看书</li>
<li>看博客</li>
<li>看视频</li>
<li>敲代码</li>
</ul>
- 看书
- 看博客
- 看视频
- 敲代码
目录列表：dl + dt + dd
<dl>
<dt>标题</dt>
<dd>内容1</dd>
<dd>内容2</dd>
<dd>内容3</dd>
</dl>
-
标题
- 内容1
- 内容2
- 内容3
标题标签： h1 ~ h6
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
标题1
标题2
标题3
标题4
标题5
标题6
段落标签：p
主要用于描述段落文字
<p>这是段落1</p>
<p>这是段落2</p>
这是段落1
这是段落2
区块标签：div
div标签主要用于配合css样式完成页面的布局。
<div style="width:200px;height:200px;background:red">
Hello
</div>
图像标签：img
用法：
<img src="图片路径" alt="图片说明" title="图片说明" width="200px" height="100px">
图片路径分为：
- 绝对路径，完整的文件路径，从盘符或主机名开始，如：D:/images/xxx.jpg
如果是本地文件使用绝对路径，本地文件位置改变后，
图片就会失效。
绝对路径主要用于：显示外部网站图片。 - 相对路径，相对网页的文件位置，如：images/xxx.jpg
网站中的本地图片一般都使用这种。
范围标签 span
作用就是将一段文字突出显示，需要和样式配合使用
今天是<span style="color:red;font-size:30px">2018</span>年6月4号
超链接 a
用法：
<a href="页面路径" target="目标窗体">链接文字</a>
说明：
- 页面的路径
分为绝对路径和相对路径，如果链接外部网站的页面就用绝对路径，链接本网站的页面用相对路径。 - target属性
_blank 在新页面打开
_parent 在父页面打开
_self 在当前页面打开（默认）
特殊超链接
锚链接
作用：在一个网页内部实现定位，如：回到顶部
实现步骤：
1、在网页的某一个位置添加锚链接
<a name="锚名字"></a>
2、在需要链接的地方添加：
<a href="#锚名字>文字</a>
邮箱链接
作用：可以自动打开邮件客户端
<a href="mailto:邮箱地址">链接文字</a>
特殊符号
空格：
大于(>)：>
小于(<）: <
引号（“）："
版权号© ：©
表格标签
页面中的表格一般用于页面布局或是展示数据报表。
表格的基本结构
table是表格，tr代表一行、td代表一个单元格
<table>
<tr>
<td>单元格内容</td>
....
</tr>
....
</table>
table的属性：
- width 宽（单位：px固定值，n%相对值）
- height 高
- border 边框宽度
tr和td都可以设置对齐属性align
- left 左对齐
- right 右对齐
- center 居中对齐
单元格td的属性：
- 跨行rowspan
- 跨列colspan
<table width="500px" height="200px" border="1px">
<tr align="center">
<td colspan="3">1</td>
</tr>
<tr>
<td rowspan="2">2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</table>
表单标签
表单的作用是收集用户的信息，用于搜索、注册、登录等
表单标签
<form action="服务器程序地址" method="请求方法">
...
</form>
请求方法：
- post 提交的数据在后台，不会显示在URL中，安全性高；长度不限
- get 提交的数据附加URL中，安全性低；长度有限，速度更快
表单元素
<input name="元素名称" value="属性的值" maxlength="最大长度"
placeholder="占位符" checked="是否选中" type="类型">
type的值：
- text 文本框（默认）
- password 密码框
- radio 单选按钮
注意：同一组的单选按钮，要设置成相同的名字 - checkbox 复选按钮
- submit 提交按钮，点击后数据会提交给服务器
- reset 重置按钮，清空数据
- button 普通按钮，需要使用JS编写功能
- file 文件域，实现文件上传
- hidden 隐藏域，不显示出来，数据可以提交
下拉菜单
<select name="名字" >
<option value="值">显示选项内容</option>
...
</select>
文字域
<textarea name="名字" cols="文字列数" rows="文字行数">
文字内容
</textarea>
内嵌框架
iframe的作用是在当前页面嵌入另一个页面，在开发中可以将重复的页面部分单独开发，使用iframe嵌入进来。
用法：
<iframe src="页面地址" width="宽度" height="高度"
frameborder="边框宽度" scrolling="是否滚动">
</iframe>
下面案例是讲页面头部嵌入到几个不同的页面中：
header.html
<!DOCTYPE html>
<html>
<head>
<title>开头部分</title>
<meta charset="utf-8">
</head>
<body style="background:pink">
<!-- 在父页面打开连接 -->
<a href="page1.html" target="_parent">页面1</a>
<a href="page2.html" target="_parent">页面2</a>
<a href="page3.html" target="_parent">页面3</a>
</body>
</html>
page1.html
<!DOCTYPE html>
<html>
<head>
<title>页面1</title>
<meta charset="UTF-8">
</head>
<body style="background:lightgreen">
<!-- 嵌入header页面 -->
<iframe src="header.html" width="800px" height="50px"
frameborder="0px" scrolling="no">
</iframe>
<h1>这是页面1内容</h1>
</body>
</html>
page2.html、page3.html 和上面类似
3929
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
