【HTML】常用的标签学习(2)
现在的使用的html语言都是h5,但是h5也是从h4继承发展来的,所以h4的标签我们也要学习,然后加上h5新增的标签,那么html这门语言才算学习完毕。上次学习了h4的一些常用标签,今天学习h4剩下的一些会用到的标签。重点是我们要理解html全部都是标签组成,而标签的实质就是语义化。所以重点在于掌握标签的语义。html遵循w3c标准,所以我们可以进入https://www.w3school.com.cn进行查询,这是中文版的,但是对于我们来说,够用了。
2.6 表单form
表单form标签是前后端交互的一个必不可少的标签,所有用户输入的数据我们都会把它放在一个表单里,提交给后台。也会把后台读取的数据通过表单,显示在前台页面。最典型的应用就在于用户的登陆和注册。所以我们需要理解form以及里面的一些子标签。
7form.html
<!--form表单,他的主要用途在于前后端数据之间的交互,非常重要!-->
<form>
<!--p标签自带换行,也可以使用<br/>-->
<!--input标签也是一个单标记,type表示该输入框的类型-->
<p>用户名<input type="text" value="请输入用户名"></p><!--text表示文本框,value表示默认值--> <p>密 码<input type="password"></p><!--passeword表示密码框,所有输入都会以*显示-->
<!--
浏览器只会识别一个“ ”(空白折叠),所以可以通过输入 避免折叠
--> <p>
性 别
<input type="radio" name="sex">男
<input type="radio" name="sex">女
<input type="radio" name="sex" checked>保密
<!--radio表示单选,但要想实现单选效果,可以通过给几个选项设置相同的name属性值来进行控制-->
</p> <p>
个人爱好
<input type="checkbox">篮球
<input type="checkbox">兵乓球
<input type="checkbox" checked>羽毛球
<input type="checkbox">足球
<!--checkbox表示多选,其中属性值name和id用作与后端交互,之后再提-->
</p> <p>
所在城市
<select>
<option value="" >北京</option>
<option value="">上海</option>
<option value=""selected>南京</option>
<option value="">武汉</option>
</select>
<!--select表示下拉框,option是它的子选项。其中selected="selected"表示默认选中,
因为属性名和属性值相同,所以可以省略属性值,同理在单选和多选中,用checked表示默认选中-->
</p> <p>
留言
<textarea id="" cols="30" rows="10"></textarea>
<!--textarea标签表示文本区域,注意他和select一样不是input标签的type属性,而是单独标签-->
</p> <p>
<input type="button" value="普通按钮">
<input type="submit" value="提交按钮"><!--点击之后,浏览器会把前台信息传到某个地方,做后端处理-->
<input type="reset" value="清空按钮"><!--清空所有信息-->
</p>
</form>
为了显示的更好看,我们添加一个简单的css,给页面设置一个背景。css代码放在<head></head>标签下。
7form.html
<style>
body {
background-color: skyblue
}
</style>
实现效果:
2.7 实体entity
什么是实体?其实就如上面代码中所举例的,要输入空格我们使用了 。就是因为html是语义化的,浏览器也是基于此去判断我们所写的html代码。比如我们想输入一个<p>,浏览器会自动把它识别为段落标签的一部分。所以要想实现输入,我们就需要学会实体。这个不需要记忆,有需要可以去w3c官网查找。
8entity.html
<p></p><!--不会显示,因为浏览器会把它当作段落标签处理--> <!--因为<>等符号会被html做语义化解释,要想实现输出比如<p>就需要通过实体-->
<p><!--如<表示<,>表示> 也可以通过十六进制输入,具体可查看w3c给的文档-->
实现效果:
2.8 div+span
10div+span.html
<!--
div和span主要是用做布局,但div是一个大容器,里面什么标签都可以放,span主要用在局部
h5之后有很多标签可以替代div,但很多网页仍采用div+css
-->
<div>
这是头部
</div>
<div>
这是主体
</div>
<div>
这是<span>尾部</span>
</div>
并且添加了一点css,用以区别
<style>
span {
font-size: 26px;
}
</style>
实现效果:
2.9 被废弃的标签
在html中存在很多废弃的标签,因为标签重点强调语义化,而不是控制字体大小颜色等, 所有的样式我们都交给css去做,所以在开发中我们要实现结构和样式的分离
l9forbidden.html
<font color="blue">文本样式</font>
<hr size="4" color="green" />
<i>倾斜</i>
<em>倾斜(有强调作用)</em>
<b>加粗</b>
<strong>加粗(有强调作用)</strong>
<!--相对来说,em和strong还会使用,因为他们有强调的语义--> <del>删除线</del>
到此,关于h4中所有常用标签基本学习完毕。
【HTML】常用的标签学习(2)的更多相关文章
- 【HTML】常用的标签学习
HTML(HyperText Markup Language )又称超文本标记语言,与一般文本文件不同的是它是由各种标签或标记组成 <标签名></标签名> .所以html的学习 ...
- java struts2入门学习--OGNL语言常用符号和常用标签学习
一.OGNL常用符号(接上一篇文章): 1.#号 1)<s:property value="#request.username"/> 作用于struts2的域对象,而不 ...
- python Django教程 之模板渲染、循环、条件判断、常用的标签、过滤器
python3.5 manage.py runserver python Django教程 之模板渲染.循环.条件判断.常用的标签.过滤器 一.Django模板渲染模板 1. 创建一个 zqxt_tm ...
- HTML基础标签学习
HTML基础学习 前言 HTML基础学习会由HTML基础标签学习.HTML表单学习和一张思维导图总结HTML基础三篇文章构成,文章中博主会提取出重点常用的知识和经常出现的bug,提高学习的效率,后续会 ...
- 常用HTML标签元素结合及简介
常用HTML标签元素结合及简介 <html></html> 创建一个HTML文档<head></head> 设置文档标题和其它在网页中不显示的信息< ...
- 标签语义化之常用HTML标签
一.布局的理解误区 网络上流行管新型的布局方式叫“DIV+CSS”,其实是一个错误的理解,导致了很多人过度依赖与滥用DIV标签, HTML提供了我们一共七八十个标签,其中常用的有三十个左右,DIV不过 ...
- phpcms v9 常用调用标签(全)
本文介绍phpcms v9中模板标签使用说明. {template ) {==} {/,,)} loop是data的时候用{thumb($v[thumb],,)} 分页标签------{$ ...
- 常用meta标签举例说明
本文是作者从百度百科和其他从网页中搜索到的资料,经综合整理,把常用meta标签列举并示例说明,仅供参考. 1.<meta charset="UTF-8"> --- ch ...
- 我给女朋友讲编程html系列(4) -- html常用简单标签
今天似乎有点感冒,浑身无力,在操场上躺了半个小时,好了许多.好了,废话不说了,还是写今天的教程吧. 1,html中的换行标签是 br,写法是: <br /> 2,html中有一些特殊的字符 ...
随机推荐
- vue-重要方法使用
标签属性router-link-exact-active: 当页面正在方位是触发router-link-exact-active 标签router-link to= 使用a标签页面就会跳转,就不是单页 ...
- 利用 canvas 实现压缩图片
/** * nase64Data --> 要压缩的图片base64数据 * width --> 宽度 * height --> 高度 * _callback --> 回调函数 ...
- @WebFilter 的使用及采坑
@WebFilter@WebFilter 用于将一个类声明为过滤器,该注解将会在部署时被容器处理,容器将根据具体的属性配置将相应的类部署为过滤器.该注解具有下表给出的一些常用属性 ( 以下所有属性均为 ...
- 策略模式(Strategy)---行为型
1 基础知识 定义:定义了算法家族,分别封装起来,让他们可以相互替换,此模式让算法的变化不会影响到使用算法的用户(应用层).特征:可以替换掉大量的if else语句 本质:分离算法,选择实现. 使用场 ...
- ajax+批量下载文件
用过浏览器的开发人员都对大文件上传与下载比较困扰,之前遇到了一个php文件夹上传下载的问题,无奈之下自己开发了一套文件上传控件,在这里分享一下.希望能对你有所帮助.此控件PC全平台支持包括mac,li ...
- 数学函数(C/C++)
C中包含头文件<math.h> C++包含头文件<cmath> 函数 double cos(double) 该函数返回弧度角(double型)的余弦 double tan(do ...
- npm修改源
获取原来的镜像地址 npm get registry 修改源 npm config set registry http://registry.npm.taobao.org/
- 18.二叉树的镜像 Java
题目描述 操作给定的二叉树,将其变换为源二叉树的镜像. 输入描述 二叉树的镜像定义:源二叉树 8 / \ 6 10 / \ / \ 5 7 9 11 镜像二叉树 8 / \ 10 6 / \ / \ ...
- oracle口令文件在windows和linux系统下的命名和位置
分类: Oracle 1.windows系统下 oracle口令文件在:$ORACLE_HOME/database目录下: 命名规则为:PWD$SID.ora 2.linux系统下 oracl ...
- 数据结构之栈(stack)
1,栈的定义 栈:先进后出的数据结构,如下图所示,先进去的数据在底部,最后取出,后进去的数据在顶部,最先被取出. 栈常用操作: s=Stack() 创建栈 s.push(item) 将数据item放在 ...