目录
1 概述
2 开发第一个HTML页面
3 HTML基本标签
4 HTML实体符号
5 表格
6 背景颜色和背景图片
7 超链接
8 列表
9 表单form
10 id属性
11 div
关于本次学习前端包括HTML、CSS、JavaScript都是学习基本内容为了,后期学习Javaweb,并不会对前端深入学习。
1 概述
HTML:超文本标记语言
超文本:不是普通文本,例如:图片、声音、视频等等。
标记语言:标记语言一般都是由一对一对的标签组成。
<html></html> 这就是HTML的根标签,所有的结束标签开始的第一个字符都是正斜杠:/
HTML怎么开发?怎么运行?
开发:只需要新建一个xxx.html或者xxx.htm文件,直接用记事本编辑即可。
当然也有集成开发工具:如Dreamweaver、Hbuilder、IDEA等等
运行:使用浏览器直接打开运行即可
2 开发第一个HTML页面
因为是刚接触html,所以不用开发工具,直接记事本写
<!--如果加上以下代码表示当前页面中的HTML语法采用的是H5的语法。-->
<!--没有以下这个代码,表示HTML的版本采用的是HTML4.0-->
<!doctype html>
<!--HTML的注释-->
<!--HTML的根标记-->
<html>
<!--头-->
<head>
<!--网页的标题,显示在浏览器的左上角-->
<title>我的第一个HTML页面</title>
</head>
<!--体-->
<!--body是网页的主体,显示在浏览器页面上的内容-->
<body>
hello world!
</body>
</html>
通过测试发现,HTML语言并不需要很规范,但是还是要遵守规范
不区分大小写;少了某个标签依然能正常运行。
3 HTML基本标签
p标签
此标签用来标记段落
h标签
标题字,有h1到h6共六个标签用来标记标题,值得注意的是,标题字独占一行。
br标签
换行,注意:此标签不是一对,写一个就够了。属于独目标记
hr标签
输出水平线
color属性
修改颜色
width属性
修改长度,单位px表示像素是静态的;单位%表示占浏览器多少,是动态的。
pre标签
我们发现在html中写的内容格式在浏览器就会失效,可以使用pre标签,会保存原本格式
b标签
粗体字
i标签
斜体字
ins标签
插入字
del标签
删除字
sup标签
右上角加字
sub标签
右下角加字
font标签
可以对文字进行颜色字体等修改
对以上标签和属性演示:
<html>
<head>
<title>HTML基本标签</title>
</head>
<body>
<p>先帝创业未半而中道崩殂,今天下三分,益州疲弊,此诚危急存亡之秋也。然侍卫之臣不懈于
内,忠志之士忘身于外者,盖追先帝之殊遇,欲报之于陛下也。诚宜开张圣听,以光先帝遗德,恢弘
志士之气,不宜妄自菲薄,引喻失义,以塞忠谏之路也。</p>
<p>宫中府中,俱为一体;陟罚臧否,不宜异同。若有作奸犯科及为忠善者,宜付有司论其刑赏,以
昭陛下平明之理,不宜偏私,使内外异法也。</p>
<p>侍中、侍郎郭攸之、费祎、董允等,此皆良实,志虑忠纯,是以先帝简拔以遗陛下。愚以为宫中
之事,事无大小,悉以咨之,然后施行,必能裨补阙漏,有所广益。</p>
<h1>标题字</h1>
<h2>标题字</h2>
<h3>标题字</h3>
<h4>标题字</h4>
<h5>标题字</h5>
<h6>标题字</h6>
嗨嗨嗨<br>给你一拳<br>爱你哟<br>
<hr>
<hr color = red>
<hr color = black width = 300px>
<hr color = "blue" width = "50%">
<pre>
for(int i = 0; i < 10; i++){
System.out.println(i);
}
</pre>
<b>粗体字</b>
<i>斜体字</i>
<ins>插入字</ins>
<del>删除字</del>
10<sup>2</sup>
100<sub>n</sub>
<font color = "red" size = 5>指定给你好果汁吃</font>
<br><br><br><br>
</body>
</html>
效果:
4 HTML实体符号
空格符号
<>
小于号大于号,因为html标签需要用到大于号和小于号,就会冲突,只能用符号代替。
演示:
<!doctype html>
<html>
<head>
<title>HTML实体标签</title>
</head>
<body>
让我逮到你, 指定有你好果子吃。<br>
10 < 100<br>
100 > 10
</body>
</html>
结果:
5 表格
<table>标签用来创造一个表格
<tr>表示表格的一行
<td>表示表格的一个单元格
border属性:设置边框,可以用width和height属性对边框修改宽度和高度,align属性用于设置对齐方式。
单元格合并
行单元格合并:rowspan属性,合并技巧:保留最上面的单元格,将后面的单元格注释掉,合并几个,属性值就写几。
列单元格合并:colspan属性,合并技巧:随便保留其中一个即可。
th标签:可以用于单元格代替td标签,可以自动居中和加粗
表格三部分
可以使用thead tbody tfoot三个标签将表格分为三部分:表头,表体,表脚,在表现形式上没有什么用,但在今后需要操作表的时候会方便一些(这里就先不演示了,就是将标签将某一行或多行包住)。
演示:
<!doctype html>
<html>
<head>
<title>表格的创建</title>
</head>
<body>
<table align = "center" border = "1px" width = "300px" height = "200px">
<!--这一个tr标签内就表示一行-->
<!--所以共三行三列-->
<tr align = "center">
<td>单元格</td>
<td>单元格</td>
<td rowspan = "2">单元格x</td>
</tr>
<tr>
<td align = "center">单元格</td>
<td>单元格</td>
<!--
<td>单元格x</td>
-->
</tr>
<tr>
<th>单元格</th>
<!--
<td>单元格y</td>
-->
<th colspan = "3">单元格y</th>
</tr>
</table>
</body>
</html>
效果:
6 背景颜色和背景图片
bgcolor属性可以设置背景颜色,用在body标签中。
background属性可以设置背景图片,也用在body标签中,图片的路径可以是相对路径也可以是绝对路径,也可以是网络当中的有效路径。
注意:这里的背景颜色和背景图片是嵌入到浏览器里的。
img标签:这里的图片是浮动于浏览器窗口的。src用于指定路径,width指定宽度,高度会随着宽度等比例缩放,若同时修改高度和宽度可能会失真。可以没有结束标签。title属性用来设置鼠标悬停于图片上时的提示信息,alt属性用来设置图片加载失败时的提示文本信息。
演示:
<!doctype html>
<html>
<head>
<title>背景颜色和图片</title>
</head>
<!--
<body bgcolor = "black">
<body background = "tupian.jpg">
-->
<body>
<img src = "tupian.jpg" width = "100%" title = "点我一下捏" alt = "图片没了捏">
</body>
</html>
若找不到图片,会有alt属性的提示:
7 超链接
a标签:href属性用于指定链接地址,traget属性可以修改点开新的网页所在窗口,_self表示当前窗口,_blank表示新窗口, _parent表示父窗口, _top表示顶级窗口。
iframe标签:可以在此页面嵌入一个页面。
演示:
<!doctype html>
<html>
<head>
<title>超链接</title>
</head>
<body>
<a href = "http://www.baidu.com">百度</a><br>
<a href = "http://www.bilibili.com" target = "_blank">B站</a><br>
<a href = "http://www.jd.com">京东</a><br>
<a href = "tupian.jpg">小丑女图片</a><br>
<iframe src = "07.html"></iframe>
</body>
</html>
<!doctype html>
<html>
<head>
<title>子页面</title>
</head>
<body>
这是嵌入页面<br>
<a href = "http://www.baidu.com" target = "_parent">百度(会在父窗口运行)</a>
</body>
</html>
8 列表
ul标签表示一个列表,无序列表,li标签表示列表中的一条信息
ol标签是有序列表
type属性可以对列表前面的序号或者符号进行修改
演示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表</title>
</head>
<body>
<ul>
<li>中国
<ul type="square">
<li>江苏</li>
<li>浙江</li>
</ul>
</li>
<li>美国</li>
<li>日本</li>
</ul>
<ol type="A">
<li>水果</li>
<li>蔬菜</li>
<li>茶
<ol type="i">
<li>乌龙茶</li>
<li>绿茶</li>
<li>红茶</li>
</ol>
</li>
</ol>
</body>
</html>
结果:
9 表单form
什么是表单,有什么用?
表单可以用来收集用户的数据,提交表单时,可以向服务器发送请求,并且还可以携带用户填写的数据。
表单标签:form
form标签的属性:
action属性:用来指定请求路径,也就是说数据提交的时候,提交给谁?action属性和超链接的href属性相同,都是提供“请求路径"”的
method属性:用来指定表单提交的方式/方法,常见的包括两种:get方式提交、post方式提交,默认使用get方式提交。超链接和地址栏输入URL都是get方式提交。
get方式:提交的时候,提交的数据会直接显示在浏览器的地址栏上。
post方式:提交的时候,提交的数据不会直接显示在浏览器的地址栏上。
input标签可以进行提交,需要写到form表单当中才能正常使用。使用type属性值为submit就会有一个提交字样的按钮,提交的是当前表单,使用value属性可以修改按钮的名称。将type属性的值改为button,这是普通按钮,没有提交表单能力。
演示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<form action="https://www.baidu.com" method="get">
<input type="submit" value="百度">
<input type="button" value="这是一个无法提交的百度" />
<button type="button">我是一个按钮</button>
</form>
</body>
</html>
input标签是form表单中非常重要的输入域控件,所有的输入域控件都是用来收集用户的数据。用户实际上就是向输入域控件中输入数据的。input标签中最常用的属性是type属性。type属性用来设置输入域控件展示的样式。它有那些只可选?
text:文本框
password:密码框
radio:单选按钮
checkbox:复选框
当需要提交数据时必须要有name属性,否则无法提交。
文本框中value属性不需要程序员写,因为用户会填写,用户在文本框中填写的内容就是value
需要注意的是:提交按钮只是为了起到提交的作用,按钮上的数据是不需要提交的。不要提交的数据你千万别写name属性。否则会一起提交上去。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<form action="http://localhost:8080/a" method="get">
<h1>user login</h1>
<hr >
username: <input type="text" name="username"/><br>
password: <input type="password" name="password"/><br>
<input type="submit" value="login"/>
</form>
</body>
</html>
注册表单的一个小案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册表单</title>
</head>
<body>
<form action="http://localhost:8080/register" method="get">
<!-- 对于用户名和密码来说,这里的value不需要程序员写,用户会自己输 -->
用户名:<input type="text" name="username"/><br>
密码:<input type="password" name="password"/><br>
<!-- 对于性别来说,这里用到的是单选按钮,需要写value来告诉服务器选的是什么 -->
<!-- 本次代码中,1表示男,0表示女。提交到服务器就是sex=1或者sex=0,这样服务器才会收到数据 -->
<!-- 对于单元按钮,name必须一致才行 -->
性别:男<input type="radio" name="sex" value="1" />
女<input type="radio" name="sex" value="0"/><br>
学历:
<!--下拉列表 同样这里提交的也是name=value-->
<!-- select标签要设置默认值可以用selected -->
<select name="grade">
<option value="">学历选择</option>
<option value="1">高中</option>
<option value="2">大专</option>
<option value="3">本科</option>
<option value="4" selected>硕士</option>
</select>
<br>
兴趣:
<!-- 同样这样的value也需要程序员赋值 -->
<!-- 如果要设默认值,input标签可以用checked -->
抽烟<input type="checkbox" name="hobby" value="smoke" checked/>
喝酒<input type="checkbox" name="hobby" value="drink" checked/>
烫头<input type="checkbox" name="hobby" value="tangtou"/>
<br>
简介:<textarea rows="10" cols="60" name="jianjie">
</textarea>
<br>
<input type="submit" value="注册" />
<input type="reset" value="重置" />
</form>
</body>
</html>
结果:
提交结果:是与我自己选的一致的,没什么毛病
http://localhost:8080/register?username=123&password=123&sex=1&grade=4&hobby=smoke&hobby=drink&jianjie=%09%E7%BB%99%E4%BD%A0%E4%B8%80%E6%8B%B3%09%09
file控件是input标签里的type属性中的一个类型,使用file控件可以选择文件上传。
hidden控件,input标签里的type属性中的一个类型,是一个隐藏域控件,当有需求是需要提交一个东西但又不想显示出来,可以使用hidden控件。
提交后,被hidden隐藏的代码也会提交到服务器。
readonly属性用在input标签中,用了此属性内容只读,不能修改,可以提交
disable属性用在input标签中,用了此属性内容只读,不能修改,不会提交。
maxlength属性可以规定输入的长度是多少。
演示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>file、hidden控件</title>
</head>
<body>
<form action="http://localhost:8080/a" method="get">
<input type="file" />
<br>
<input type="hidden" name="usercode" value="1111" />
机构代码:<input type="text" name="oracle" />
<hr >
<input type="text" name="usercode" value="1111" disabled/><br>
<input type="text" name="hai" maxlength="4"/>
<input type="submit" value="保存" />
</form>
</body>
</html>
10 id属性
每一个节点都有id属性。id是这个节点对象的唯一标识,或者说id是这个节点的身份证编号。在同一个HTML文档当中id具有唯一性,不可重复。
javascript语言 , 对以上的form表单中的元素进行增删改查操作。来达到网页的动态效果。当javascript语言对某个节点进行操作的时候,需要先获取到该节点对象,怎么获取该节点对象呢?
答案是:可以通过该节点对象的id来获取到该节点对象。
11 div
div是图层,也可以叫做盒子。div是专J用来做网页布局的。其实最早的时候网页元素的布局是采用table进行布局,但是table布局不够灵活。当代的网页元素布局都是采用div的方式,div套div。也就是盒子套盒子。div布局会更加的灵活、方便。
div和span都可以看做是盒子。 他们有什么区别呢?
div默认情况下会独自占用一行。span不会独自占用一行。
演示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div</title>
</head>
<body>
<div id="div1">
我是一个div
<div id="div2">
<div id="div3">
我也是一个div
</div>
</div>
</div>
hello world
<span id="span1">
我是一个span
</span>
你好
</body>
</html>