Web 开发基础之Html
1、一套规则,浏览器认识的规则。
2、只能有一个html标签、head标签、body标签
3、在head标签里写的所有标签内容是看不见的,除了title标签
4、在html里的注释:< -- ! 注释的内容 -- >
标签分类
- 自闭合标签:如meta标签
- 主动闭合标签
head标签里的内容:
html 标题
<title>test_title</title>
标题旁边的图标
<link rel="shortcut icon" href="11.ico"> :shortcut icon是固定内容,这样就表示设置图标
<link rel="stylesheet" type="text/css" href="css/common.css" >:stylesheet表示要设置css
编码
<meta charset="UTF-8">:用于定义编码
刷新
<meta http-equiv="refresh" Content="3">:默认3秒钟刷新一次页面
跳转
<meta http-equiv="refresh" Content="3; Url=http://www.baidu.com" />: 默认3秒钟跳转到百度
所以这里的meta主要的两个功能就是刷新和跳转
关键字
<meta name="keywords" content="linux,python,运维">:用来做搜索引擎,关键字搜索
描述
<meta name="description" content="汽车之家为您提供最新汽车报价,汽车图片,汽车价格大全 "/>:用来描述网站,如网站是做什么用的
兼容IE
<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;IE=IE7" />
body标签里的内容:
特殊的符号
 
<p>这是一个 段落</p>:表示空格
>、<
<p>这是一个 <a>段落</p>:表示大于、小于号
h标签:表示标题,从<h1> - <h6>。<h1>定义最大的标题,<h6>定义最小的标题
<h1>这是标题 1</h1> <h2>这是标题 2</h2> <h3>这是标题 3</h3> <h4>这是标题 4</h4> <h5>这是标题 5</h5> <h6>这是标题 6</h6>
p标签:表示段落,默认段落之间是有间隔的
<p>这是一个段落</p> <p>这是另一个段落</p>
br标签:表示换行。
<p>这是一个<br />段落</p> <p>这是另一个<br/><br/>段落</p>
span标签:空白标签
<span>hello</span> <span>hello</span> <span>hello</span> <span>hello</span>
小总结:
所有的标签分为:
块级标签:div标签(白板)、h标签(加大加粗)、p标签(段落和段落之间有间距)
行内标签(内联标签):span标签(白板)
div标签(用的最多的标签)
<div>1</div> <div>2</div> <div>3</div>
标签之间可以嵌套
标签存在的意义:定位操作,js、css操作
ps:chorme审查元素的使用:1.可定位、找到某个元素 2.可查看样式
input系列
<form action="http://localhost:8888/index" method="POST"> <!--要想往后台提交数据,就要用form标签。action属性规定 当提交表单时,向何处发送表单数据。method属性规定 如何发送表单数据,如果值为GET 表示把数据先拼接到URL上再提交过去,值为POST 表示把数据放到body(内容)里提交过去 --> <input type="text" name="user"> <!--name属性,value可以设置默认值 --> <input type="password" name="pwd"> <!--name属性,value可以设置默认值 --> <input type="submit" value="提交"> <input type="button" value="按钮"> </form>
单选框(input系列)
<input type="radio" value="gender"> :单选框具有 value、checked="checked"表示默认被选中、name属性(name相同则互斥)
<p>请选择性别</p> 男:<input type="radio" name="gender" value="1"> 女:<input type="radio" name="gender" value="2"> <input type="submit" value="提交">
复选框(input系列)
<input type="checkbox" name="favor" value="1">:复选框 具有value,、checked="checked"表示默认被选中、name属性(批量获取数据)
<p>爱好</p> 足球:<input type="checkbox" name="favor" value="1"> 篮球:<input type="checkbox" name="favor" value="2"> 乒乓球:<input type="checkbox" name="favor" value="3"> 网球:<input type="checkbox" name="favor" value="4"> <input type="submit" value="提交">
上传文件与重置(input系列)
<form enctype="multipart/form-data"> <p>上传文件</p> <input type="file" name="fname"> <!--依赖form表单的一个属性:enctype="multipart/form-data" --> <input type="submit" value="提交"> <input type="reset" name="重置"> </form>
大输入框 textarea
<textarea name="member">默认值</textarea> <input type="submit" value="提交">
select标签(下拉框)
name,内部option value提交到后台
size用于显示多个,如果不写则默认显示一个。select="selected"表示默认选择
<select name="city" size="2"> <option value="1">北京</option> <option value="2">上海</option> <option value="3" selected="selected">南京</option> <option value="4">成都</option> <option value="5">重庆</option> <input type="submit" value="提交"> </select>
上述只能单选,下面方式实现多选
size用于显示多个,multiple用于多选
<select name="city" size="10" multiple="multiple"> <option value="1">北京</option> <option value="2">上海</option> <option value="3" selected="selected">南京</option> <option value="4">成都</option> <option value="5">重庆</option> </select>
按住Ctrl键可以多选,效果如下:
select 标签延伸
<select name="city" size="2" multiple="multiple"> <optgroup lable="河北省"> <option value="1">石家庄</option> <option value="2">邯郸</option> </optgroup> <optgroup lable="浙江省"> <option value="1">舟山</option> <option value="2">宁波</option> </optgroup> </select>
a标签
跳转:
<a href="http://www.baidu.com">百度</a> <!-- 这种默认情况下是在当前标签打开此网页 --> <a href="http://www.baidu.com" target="_blank">百度</a> <!--这样就会在一个新的标签打开网页 -->
锚:实现点击目录跳转到相应的内容,实现的方式是通过给标签设置不同的id,然后在a标签的href属性设置#id
关于锚的一个实现例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="#i1">第一章</a> <a href="#i2">第二章</a> <a href="#i3">第三章</a> <a href="#i4">第四章</a> <div id="i1" style="height: 600px">第一章的内容</div> <div id="i2" style="height: 600px">第二章的内容</div> <div id="i3" style="height: 600px">第三章的内容</div> <div id="i4" style="height: 600px">第四章的内容</div> </body> </html>
实现的效果就是通过点击相应的章节目录跳转到相应的内容,如下:
img标签
<img src="qq_test.png" style="height: 200px;width: 200px;">
如上就可以在页面上显示图片
如果想要实现点击图片跳转,通过a标签实现:
<a href="http://www.baidu.com"> <img src="qq_test.png"> </a>
如果图片不存在了,在图片位置显示文字,通过alt参数实现:
<a href="http://www.baidu.com"> <img src="../qq_test.png" alt="图片1" > </a>
效果如下:
如果想要鼠标放在图片上显示内容,通过title参数实现:
<a href="http://www.baidu.com"> <img src="../qq_test.png" alt="图片1" title="图片1" > </a>
列表标签
<ul> <li>苹果</li> <li>三星</li> <li>诺基亚</li> </ul>
效果图如下:
<ol> <li>香蕉</li> <li>苹果</li> <li>桃子</li> </ol>
效果图如下:
<dl> <dt>水果</dt> <dd>苹果</dd> <dd>香蕉</dd> <dd>梨</dd> <dt>蔬菜</dt> <dd>白菜</dd> <dd>萝卜</dd> <dd>西红柿</dd> </dl>
效果图如下:
表格标签
代码例子:
<table border="1"> <tr> <td>主机名</td> <td>端口</td> <td>操作</td> </tr> <tr> <td>192.168.1.1</td> <td>80</td> <td>
<a href="index.html">查看详细</a>
<a href="index2.html">修改</a>
</td> </tr> <tr> <td>192.168.1.2</td> <td>81</td> <td>添加</td> </tr> </table>
实现效果:
但是上面的表格不是特别规范,下面是规范的表格写法:
<table border="1"> <thead> <tr> <th>表头1</th> <th>表头2</th> <th>表头3</th> <th>表头4</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </tbody> </table>
这里的thead 专门用于写表头,th用于写表头中的具体信息
实现效果:
列表里的合并单元格
通过colspan="2"参数实现横向合并
通过rowspan="2"实现纵向合并
lable标签(用于点击文字,使得关联的标签获取光标)
通过和input标签搭配使用
<label for="username">用户名:</label> <input id="username" type="text" name="user" />
鼠标点击用户名输入框会自动获取光标,效果图如下:
fieldset标签
<fieldset> <legend>登录</legend> <label for="username">用户名</label> <input id="username" type="text" name="user" /> <br />
<label for="password">密码</label> <input id="password" type="password" name="pwd" /> </fieldset>
实现的效果: