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="data: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>
Html5_标签的更多相关文章
- HTML5_音视频标签 <audio> 和 <video>
HTML5_音视频标签 <audio> 和 <video> audio 和 video 都是 inline行内元素 如果浏览器支持,则不显示标签文本 IE8 不支持 audio ...
- Html5_移动前端不得不了解的html5 head 头标签
移动前端不得不了解的html5 head 头标签 本文主要内容来自一丝的常用的 HTML 头部标签和百度FEX的HTML head 头标签. 移动端的工作已经越来越成为前端工作的重要内容,除了平常 ...
- HTML5_新标签
HTML5 是定义 HTML 标准的最新版本. 是一个新版本的 HTML 语言,具有新的元素,属性,行为, 是一个技术及,允许更多样化和强大的网站和应用程序 优势: 跨平台: 通吃 MAC PC Li ...
- HTML5_嵌套移动APP端的H5页面meta标签
<meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, ...
- HTML5_画布_太阳系
HTML5_画布_太阳系 一.canvas属性和方法的简单介绍①对于不支持canvas标签的浏览器需要显示"不支持canvas"使用IE11浏览器的开发人员工具,仿真:文档模式=8 ...
- HTML5_布局and音视频
HTML5_布局and音视频 I.HTML5标签的改变1.文档声明HTML语法是不区分大小写的HTML5的DTD声明为:<!doctype html>确保浏览器能在HTML5的标准模式下进 ...
- HTML5_提供的 新功能_less 编译_
HTML5_提供的 新功能 class 操作 ele.classList(注意: 高版本的 IE 都不支持) 获取 <div id="ele" class="... ...
- a标签点击跳转失效--IE6、7的奇葩bug
一般运用a标签包含img去实现点击图片跳转的功能,这是前端经常要用到的东西. 今天遇到个神奇的bug:如果在img上再包裹一层div,而且div设置了width和height,则图片区域点击时,无任何 ...
- IE6、7下html标签间存在空白符,导致渲染后占用多余空白位置的原因及解决方法
直接上图:原因:该div包含的内容是靠后台进行print操作,输出的.如果没有输出任何内容,浏览器会默认给该空白区域添加空白符.在IE6.7下,浏览器解析渲染时,会认为空白符也是占位置的,默认其具有字 ...
随机推荐
- php数组生成树结构数据返回
现在有这样一个数组,要求按照树结构返回(当pid=0就表示其为菜单id,否则pid的值就是其属于某个菜单id下面): $array = array( 1 => array ('id' => ...
- LNMP下使用Phabricator(一)
首先是安装. 安装过程并不复杂,英文看得懂的可以自己看原文 https://secure.phabricator.com/book/phabricator/article/installation_g ...
- php操作redis和memcache过期时间
php-redis 设置过期时间setTimeOut 命令行expireredis过期时间redis术语里面,把设置了expire time的key 叫做:volatile keys. 意思就是不稳定 ...
- D. Edges in MST 图论
http://codeforces.com/contest/160/problem/D base on 克鲁斯卡尔, 首先每次都是对权值相同的边进行统一处理,假如加入了当前这条边出现了回路,那就能确定 ...
- Ubuntu18.10设置静态IP、DNS、卸载无用软件
设置静态IP root@xueji:~# vim /etc/network/interfaces # interfaces() ) and ifdown() auto lo iface lo inet ...
- WebApi访问方式配置
之前公司使用webapi开发项目,只知道怎么用对于怎么配置一直不了解,最近这段时间没什么事然后自己建一个webapi项目,只知道怎么用对于怎么配置一直不了解,最近这段时间没什么事然后自己建一个weba ...
- 关于使用memcached提高并发的文章,很有用
http://blog.csdn.net/ywh147/article/details/9385137 http://phl.iteye.com/category/292555 memcached 解 ...
- Redis hash(哈希)
Redis hash可储存多个键值对,适合储存对象的属性. 1.hset key fieldName fileValue //hset即hash set,set这里是设置的意思.往hash中添加 ...
- spring4、hibernate4整合xml配置
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...
- Android RecyclerView使用GridLayoutManager间距设置
使用RecyclerView设置间距,需要重写RecyclerView.ItemDecoration这个类.有如下的效果图需要实现,间距只有中间的格子和底部的格式之间有. Paste_Image. ...