本文详细介绍了HTML的基本结构和常用标签，包括文档声明、根元素、标题、水平线、注释等，以及如何创建列表、表格、表单，并展示了如何设置背景颜色和使用字体。
※ 1.HTML页面内容的基本结构
1.指定HTML版本
2.指定dtd的版本
3.指定dtd的语言
注：html的版本信息,如果在页面头部不加版本信息,那么浏览器将使用杂乱模式,或者使用向后兼容模式进行解析
1.1. HTML文件声明
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!--1.文档类型HTML
2.PUBLIC公共的其他可以访问，SYSTEM其他访问不到，只有本系统可以
3.DTD限定
4.Transitional//EN 英文限定
5. .dtd DTD限定版本 -->
1.2. html根元素
<html>
<head>
<!--meta 表示页面的元信息,指定浏览器以什么样的解码方式对文档进行解码-->
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<!--该页面告诉搜索引擎页面的关键字-->
<meta name="keywords" content="java,birup,jd14XX"></meta>
<title>页面的标题</title>
</head>
<body>
<!--页面的内容-->
</body>
</html>
注:浏览器中显示的页面内容都是写在<body>标签中的内容
※ 2.HTML中的常用的基本标签
2.1. HTML 标题
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
2.2. HTML 水平线
<hr>
2.3. HTML 注释
<!-- This is a comment -->
2.4. HTML 段落
<p>This is a paragraph</p>
2.5. HTML 换行
<br>
或
</br>
2.6. HTML 文本格式化
<b>This text is bold</b>
<strong>This text is strong</strong>
<big>This text is big</big>
<em>This text is emphasized</em>
<i>This text is italic</i>
<small>This text is small</small>
H<sub>2</sub>O
10<sup>2</sup>
2.7. HTML 预格式文本
<p>
for(int i=0;i<10;i++){
System.out.println("hello world");
}
</p>
对比俩个效果
<pre>
for(int i=0;i<10;i++){
System.out.println("hello world");
}
</pre>
2.8. HTML 鼠标放上去提示完整信息
<abbr title="United Nations">UN</abbr>
<acronym title="World Wide Web">WWW</acronym>
2.9. HTML right to left显示内容
<bdo dir="rtl">hello world</bdo>
2.10. HTML 删除标记和下划线
<del>过时的API</del>
<ins>带下划线的</ins>
2.11. 超链接
//默认把当前页面跳转到这个指定的url地址
<a href="url">点击跳转</a>
//#号代表当前页面
<a href="#">点击跳转</a>
//使用 Target 属性，可以让跳转到的新页面在新窗口打开
<a href="http://www.baidu.com" target="_blank">点击访问百度</a>
2.12. 锚点
<a name="test1">第一个锚点的位置</a>
...
..
..
<a name="test2">第二个锚点的位置</a>
....
...
...
...
...
<a href="#test1">转到当前页面的test1描点</a>
<a href="#test2">转到当前页面的test2描点</a>
2.13. html页面中的实体 $名字;
一些特殊符号在html中不好表示出的可以是实体来表示
空格
< 小于号 <
> 大于号 >
& 和号 &
" 引号 "
' 撇号 '
※ 测试类：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
这是一个测试<br>
<hr>
hello world
<hr>
<a href="#test1">跳转到大数据位置</a><br>
<a href="#test2">跳转到标题的位置</a><br>
<hr>
<!--超链接a
a标签可以跳转到某个页面
a标签也可以提交数据到后台，执行
方式GET方式数据提交
href写的是资源名字,相对路径
target开启一个新的窗口，属性值随便写-->
<a href="briup.html" target="a">百度1</a><br>
<a href="briup.html" target="_blank">百度</a><br>
<hr>
<!-- 给内容加下划线 -->
<ins>这个很重要</ins><br>
<!-- 横线文字中间内容穿过 -->
<del>new Date(int year,int month,int day)</del>
<hr>
<!-- 颠倒内容输出 right to left
left to right 默认ltr
-->
<bdo dir="rtl">hello world</bdo>
<hr>
<!-- 鼠标在内容上会有提示 -->
<abbr title="ok-">百度</abbr><br>
<acronym title="ok-">百度1</acronym>
<!--pre告诉浏览器中间内容原样输出 -->
<pre>
for(int i=0;i<10;i++){
System.out.println("--"+i);
}
</pre>
<p>
for(int i=0;i<10;i++){
System.out.println("--"+i);
}
</p>
<hr>
<!-- 定义锚点 -->
<a name="test1"></a>
<!-- 针对字符串做的操作 -->
<!-- sup中间内容是上标 -->
大数据<sup>[12]</sup><br>
<!-- sub中间内容是下标 -->
H<sub>2</sub>o<br>
<i>字体斜体</i><br>
<em>字体斜体</em><br>
<big>字体变大</big><br>
<small>字体变小</small><br>
<b>字体加粗</b><br>
<Strong>字体加粗</Strong><br>
这是一个段落<br>
这是一个段落<br>
<p>这是一个段落</p>
<p>这是一个段落</p>
<p>这是一个段落</p>
<!--划横线 -->
<hr>
<!--标题 -->
标题<br>
<h1 id="test2">标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<!-- 回到当前页面的顶部 -->
<a href="#">top顶部</a>
</body>
</html>
※ 3. 表格 table
一个两行三列的表格
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
※ 表中标签
<caption>解释表的作用
<tr> 表格中的行
<td> 行中的列
<th> 定义表格内的表头单元格。此 th 元素内部的文本通常会呈现为粗体且居中。
border 边框的宽度
rowspan 合并在一起行数
colspan 合并在一起的列数
※ 同时可以对table中区域划分
<thead> 表格的页眉
<tbody> 表格的主体
<tfoot> 表格的页脚
注：这样将来做样式控制的时候可以控制的更加精确
※ 测试类：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- style表示中写的是css样式
css样式改变内容的呈现样式 -->
<style type="text/css">
tfoot{
text-align:center;
}
.test{
text-align:center;
color:blue;
}
thead{
text-align:center;
font-style: italic;
font-weight: 900;
}
</style>
</head>
<body>
<!-- 表格列及行的合并 -->
<table border="1px">
<!-- thead修饰的是页眉（属性行） -->
<thead>
<tr>
<td>商品名称</td>
<td>单价</td>
<td>数量</td>
<td>价钱</td>
</tr>
</thead>
<!-- tbody修饰的是中间内容的区域 -->
<tbody id="div">
<tr class="test">
<td>苹果</td>
<!-- 行合并下一行相对应的位置移除 -->
<td rowspan="2">5</td>
<td>2</td>
<td>10</td>
</tr>
<tr class="test">
<td>香蕉</td>
<td>10</td>
<td>50</td>
</tr>
</tbody>
<!--tfoot修饰的是页脚，除去内容的下半部分内容 -->
<tfoot>
<tr>
<td>总价</td>
<!-- 列的合并，紧跟的列删除-->
<td colspan="3">60</td>
</tr>
</tfoot>
</table>
<hr>
<!-- 表格
tr 一组表示一行
td 表示的是列 -->
<table border="1px">
<!-- 表格的标题,可以在table中的任意位置 -->
<caption>学生表</caption>
<!-- <tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr> -->
<tr>
<!-- th特殊格式 -->
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>tom</td>
<td>33</td>
<td>男</td>
</tr>
<tr>
<td>lisi</td>
<td>23</td>
<td>女</td>
</tr>
</table>
</body>
</html>
※ 4. 列表
4.1. 无序列表
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
4.2. 有序列表
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
4.3. 定义列表
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
※ 测试类：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 无序列表
disc实心的圆点
circle空心的圆点
square实心的正方形 -->
<ul type="disc">
<li>苹果</li>
<li>香蕉</li>
<li>菠萝</li>
</ul>
<hr>
<!-- 有序列表 -->
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>菠萝</li>
</ol>
<!-- 自定义列表，一般表示具有层次的内容 -->
<dl>
<dt>第一章corejava</dt>
<dd>集合</dd>
<dd>网络</dd>
<dd>线程</dd>
<dd>IO流</dd>
<dt>第二章Oracle</dt>
<dd>select检索</dd>
<dd>分组函数</dd>
<dd>多表查询</dd>
</dl>
</body>
</html>
※ 5. 表单
主要用于提交用户的信息
<form action="提交到地址">
...
...
</form>
(1)文本输入框
<input id="" name="" type="text" />
(2)密码输入框
<input id="" name="" type="password" />
3)单选按钮
<input id="" name="" type="radio" />
(4)复选框
<input id="" name="" type="checkbox" />
(5)下拉框
<select id="" name="">
<option value=""></option>
</select>
下拉框的选项在option中设置
(6)文本域
<textarea id="" name="" rows="10" cols="30"></textarea>
(7)提交按钮
<input type="submit" value="" />
(8)重置按钮
<input type="reset" value="" />
(9)文件上传框
<input type="file" name=""/>
(10)隐藏框(页面不显示,可以用来隐藏数据)
<input type="hidden" name=""/>
16.显示图片
<img src="boat.gif" alt="找不到图片">
※ 测试类：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- script脚本的位置，Js语句，写动态效果用 -->
<script type="text/javascript">
function test1(a) {
//获取标签中的内容,HTML中变量的声明：var
//var n=a.value;
//给标签赋空值
//浏览器弹框window.alert(n);
a.value="";
}
function test2(b) {
var val=b.value;
if(val.trim().length==0){
//失焦时没有值给与值
b.value="请输入用户名";
}
}
</script>
</head>
<body>
<!-- 浏览器给服务器提交数据
1.a标签
2.form表单，整个页面跳转
3.ajax，部分资源跳转 -->
<!-- action=""跳转的资源名称
method表示数据提交的方式（GET|POST）
GET方式提交，表单中的数据会基于name属性作为key，
用户填写内容或者默认值为value，key=value，
多组数据中间用&拼接，资源名字和参数之间用？拼接，
在地址栏可以看到
POST表单中的数据会基于name属性为key，
用户填写的内容或者默认值为value，key=value，
多组数据中间用&拼接，
拼接之后放在HTTP斜体的体部（不可见） -->
<form action="FirstSer" method="get">
<!--1.文本输出框
username=用户填写的值或默认值
给默认值写value属性，有默认值也以用户填写的内容为准（覆盖） -->
<!--未跳转前地址：
file:///Users/ZJLOVE/eclipse-workspace/
jd1812_html/WebContent/form.html -->
<!-- onfocus聚焦事件 onblur失焦事件 this表示标签对象 方法在script脚本-->
姓名：<input type="text" name="username"
onfocus="test1(this)" onblur="test2(this)" value="请输入用户名"/><br>
<!--2.密码框 -->
密码：<input type="password" name="passwd"/><br>
<!--3.单选按钮radio，name必须为一致才是一组,
且必须给value属性(任意类型）区分用于拼接
默认选中添加属性(1.checked (2.checked="checked" (3.checked=true-->
性别：<input type="radio" checked name="sex" value="0"/>男
<input type="radio"name="sex"value="1"/>女<br>
<!--4.复选框 name属性一致value必须写标记值不一样,多组进行拼接
默认选中用checked同上单选 -->
爱好：<input type="checkbox" checked name="hoby" value="0"/>篮球
<input type="checkbox" name="hoby" value="1"/>足球
<input type="checkbox" name="hoby" value="2"/>羽毛球
<input type="checkbox" name="hoby" value="3"/>橄榄球<br>
<!--5.下拉菜单 默认选中加属性
selected
selected="selected"
selected=true-->
城市：<select name="city">
<option value="01">昆山</option>
<option value="02">苏州</option>
<option value="03">上海</option>
<option selected value="04">南京</option>
</select><br>
<!-- 6.文件上传 -->
<input type="file" name="icon"><br>
<!-- 7.隐藏标签，临时存储数据用
不占用浏览器显示的任何位置,数据也会提交-->
<input type="hidden" name="msg" value="test"/>
<!-- 8.文本域 rows行 cols列-->
评价：<textarea name="conent" rows="4" cols="10"></textarea><br>
<!-- 9.表单的提交 -->
<!--跳转后地址：
file:///Users/ZJLOVE/eclipse-workspace/
jd1812_html/WebContent/
FirstSer?username=tom&passwd=111&sex=0&hoby=0
&hoby=1&city=04&icon=&msg=test&conent=
post请求FirstSer后拼接数据看不见 -->
<!-- 10.重置按钮，把整个表单中的内容恢复到默认状态 -->
<input type="reset" value="重写"/>
<input type="submit" value="注册"/>
</form>
</body>
</html>
※ 6. 背景颜色·背景图片
背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
背景属性将背景设置为图像。属性值为图像的URL。
<body background="clouds.gif">
<body background="http://..../clouds.gif">
※ 测试类：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body bgcolor="blue">
<!--alt提示信息,src图片的路径（相对路径）
width,height设置图片大小 -->
<img alt="找不到资源" width="100px" height="400px"
src="images/test.png">
</body>
</html>
※ 7. 字体
<font size="33" face="Times" color="red">
this is my test！
</font>
face的值一般可以为:
“times”、“courier”、“arial”、“serif”、“sans-serif”、“cursive”、“fantasy”、“monospace”
※ 8. span和div
span是行内元素
div是块元素
作用及特点:
1.使用span和div可以在页面划分区域,将来可以方便我们使用css对页面中不同区域进行特定的css样式渲染
2.一个div在页面中默认是会独占一行的(所以是块元素),而span则是可以多个span在同一行(所以是行内元素)
注意:用span或者div在页面上划分区域其实就是在设计页面中的布局
※ 测试类：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!--magrgin:auto居中
float:right;悬浮在右边
-->
<style type="text/css">
.container{
border:1px solid red;
width:600px;
height:500px;
magrgin:auto;
}
.cont_right{
float:right;
width:180px;
height:450px;
border:1px solid green;
}
.cont_left{
float:left;
width:180px;
height:450px;
border:1px solid green;
}
.cont_center{
margin:auto;
width:150px;
height:450px;
border:1px solid green;
}
</style>
</head>
<body>
<div class="container">
<div class="cont_right">test</div>
<div class="cont_left">test1</div>
<div class="cont_center">test2</div>
</div>
</body>
</html>
扫一扫
422
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
