【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中所有常用标签基本学习完毕。

猜你喜欢

转载自www.cnblogs.com/gg-boy/p/11517158.html