【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

 1 <!--form表单,他的主要用途在于前后端数据之间的交互,非常重要!-->
 2     <form>
 3         <!--p标签自带换行,也可以使用<br/>-->
 4         <!--input标签也是一个单标记,type表示该输入框的类型-->
 5         <p>用户名<input type="text" value="请输入用户名"></p><!--text表示文本框,value表示默认值-->
 6
 7         <p>密&nbsp;&nbsp;&nbsp;码<input type="password"></p><!--passeword表示密码框,所有输入都会以*显示-->
 8         <!--
 9             浏览器只会识别一个“ ”(空白折叠),所以可以通过输入&nbsp;避免折叠
10         -->
11
12         <p>
13             性&nbsp;&nbsp;&nbsp;别
14             <input type="radio" name="sex">男
15             <input type="radio" name="sex">女
16             <input type="radio" name="sex" checked>保密
17             <!--radio表示单选,但要想实现单选效果,可以通过给几个选项设置相同的name属性值来进行控制-->
18         </p>
19
20         <p>
21             个人爱好
22             <input type="checkbox">篮球
23             <input type="checkbox">兵乓球
24             <input type="checkbox" checked>羽毛球
25             <input type="checkbox">足球
26             <!--checkbox表示多选,其中属性值name和id用作与后端交互,之后再提-->
27         </p>
28
29         <p>
30             所在城市
31             <select>
32                 <option value="" >北京</option>
33                 <option value="">上海</option>
34                 <option value=""selected>南京</option>
35                 <option value="">武汉</option>
36             </select>
37             <!--select表示下拉框,option是它的子选项。其中selected="selected"表示默认选中,
38                 因为属性名和属性值相同,所以可以省略属性值,同理在单选和多选中,用checked表示默认选中-->
39         </p>
40
41         <p>
42             留言
43             <textarea id="" cols="30" rows="10"></textarea>
44             <!--textarea标签表示文本区域,注意他和select一样不是input标签的type属性,而是单独标签-->
45         </p>
46
47         <p>
48             <input type="button" value="普通按钮">
49             <input type="submit" value="提交按钮"><!--点击之后,浏览器会把前台信息传到某个地方,做后端处理-->
50             <input type="reset" value="清空按钮"><!--清空所有信息-->
51         </p>
52     </form>

为了显示的更好看,我们添加一个简单的css,给页面设置一个背景。css代码放在<head></head>标签下。

7form.html

1 <style>
2         body {
3             background-color: skyblue
4         }
5 </style>

实现效果:

2.7 实体entity

什么是实体?其实就如上面代码中所举例的,要输入空格我们使用了&nbsp;。就是因为html是语义化的,浏览器也是基于此去判断我们所写的html代码。比如我们想输入一个<p>,浏览器会自动把它识别为段落标签的一部分。所以要想实现输入,我们就需要学会实体。这个不需要记忆,有需要可以去w3c官网查找。

8entity.html

1  <p></p><!--不会显示,因为浏览器会把它当作段落标签处理-->
2
3  <!--因为<>等符号会被html做语义化解释,要想实现输出比如<p>就需要通过实体-->
4  &lt;p&gt;<!--如&lt;表示<,&gt;表示>   也可以通过十六进制输入,具体可查看w3c给的文档-->

实现效果:

2.8 div+span

10div+span.html

 1     <!--
 2         div和span主要是用做布局,但div是一个大容器,里面什么标签都可以放,span主要用在局部
 3         h5之后有很多标签可以替代div,但很多网页仍采用div+css
 4     -->
 5     <div>
 6         这是头部
 7     </div>
 8     <div>
 9         这是主体
10     </div>
11     <div>
12         这是<span>尾部</span>
13     </div>

并且添加了一点css,用以区别

1 <style>
2         span {
3             font-size: 26px;
4         }
5 </style>

实现效果:

2.9 被废弃的标签

在html中存在很多废弃的标签,因为标签重点强调语义化,而不是控制字体大小颜色等, 所有的样式我们都交给css去做,所以在开发中我们要实现结构和样式的分离

l9forbidden.html

1     <font color="blue">文本样式</font>
2     <hr size="4" color="green" />
3     <i>倾斜</i>
4     <em>倾斜(有强调作用)</em>
5     <b>加粗</b>
6     <strong>加粗(有强调作用)</strong>
7     <!--相对来说,em和strong还会使用,因为他们有强调的语义-->
8
9     <del>删除线</del>

到此,关于h4中所有常用标签基本学习完毕。

原文地址:https://www.cnblogs.com/gg-boy/p/11517158.html

时间: 2024-11-09 00:37:42

【HTML】常用的标签学习(2)的相关文章

html常用标签学习

1.html常用标签学习:1.1.<em>和<strong>标签主要是用来做强调用的,其中<em>是让文字变成斜体,而<strong>把文字进行加粗显示.1.2.<span>标签是没有语义的,它的作用就是为了设置单独的样式用的.1.3.<q>标签是做文本引用时候用的,需要引用的文本不需要加双引号,浏览器会自动为<q>标签加上引号.<blockquote>标签是对长文本进行引用,引用短文本比如一句话就用<q

html常用的标签

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

python Django教程 之模板渲染、循环、条件判断、常用的标签、过滤器

python3.5 manage.py runserver python Django教程 之模板渲染.循环.条件判断.常用的标签.过滤器 一.Django模板渲染模板 注: 本节代码是基于 Django 1.8,但 Django 1.4 - Djagno 1.9 操作流程也是一样的. 后文给出示例代码可以在 Django 1.4.x 到 Django 1.9.x 上运行. 不过还是强调一点,一点要动手敲代码!不要偷懒哦,动手才能学到真东西. 1. 创建一个 zqxt_tmpl 项目,和一个 名

06-HTML-表格标签学习.html

<html> <head> <title>表格标签学习</title> <meta charset="UTF-8"/> <pre> 表格标签学习: table :声明一个表格 tr:声明一行,设置行高及改行所有单元格的高度. th:声明一个单元格,表头格.默认居中加黑显示 td:声明一个单元格,默认居左显示原始数据 注意: 行高即改行所有单元格的宽度 单元格的宽度即列宽 属性: border:给表格添加边框 wid

html(三) -- 常用功能标签

媒体标签 <embed></embed> 属性:        hidden : 设置隐藏插件是否隐藏.        src :用于指定音乐的路径 超链接标签 <a></a> 属性: href  : 用于指定链接的资源.常用协议:file:. mailTo:. http:      target: 设置打开新资源的目标.属性对应的值:_Blank 在独立的窗口上打开新资源   _self 在当前窗口打开新资源. a标签的原理:    1. a标签的href

struts 常用的标签

## struts 常用的标签 * 1.<include>利用include标签,可以将一个struts.xml配置文件分割成多个配置文件,然后在struts.xml使用<include>标签引入其他配置文件 ex: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE struts PUBLIC     "-//Apache Software Foundation//D

2015年9月16日html第一节课(初识html、常用html标签、相对路径)

一.什么是html html是一种超文本标记语言. 主体架构如下: <html> <head> <title>我的第一个html页面</title> </head> <body> hello world! </body> </html> 注意小点:html默认的编码版本是utf-8.另外一种是gb2312.当有时候我们打开别人的源码发现是乱码的时候,可以看一下编码版本.编码版本不同会造成乱码. 二.常用的标签(

常用HTML标签元素结合及简介

常用HTML标签元素结合及简介 <html></html> 创建一个HTML文档<head></head> 设置文档标题和其它在网页中不显示的信息<title></title> 设置文档的标题        <h1></h1> 最大的标题<pre></pre> 预先格式化文本          <u></u> 下划线<b></b> 黑体字 

第四天学习:html的标签学习2

关键字:html的标签学习2 晨跑计划: 学习任务: 第3章 认识标签(第二部分) 3-1 使用ul,添加新闻信息列表 3-2 使用ol,添加图书销售排行榜 3-3 认识div在排版中的作用 3-4 给div命名,使逻辑更加清晰 3-5 table标签,认识网页上的表格 3-6 用css样式,为表格加入边框 3-7 caption标签,为表格添加标题和摘要 学习记录: 3-1.3-2 列表标签的学习与使用 无序列表 无序列表是一个项目的列表,使用粗体圆圈进行标记 无序列表始于<ul>标签,每个