HTML
H(Hyper)T(Text)M(Markup)L(Language)是一种超文本标记语言,是由大量的标签组成的,每个标签都有开始标签和结束标签。
超文本:流媒体,图片,声音,视频
HTML制定者:
w3c:世界万维网l联盟。w3c指定了HTML规范,每个浏览器生产厂家都会遵守规范。HTML程序员也得按照这个规范去写代码。
w3school
w3cschool:为了方便中国web程序员的开发,为开发提供方便
<!--
1.注释
2.加上<!dectype html> 就是html5的语法,去掉表示html4.0
-->
<!dectype html>
<html>
<!--根 -->
<head>
<title>网页标题</title>
<!--头-->
</head>
<body>
网页的主题内容,Hallo World!
</body>
</html>
基本标签
1.<p></pp> <!--段落标签-->
2.<h1></h1><!--标题字:是html预留的格式,和world中的标题子相同 -->
3.<br></br><!--换行标记,br标签是一个独目标签 -->
4.<hr></hr><!--横线,独目标记 -->
5.<pre></pre><!--预留格式,在源代码敲的格式,在网页中打开也会是同样的格式 -->
6.<del></del><!--删除字 -->
7.<ins></ins><!--插入字 -->
8.<b></b><!--粗体字 -->
9.<i></i><!--斜体字 -->
10.<sup></sup><!--右上角加字 -->
11.<sub></sub><!--右下角加字 -->
12.<font></font><!--字体标签 -->
实体符号
<!--实体符号特点是:以&开始,以;结束。<是小于号, > 是大于号 -->
1.<<!--> 是大于号-->
2.> <!--大于号-->
表格
<table border="1px"></table><!--表格,border表示设置表格的边框像素-->
<tr></tr><!--表示行数-->
<td></td><!--表示列数-->
<th></th><!--自动加粗,自动剧中-->
属性:
border:设置像素
width:宽度
height:高度
align:对其方式
rowspan:合并列单元格
colspan:合并行单元格
thead,tbody,tfood拆分表格
背景颜色和图片
背景:
bgcolor:设置背景色
background:设置背景图片
图片:
img:标签就是图片标签
src:图片类路径
title:设置鼠标悬停时显示的信息
alt:加载图片加载失败后悬停的信息
超链接
<!--超链接的特点,鼠标停留在超链接上面显示图标,点击超链接之后还能跳转页面-->
<a></a><!--超链接-->
href:hot references热引用,后面填的一定是资源的地址
target:可取值
_blank:新窗口
self:当前窗口
_parent:父窗口
_top:顶级窗口
超链接的作用:
通过超链接可以从浏览器向服务器发送请求
浏览器向服务器发送数据(请求:request)
服务武器向浏览器发送数据(响应:response)
列表
有序列表:有数字提示或者可以用type设置其他提示
<ol></ol>里面签到<li></li>
无序列表:无提示
<ul></ul>里面嵌套<li></li>
表单
表单作用:
1.收集用户信息,表单展现之后,点击提交按钮提交数据给服务器
怎么画一个表单?
<form action = "http://192.168.111.3:3306/oa/save"></form><!--画一个表单,一个网页当中可以有多个表单-->
表单属性
1.action:action属性用来指定提交给那个服务器,action属性和超链接中的href属性一样都可以给服务器发送请求(request) method:采用get方式方式提交时候,用户提交的信息会显示到地址栏上 采用post方式提交的时候,用户信息不会显示到地址栏上
<body> <form action = "http://192.168.111.3:8080/oa/save"> <!--画一个提交按钮,画一个按钮可以使用 input 输入域,type ="submit" 的时候表示一个提交按钮,具有提交表单的能力--> <!--对于按钮来说,按钮上的value用来显示按钮上的显示的文本信息--> <input type="submit" value="登录"/> <input type="button" /><!--普通按钮,不具备提交能力了--> </body> action?name=value&name=value&name=value...
重点强调
表单项有name属性的,一律会提交到服务器。
下拉列表
<body> <select multiple="multiple" size="1"><!--multiple="multiple"支持多选 size 设置多选的条数---> <option>湖大</option> <option>湖大</option> <option>湖大</option> <option>湖大</option> </select> </body>
file和hidden控件
<body> <input type="file" /><!--选择文件--> </body>
readonly和disabled
<body> <form action="http://localhost:8080"></form> <!--readonly和disabled相同点:都是只读不能修改。 但是readonly可以提交给服务器,disabled数据不能提交(即使有name属性)--> 用户代码<input type="text" name="usercode" value="110" readonly /> <br> 用户姓名<input type="text" name="usercode" value="zhangshan" disabled /> <br> <input type="submit" value="提交数据" /> </body>
maxlength
<!--maxlength 设置文本框中可输入的字符数量--> <body> <input type="text" maxlength="13" /> </body>
例子
<body> <!-- 用户注册: 用户名 密码 确认密码 性别 兴趣 学历 简介 --> <form action="http://localhost:3303:lkj_mysqlOne" method="post"> 用户名: <input type="text" name="username"/> 密码: <input type="password" name="userpaw" /> <br> 确认密码 <input type="password" name="userpaw" /> <br> 性别 <input type="radio" name="gender" value="1"/>男 <input type="radio" name="gender" value="0"/>女<!--单选按钮必须手动指定--> 兴趣: <input type="checkbox" name="interes" value="smoke"/>抽烟 <input type="checkbox" name="interes" value="drink"/>喝酒 <input type="checkbox" name="interes" value="fireHair"/>烫头 <br> 学历: <select name="grade"> <option value="gz">高中</option><!--selected默认选择--> <option value="dz">大专</option> <option value="bk">本科</option> <option value="ss">硕士</option> </select> <br> 简介: <textarea rows="10" cols="60" name="jianjie"></textarea> <input type="submit" value="注册"/> <input type="reset" value="清空"/> </form> </body>
HTML中元素的ID属性
<body> <!--1.在HTML文档中,任何元素(节点)都有id属性,id属性是该节点的唯一标识。 所以在同一个HTML文档中id值不能重复。 2.表单提交数据时候和name有关和id无关 --> <input type="text" id="username" name="username"/> <input type="text" id="password" name="userpwd"/> </body>
div和span
1.div和span是什么?有啥用? div和span都可以称为图层。 图层的作用是为了保证页面可以灵活的布局。 图层就是一个一个的盒子,div嵌套div就是盒子套盒子 2.最早的网页都是采用table进行布局的,但是table有个弊端就是太死板不灵活。所以现代网页开发中都是采用div布局 3.默认情况下,div默认独自占用一行,span不会