web前端——常用的标签

html概述

1.1html全称

html全称：Hyper Text Markup Language(超文本标记语言)
对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。

1.2 html语法结构

 <!--定义文档类型-->
<!DOCTYPE html>
<html><head><!--charset设置页面的字符集编码 ，utf-8为中文字符编码--><meta charset="utf-8" /><!--设置页面的标题 --><title></title></head><body><!--页面主体信息--></body>
</html>

1.‘<!DOCTYPE> ’声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令；
2.‘<!DOCTYPE>’ 声明必须是 HTML 文档的第一行，位于 html 标签之前。
3.<!DOCTYPE> 声明没有结束标签；
4.<!DOCTYPE> 声明对大小写不敏感。

html基本标签

2.1 结构标签

<!--定义 HTML 文档 --><html>
<!--定义文档的头部 --><head>
<!--定义文档的标题 -->        <title></title>      </head>
<!--定义文档的主体 -->   <body></body></html>

2.2 容器标签

 <!--块级标签，独占一行--><div></div><!--行级标签，所有内容都在同一行--><span></span>:

2.3 文字标签

    <font></font> 属性： size:设置字体大小color:设置字体颜色face:设置字体  <i>:显示斜体文本效果<b>:呈现粗体文本效果<small>:呈现小号字体效果      <big>:呈现大号字体效果

2.4标题标签

 <h1>这是标题 1</h1><h2>这是标题 2</h2><h3>这是标题 3</h3><h4>这是标题 4</h4><h5>这是标题 5</h5><h6>这是标题 6</h6>

2.5 无序列表

 <ul type="square">无序列表<li>apple</li><li>banana</li><li>orange</li></ul>属性：type :circle(空心圆) ,disc(默认,实心圆),square(黑色方块)注意：如果想去掉列表默认属性（去掉小圆点），可在css中设置list-style: none;

2.6有序列表

<ol type="A">有序列表<li>apple</li><li>orange</li><li>banana</li></ol>属性：type：1、A、a、I、i（数字、字母、罗马数字）

2.7 图片标签

 <img/>单标签   属性: src：图片地址width:宽度height:高度border:边框align:对齐方式alt:图片的文字说明（鼠标放在图片上显示文字）hspace 和 vspace 设定图片边沿上下左右空白，以免文字或其它图片过于贴近

2.7 链接标签

<a>文本或图片</a>
属性： href:跳转页面的地址（支持外网跳转：协议+域名）；            name:名称，锚点(回到锚点: 顶部，底部，中间)锚点示例：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#top{background-color: pink;width: 200px;height: 200px;}.bottom{width: 200px;height: 200px;margin-top: 1000px;}</style></head><body><div id="top"></div><div class="bottom"><a href="#top">点击回到顶部</a></div></body>
</html>

2.8 表格标签
(table,th,tr,td)

<head><style type="text/css">table{border: 1px solid pink;border-collapse: collapse;/* 将重叠的的边框变成一条 */}</style>
</head>
<body>
<!--border:边框的宽度 bordercolor:边框的颜色 cellspacing:单元格的边距 width:宽度 height:高度--><table border="1" width="200" height="200" align="center" cellspacing="0" ><!-- 给表格添加标题 --><caption>个人信息表</caption><tr ><th>姓名</th><th>年龄</th><th>性别</th></tr><tr align="center"><td>张三</td><td>18</td><td>男</td></tr><tr align="center"><td>李四</td><td>24</td><td>女</td></tr></table>
</body>
</html>

2.8.1表格的列合并

colspan 属性

<table border="1"  cellspacing="0" align="center"><tr><td colspan="4" align="center">个人信息表</td></tr><tr><td>学号</td><td>姓名</td><td colspan="2">各科成绩</td></tr><tr><td>01</td><td>李华</td><td>80</td><td>90</td></tr>
</table>

2.8.2 表格的行合并

rowspan属性

<table border="1" cellspacing="0" align="center"><tr><td colspan="4" align="center">学生表</td></tr><tr><td>学号</td><td>姓名</td><td>语文成绩</td><td>数学成绩</td></tr><tr><td rowspan="2">01</td><td rowspan="2">李华</td><td>80</td><td>90</td></tr><tr><td>80</td><td>90</td></tr>
</table>

html表单标签

html表单可以获取用户输入的内容，并提交给后台

3.1 form标签

属性：action：表示动作，值为服务器的地址，把表单的数据提交到该地址上处理method:请求方式：get 和postenctype:表单提交的类型

get提交与post提交

 get:1.会显示在地址栏,请求参数都在地址后拼接 path?name="李华"&password="123456"；2.不安全但是效率较高；3.get请求大小有限制，大约是2KB；使用情况：一般情况用于查询数据。post：1.地址栏：请求参数单独处理；2.安全可靠但是效率低；3.post请求大小理论上无限；使用情况：一般用于插入修改等操作。

3.2 input标签

原型：<input type="" name="" id="" value="" />
type: 1.text 文本框  2.password  密码框   3.radio 表示是单选，实现单选框：name属性必须一致才能实现单选框<div><input type="radio" name="chex"  /><input type="radio" name="chex"  /></div>4.checkbox  表示多选 ，同一组中可以选多个，name必须一致，返回值是个数组5.submit   提交6.reset   重置7.button 普通按钮

3.3select 下拉菜单

<select><option value ="">请选择年份</option><option value ="">1998</option><option value ="">1999</option>
</select>
<select><option value ="">请选择月份</option><option value ="">08</option><option value ="">01</option>
</select>
<select><option value ="">请选择日</option><option value ="">30</option><option value ="">07</option>
</select>

3.4 textarea元素

需要指定输入的区域位置大小

 <textarea rows="10" cols="20" >  表示10行20列的文本空间大小

综合案例：注册页面

<!DOCTYPE html>
<html><head><style type="text/css">tr{height: 35px;}</style><meta charset="utf-8"><title>注册页面</title><link rel="stylesheet" type="text/css" href="css/style.css"/></head><body><table align="center" width="600"><caption ><h4>注册表单</h4></caption><tr><td>性别：</td><td><input type="radio" name="sex" id="" value="" /><img src="img/women.jpg" >男<input type="radio" name="sex" id="" value="" /><img src="img/women.jpg" >女</td></tr><tr><td>生日：</td><td><select><option value ="">请选择年份</option><option value ="">1998</option><option value ="">1999</option></select><select><option value ="">请选择月份</option><option value ="">08</option><option value ="">01</option></select><select><option value ="">请选择日</option><option value ="">30</option><option value ="">07</option></select></td></tr><tr><td>所在地区：</td><td><input type="text" name="" id="" value="" /></td></tr><tr><td>婚姻状况：</td><td><input type="radio" name="marry" id="" value="" />未婚<input type="radio" name="marry" id="" value="" />丧偶<input type="radio" name="marry" id="" value="" />离婚</td></tr><tr><td>学历：</td><td><input type="text" name="" id="" value="大学" /></td></tr><tr><td>月薪：</td><td><input type="text" name="" id="" value="1000-5000" /></td></tr><tr><td>手机号码：</td><td><input type="text" name="" id="" value="" /></td></tr><tr><td>昵称：</td><td><input type="text" name="" id="" value="" /></td></tr><tr><td>喜欢的类型：</td><td><input type="checkbox" name="type1" id="" value="" />可爱<input type="checkbox" name="type1" id="" value="" />甜美<input type="checkbox" name="type1" id="" value="" />温柔<input type="checkbox" name="type1" id="" value="" />高冷</td></tr><tr><td>自我介绍：</td><td><textarea rows="5" cols="30"></textarea></td></tr><tr><td></td><td><input type="image" src="img/btn.png" /></td></tr><tr><td></td><td><input type="radio"  name="agree" checked="checked"/>我已同意服务条款</td></tr><tr><td></td><td><a href="#">我是会员立即登录</a></td></tr><tr><td></td><td><h4>我承诺</h4><ul><li>我真心，我有钱，</li><li>找对象，找十个</li><li>nice！</li></ul></td></tr></table></body>
</html>

4.1常用特殊字符

     &nbsp; 空格   &lt; 小于号  &gt; 大于号&amp; 与字符&quot; 引号

web前端——常用的标签相关推荐

python——前端常用的标签
1.meat标签 meta标签的使用meta标签共有两个属性:http-equiv和name;不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能.name属性 name属性主要用于描述 ...
web前端知识——iframe标签、CSS
一.iframe标签用于在一个网页里面打开另一个网页 <iframe src="https://www.taobao.com" frameborder="0&qu ...
web前端常用网址大全
免费接口API http://zhouxunwang.cn/ es6书籍 https://es6.ruanyifeng.com/ js菜鸟教程 https://www.runoob.com/js/js ...
14款web前端常用的富文本编辑器插件
富文本编辑器是一种可内嵌于浏览器,所见即所得的文本编辑器.它提供类似于Office Word 的编辑功能,方便那些不太懂html用户使用,富文本编辑器的应用非常广泛,它的历史与图文网页诞生的历史几乎一 ...
js统计html页面访问的次数6,JS综合篇--[总结]Web前端常用代码片段整理
IE条件注释条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法. 条件注释只能用于IE5以上,IE1 ...
web前端常用框架总结
web框架目前主流的 JavaScript 框架排名中,jQuery 和 Ext 可算是佼佼者,获得了用户的广泛好评.国内的一些框架很多也是仿照 jQuery 对 JavaScript 进行了包装, ...
web 前端常用组件【06】Upload 控件
因为有万恶的IE存在,所以当Web项目初始化并进入开发阶段时. 如果是项目经理,需要知道客户将会用什么浏览器来访问系统. 明确知道限定浏览器的情况下,你才能从容的让手下的封装必要的前端组件. 本篇文章 ...
web前端常用知识点
1.常见的块级元素内联元素 div -最常用的块级元素 dl - 和dt-dd 搭配使用的块级元素 form - 交互表单 h1 -h6- 大标题 hr - 水平分隔线 ol – 有序列表 p - ...
web前端常用网站收藏
MDN开发者文档:https://developer.mozilla.org/zh-CN/ 菜鸟教程:https://www.runoob.com/ W3CSchool:http://www.w3sc ...
WEB前端常用JavaScript代码整理（二）
对象的判空将json对象转化成json字符串,然后进行判断是否等于字符串'{}',直接写{}无法进行判断 let isObject = {}; console.log(JSON.stringify( ...

web前端——常用的标签

html概述

html基本标签

html表单标签

web前端——常用的标签相关推荐

最新文章

热门文章