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下,浏览器解析渲染时,会认为空白符也是占位置的,默认其具有字 ...
随机推荐
- 服务器配置，负载均衡时需配置MachineKey
服务器配置,负载均衡时需配置MachineKey https://blog.csdn.net/liuqiao0327/article/details/54018922 Asp.Net应用程序中为什么要 ...
- Linux上使用VIM进行.Net Core
如何在Linux上使用VIM进行.Net Core开发 对于在Linux上开发.Net Core的程序员来说, 似乎都缺少一个好的IDE.Windows上有Visual Studio, Mac上有Vi ...
- spark 图文详解:资源调度和任务调度
讲说spark的资源调度和任务调度,基本的spark术语,这里不再多说,懂的人都懂了... 按照数字顺序阅读,逐渐深入理解:以下所有截图均为个人上传,不知道为什么总是显示别人的QQ,好尴尬,无所谓啦, ...
- babel7中 corejs 和 corejs2 的区别
babel7中 corejs 和 corejs2 的区别 最近在给项目升级 webpack4 和 babel7,有一些改变但是变化不大.具体过程可以参考这篇文章 webpack4:连奏中的进化.只是文 ...
- spring boot Filter过滤器的简单使用
springboot使用Filter过滤器有两种方式: 一种是实现Filter接口然后通过@Component注解向项目加入过滤器 另一种是通过配置类来配置过滤器 @Component public ...
- Spring RestTemplate实现服务间的远程调用完整代码示例
父pom: 服务提供方 pom: provider配置文件: provider启动类: provider实体类: provider Mapper: 内置了增删改查的方法 provider Servic ...
- 用Meta标签代码让360双核浏览器默认极速模式打开网站不是兼容模式
公司所作的页面在360下打开都会遇到在360下自动跳到360兼容模式引发许多兼容问题,摸索了好久终于在网上找到了怎么解决的方法,详情如下: 其实360给网站开发者设计了一种选择的方法,只要加入一段Me ...
- LR脚本示例之常用函数
1.变量和参数的设置 //将IP地址和端口放入到参数中lr_save_string("127.0.0.1:1080","ip"); //退出脚本建议使用lr_e ...
- Linux之bash shell的学习
1.什么是bash shell bash 是Bourne Again Shell的简称,是从unix系统中的sh发展而来,是用户和偶Linux内核交互的工具,用户通过bash操作内核完成系统的使用和 ...
- 洛谷 P3313 [SDOI2014]旅行
题目描述 S国有N个城市,编号从1到N.城市间用N-1条双向道路连接,满足从一个城市出发可以到达其它所有城市.每个城市信仰不同的宗教,如飞天面条神教.隐形独角兽教.绝地教都是常见的信仰. 为了方便,我 ...