1、html概念
①html :hyper text markup language 超文本标记语言(超文本标签语言)
②html文件 是由html这个语言写的文件。
这些标签告诉WEB浏览器如何显示页面。
HTML文件可以通过记事本来创建,文件扩展名必须为html或htm。(建议用html作为扩展名,避免一些新软件打不开以htm为扩展名的文件)
HTML文件又叫html文档。
2、html标签
标签的格式: <标签名> 封装的数据 </标签名>
或者 <标签名/>
前者是双标签的格式,后者是单标签的格式
标签名大小写不敏感
标签拥有自己的属性,还可以自定义标签的属性。
<html>
<head>
<title>这里写页面的标题</title>
<base href="http://www.baidu.com/" target="_blank" />
</head>
<body>
<a href="http://www.xxx.com/ ">首页</a>
<a href="bbs/index.html" target="_self ">论坛</a>
<p> <b>这是我的第一个页面,此句话被加粗了</b></p>
</body>
</html>
3<html>标签
<html>
标签告诉浏览器此 HTML 文件的起点。</html>
标签告诉浏览器,这是 HTML 文件的结束点。
4 <head>标签
head 元素可包含关于文档的信息。head标签较为特殊,
在 <head> 标签和 </head> 标签之间的内容是头信息。
头信息不会显示在浏览器窗口中。只以下标签才能放到
head标签之间,
它们分别是 <title>、<base>、<meta>、
<scirpt>、<link>、<style>
<title>标签
:标签之间写的字符串就是该页面的标题。对当前页面核心内容的一个简短的、概括性描述,会显示在浏览器的标题栏,还会出现在浏览历史列表和书签中,也是搜索引擎的一个重要索引项。
<title>CSDN-专业开发者社区</title>
<base/>标签
:单标签。为页面上的所有链接设置默认url地址(由href属性指定)和默认目标窗口(由target属性指定)
<base href="http://www.baidu.com/" target="_blank" />
当页面的某个链接没有写href属性或target属性(比如a标签),
或链接写错时,导致链接无效,也会采用base中设置的默认链接。
<meta/>标签
:单标签。提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。
常见的就是描述网页的关键字、网页内容描述、搜索引擎向导、作者、版权声明等,以便搜索引擎对网页的信息进行查找和分类。如:
<head>
<meta name="keywords" content="HTML, CSS, RWD" />
<meta name="description" content="Study HTML, CSS, RWD for free" />
<meta name="robots" content="all" />
<meta name="author" content="csdn, www.csdn.com" />
<meta name="copyright" content="仅供学习使用,欢迎转载、评论、交流" />
</head>
到了HTML5,一切都变简单了,只需设置meta标签的charset属性来定义网页所使用的编码字符集。
<meta charset="utf-8"/>
5 <script>标签
这个标签在学校JavaScript时用到。
6 <h1>标签
h1 - h6 都是标题标签,h1的字号最大,h6的字号最小。
用过markdown语法的同学对此肯定很熟悉
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
结果如下:
7<a>超链接标签
Hypertext Reference 超文本引用,俗称超链接,指向一 些网络资源,类似指针,通过他,就可以访问那个资源。
具有同种思想的还有一个常常在多个标签中出现的src属性,此属性的值也是一个地址,是一种引用。
8列表标签
敲代码技巧
输入 ul>li*3 后直接敲Tab键,就会输出
<ul>
<li></li>
<li></li>
<li></li>
</ul>
>
可以理解成 子元素,是可以连续使用的,即嵌套。
其他敲代码的小技巧,可点击:
HTML标签敲代码小技巧
9 img标签
img标签可以在html页面上显示图片。
常用属性:
- src:设置图片的路径
- width:设置图片宽度
- height:设置图片高度
- border:设置图片边框大小
- alt:当根据src找不到图片时,用来代替显示的文本内容。
注意:在HTML4.0中,img标签的align、border、hspace、vspace不赞成使用,在HTML5中,不再支持这些属性。
绝对路径和相对路径
我们知道,在javaSE中有相对路径和绝对路径,
相对路径:从工程名开始算;
绝对路径:就是在磁盘上哪个目录下。盘符:/目录/文件名。
在web中路径也分为相对路径和绝对路径两种
:
相对路径:
.
一个点表是当前文件所在的目录
..
两个点表示当前文件所在的上一级目录
文件名
表示当前文件所在目录的文件。相当于./文件名,./可以省略
绝对路径:
正确格式是:http://ip:port/工程名/资源路径
而非磁盘路径。因为这是在网络上,要用ip和端口号。
10 <table>标签
是非常常用的标签。
简单模拟:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<base href="http://www.baidu.com" target="_self">
<title>表格的使用复习</title>
</head>
<body>
<table border="2">
<tr>
<td >地方精选特产</td>
<td rowspan="2">云糕细腻香甜</td> <!--只夸2行,即这一个方格占1*2-->
<td rowspan="2" colspan="2" > </td> <!-- 跨2行跨2列,即这一个方格占2*2-->
</tr>
<tr>
<td>古田特级银耳</td>
</tr>
<tr>
<td rowspan="2" colspan="2">辽宁美食大观园</td>
<td>老字号:经典味道</td>
</tr>
<td>手工艺:万种风情</td>
<tr>
</table>
</body>
</html>
11 <input>标签
很常用的标签,常常和form
标签一起使用。
input的属性:
注意:replace属性已经没有了。
补充一个属性:placeholder 占位符,他的值就是占位值,常用于输入框。
用户名:<input type="text" placeholder="请输入用户名">
效果如下:
input标签最常用的属性type,此属性可以使input标签具有不同的功能,比如变成密码输入框、多选框、单选、下拉等
input标签的另一个重要的属性:value
12 <textarea>标签
<textarea name="personalInfo" id="textarea01" cols="30" rows="10">我是默认内容。请输入你的内容</textarea>
<!--
是一个多行纯文本编辑控件,当你想让用户输入大量自由格式的文本(例如评论或反馈表单上的评论)时,它很有用。
id属性:此标签的id,需唯一
name属性,提交表单时提交给服务器的key。
我们知道表单提交时是以key-value的形式(即键值对形式)提交给服务器的,
值就是输入的文本。
Rows和cols属性,设置文本域的大小,即指定行、列是多少。设置这些参数有助于保持一致性,因为浏览器的默认值可能不同。
在标签之间输入的内容是默认内容。
不支持value属性
-->
13<select>下拉列表标签
敲select>option*4 然后按Tab键
<select name="nations" id="nations" >
<option >选择国籍..</option>
<!--加上selected属性,默认选中中国。下面其实是selected="selected"的简写-->
<option value="china" selected="selected">中国</option>
<option value="usa">美国</option>
<option value="xrb">日本</option>
</select>
14 <form>表单标签
form标签就是表单。要提交给服务器。也是很常用的标签。
表单格式化:在form标签内使用table标签、input标签、
如何写代码:先有一个整体的、大概的样子,然后敲除整体得结构,再往里面添东西。比如这个例子,先根据需求敲出多个,然后在各自的中敲出多个,敲完后,再往td里填写其他东西,比如其他的标签。其实,这就是标签嵌套使用的过程,要先把外部结构搭建好,一层层往里,这样多标签使用才不容易乱
form例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form的格式化测试</title>
</head>
<body>
<form action="http://localhost:8080" method="post">
<input type="hidden" name="action" value="login" />
<h1>用户注册</h1>
<!--使用table标签就是为了格式好看,都对齐。-->
<table >
<tr>
<td> 用户名</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td> 密码</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td> 确认密码</td>
<td><input type="password" name="password2"></td>
</tr>
<tr>
<td> 邮箱</td>
<td><input type="email" name="email"></td>
</tr>
<tr>
<td> 性别</td>
<td><input value="man" type="radio" name="sexselection">男 <input value="woman" type="radio" name="sexselection"> 女</td>
</tr>
<tr>
<td>国籍</td>
<td>
<select name="selectlist">
<option value="china" selected="selected">中国</option>
<option value="xrb">日本</option>
<option value="bz">韩国</option>
<option value="usa">德国</option>
<option value="els">俄罗斯</option>
<option value="jnd">加拿大</option>
</select>
</td>
</tr>
<tr>
<td>以下你喜欢的角色有</td>
<td>
<input type="checkbox" value="zhongli" name="hobby"> 钟离 <br>
<input type="checkbox" value="keli" name="hobby"> 可莉 <br>
<input type="checkbox" value="diaona" name="hobby"> 迪奥娜 <br>
<input type="checkbox" value="feixeier" name="hobby"> 菲谢尔 <br>
<input type="checkbox" value="xiaogong" name="hobby"> 霄宫 <br>
<input type="checkbox" value="ningguang" name="hobby"> 凝光 <br>
</td>
</tr>
<tr>
<td>简单的自我介绍</td>
<td>
<textarea rows="10" cols="15" name="desc"></textarea>
<input type="reset" >
</td>
</tr>
<tr>
<td>
<input type="submit" >
</td>
</tr>
</table>
</form>
</body>
</html>
上面例子中,form的使用的method是post,如果改成get,然后在页面中填写信息,就可以在浏览器地址栏里看到下面的东西:
在浏览框中能看到以下信息.以名字/值对的形式发送给服务器,即name/value对的形式,所以,一些标签中必须写上name属性和value属性,只有写上了,才能把这些数据发送给服务器。
http://localhost:8080/?action=login&username=%E6%89%80%E5%BF%B5%E7%9A%86%E6%98%9F%E6%B2%B3&password=1&password2=1&email=2213273020%40qq.com&sexselection=man&selectlist=china&hobby=zhongli&hobby=keli&hobby=diaona&desc=asd
这就是表单使用get方式,你填写后,这些信息会发送给
指定的服务器。密码都暴露在地址栏里,可见get方式是不安全的。
所以,表单的提交常用post。
补充说明:
http是服务器的ip地址
?是分隔符
action 是<input type="hidden" name="action" value="login" /> 此标签的 名字/值对。
& 是连接符,用于连接多组名字/值对。
15div、span、p标签
span:范围
div:division 分隔
p:paragraph 段落