Html5_标签
HTML
1、一套规则,浏览器认识的规则。
2、开发者:
学习Html规则
开发后台程序:
- 写Html文件(充当模板的作用) ******
- 数据库获取数据,然后替换到html文件的指定位置(Web框架)
3、本地测试
- 找到文件路径,直接浏览器打开
- pycharm打开测试
4、编写Html文件
- doctype对应关系
- html标签,标签内部可以写属性 ====> 只能有一个
- 注释: <!-- 注释的内容 -->
5、标签分类(自闭合/主动闭合 块级标签/内联标签)
- 自闭合标签
<meta charset="UTF-8">
- 主动闭合标签
title>老男孩</title>
6、
head标签中
- <meta -> 编码,跳转,刷新,关键字,描述,IE兼容
<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" />
- title标签
- <link /> 搞图标,欠
- <style />欠
- <script> 欠
7、body标签
- 图标, > <
- p标签,段落
- br,换行
======== 小总结 =====
所有标签分为:(自闭合/主动闭合 块级标签/内联标签)
块级标签: div(白板),H系列(加大加粗),p标签(段落和段落之间有间距)
行内标签: span(白板)
标签之间可以嵌套
标签存在的意义,css操作,js操作
ps:chorme审查元素的使用
- 定位
- 查看样式
- h系列
- div 块级标签白板
- span 内联标签白板
- input系列 + form标签
input type='text' - name属性,value="赵凡"
input type='password' - name属性,value="赵凡"
input type='submit' - value='提交' 提交按钮,表单
input type='button' - value='登录' 按钮
input type='radio' - 单选框 value,checked="checked",name属性(name相同则互斥)
input type='checkbox' - 复选框 value, checked="checked",name属性(批量获取数据)
input type='file' - 依赖form表单的一个属性 enctype="multipart/form-data"
input type='rest' - 重置
<textarea >默认值</textarea> - name属性
select标签 - name,内部option value, 提交到后台,size,multiple
- a标签
- 跳转
- 锚 href='#某个标签的ID' 标签的ID不允许重复
- img 图片
src
alt
title
- 列表
ul
li
ol
li
dl
dt
dd
- 表格
table
thead 表头
tr 行
th列
tbody 身体
tr行
td列
colspan = '' 左右横跨几列
rowspan = ''上下横跨几行
- label
用于点击文件,使得关联的标签获取光标
<label for="username">用户名:</label>
<input id="username" type="text" name="user" />
- fieldset
legend
- 20个标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--<meta http-equiv="refresh" content="3"> <!–自动刷新–>--> <!--<meta http-equiv="refresh" content="3;Url=http://www.xju.edu.cn/"> <!–自动跳转–>--> <meta name="keywords" content="新大,*大学,大学,211,双一流"> <!--关键字,搜索引擎关键字搜索用--> <meta name="description" content="*大学是双一流,211,边疆重本。。。"> <!--网站描述--> <meta http-equiv="X-UA-COMPATIBLE" content="IE=IE9;IE=IE8;IE=IE7" /> <!--网站对浏览器的兼容--> <title>*大学欢迎你</title> <!--title--> <link rel="shortcut icon" href="C:\Users\Administrator\PycharmProjects\untitled\前端\html\image\aaa.png" /> </head> <body> <div> <p>p标签 代表段落,段落与段落之间,存在间距 <br /> 'br'标签是自闭和标签,用于段落之间的换行</p> <h1>h1最大</h1> <h3>啊啊啊</h3> <h6>h6最小</h6> <span>标签分为:自闭和标签,不自闭和标签<br /></span> <span>标签分为:块级标签(h系列(加大加粗)),<br /> 或者行内标签(内联标签(白板))</span> <span>空白标签</span> <span>行内标签</span> <div>div 是块级标签 也是白板</div> <div>标签之间可以嵌套</div> <div>标签存在的意义: 方便定位,js操作,css操作</div> <form action="url" method="get/post"> <!--当用户输入用户名密码时,利用from标签将用户名和面膜以字典的形式传给url({user:'输入的用户名,pwd:'输入的密码''})--> <input type="text" name="user" value="请输入用户名:"> <!--单行文本框--> <br /> <input type="password" name="pwd" > <input type="button" value="登录"> </form> <form action="https://www.sogou.com/web" enctype="multipart/form-data"> <div> <br /> <input type="text" name="query"> <input type="submit" value="搜索"> <br /> <div>请选择性别:</div> 男: <input type="radio" name="sex" value="1"> <!--单选框,类似于选择性别,若name相同,则几个选项互斥,根据value来传值--> 女: <input type="radio" name="sex" value="1"> alex: <input type="radio" name="sex" value="1"> <p>爱好:</p> 打球: <input type="checkbox" name="打球" checked="checked"> <!--复选框 name的值一般一个复选框一样 checked="checked 为默认被选中 单选框也可以默认"--> 睡觉: <input type="checkbox" name="睡觉"> 看书: <input type="checkbox" name="看书"> 游戏: <input type="checkbox" name="游戏"> 吉他: <input type="checkbox" name="吉他"> <br /> <p> <input type="file" name="fname"> <!--上传文件依赖于form标签的 enctype="multipart/form-data" 属性 没这个属性 上传不了,这个属性用于将选定的文件发给服务器--> </p> <textarea name="meno">多行文本框,默认值写在中间</textarea> <p>选择城市()下拉框:</p> <select name="city" size="10" multiple="multiple"> <!--下拉框,服务器端拿testarea的name,根据option中的value属性传数据,size表示默认显示大小selected=selected表示默认选中,multipart=multipart为多选--> <option value="1" selected="selected">上海</option> <option value="2">成都</option> <option value="3">西安</option> </select> <!--下拉框分组--> <select> <optgroup label="河北省"> <option>石家庄</option> <option>邯郸</option> </optgroup> <optgroup label="陕西省"> <option>西安</option> <option>咸阳</option> <option>汉中</option> </optgroup> </select> </div> <input type="submit" value="登录"> <!-- #加上from标签后 点击type='submit(提交按钮:表单)'按钮会提交数据--> <input type="reset" value="重置"> <!--将当前form表单中用户输入的东西清空--> </form> </div> <!--a标签用来跳转超链接,target='_blank'在新界面打开--> <a href="ht tp://www.xju.edu.cn/" target="_blank">* 大学</a> <!--让a标签和某一标签建立关联,就用href关联改标签的id加上#--> <!--<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>--> <a href="https://www.baidu.com"> <img src="../image/1.jpg" alt="女神" title="吉泽明步" style="height:200px;width:300px"> <!--<img src="image/4.gif" alt="女神" title="吉泽明步">--> </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" style="height:200px;width:200px"> <thead> <tr> <th>网站名称</th> <th>网址</th> <th>跳转</th> <th>详情</th> </tr> </thead> <tbody> <tr> <td>百度</td> <td>百度</td> <td colspan="2">百度</td> <!--colspan=2代表左右横跨两列--> </tr> <tr> <td rowspan="2">百度</td> <!--rowspan=2代表上下横跨两列--> <td>百度</td> <td>百度</td> <td>百度</td> </tr> <tr> <td>百度</td> <td>百度</td> <td>百度</td> </tr> </tbody> </table> <fieldset> <legend>登录</legend> <!--fieldset和legend配套使用,实现画一个框--> <label for="username">用户名:</label> <!--label是实现点击文字获取光标--> <input id="username" type="text"> <br /> <label for="pwd">密码:</label> <input id="pwd" type="text"> </fieldset> </body> </html>
上一篇: 二维数组