前言
开始写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 和上面类似