Web前端教程-HTML及标签的使用
1. HTML简介
HTML由标签和属性构成的
1.1. HTML文档基本结构
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
网页显示内容
</body>
</html>
2. 标签
学习html语言就是学习标签的用法
2.1. 标签语法
长在尖号后面第一个单词就是标签（标记，元素）
- 一组告诉浏览器如何处理一些内容的标签，通过关键字来识别，
<body>, <title>, <meta> - 不同标签代表不同含义，比如段落标签、文本标签、链接标签、图片标签等
- 标签一般分为两种：
- 单标签: 声明（meta）或者插入元素(img)，
- 双标签: 设置一段区域的内容：
<p></p>
1.2. 标签的属性和值
在标签后面的，并通过空格隔开的
- 元素内部可以设置属性和值，这些属性值用来改变元素某些方面的行为
- 属性和属性值用等号连接，属性值用双引号括起来
1.3. 常见的标签
1. 基础标签
| 标签 | 描述 |
|---|---|
<html> |
定义HTML文档 |
<title> |
文档标题 |
<body> |
文档主体 |
<h1-6> |
HTML标题 |
<p> |
段落 |
<br> |
折行 |
<hr> |
水平线 |
<!--...--> |
注释 |
2. 格式标签
| 标签名称 | 说明 |
|---|---|
| a | 超链接元素-->(2) |
| br | 强制换行 |
| wbr | 安全换行(英文状态下使用) |
| b | 加粗 |
| strong | 加粗 |
| i | 倾斜 |
| em | 倾斜 |
| s | 删除线 |
| del | 删除线 |
| u | 下划线 |
| ins | 下划线 |
| small | 小字体 |
| sub | 下标 |
| sup | 上标 |
| code | 代码 |
| abbr | 缩写(本身无实际作用) |
| dfn | 倾斜 |
| q | 加双引号 |
| cite | 倾斜(引用标题) |
| ruby | 包含汉语拼音 |
| bdo | 文字方向(dir = “rtl或者lfr”) |
| mark | 突出显示(黄色背景，黑色的字) |
| time | 显示日期与实践 |
| span | 一般性文本（一般用于CSS） |
| hr | 空标记，水平线 |
|
空格 |
< |
左括号> |
> |
右括号< |
3. 表单标签
- form默认是GET方法提交，直接通过地址信息提交，用于大量文本且不敏感的信息
- form可以通过method改为post， 输入的敏感信息就不会再地址中显示出来，用于少量文本且敏感的信息
| 标签名称 | 说明 |
|---|---|
| form | 定义供用户输入的HTML表单 |
| input | 输入控件 |
| textarea | 多行输入控件 |
| button | 按钮 |
| select | 选择列表 |
| optgroup | 选择列表中相关选项的组合 |
| option | 选择列表中的选项 |
| label | input 元素的标注 |
| fieldset | 定义围绕表单中元素的边框 |
| legend | 定义 fieldset 元素的标题 |
| datalist | 定义下拉列表 |
| keygen | 定义生成密钥 |
| output | 输出的一些类型 |
例子：
<b>1. form元素（用以用户输入数据）:</b> <br>
<!--action：表单提交的页面， method：用get和post提交，enctype：采用编码格式，name：表单名称，target：提交目标，
autocomplete浏览器记住用户数据，novalidate验证性,form让表单为的元素和指定的表单挂钩提交--->
<form name="form01" autocomplete="on" action="http://www.haosou.com" id="register">
<!--fieldset对表单进行分组, name+form+disabled-->
<fieldset>
<!--legend为分组添加标签-->
<legend>注册分组</legend>
<!--label可用于CSS-->
<label>
<!--input属性:autofocus:光标选中，disabled不可输入，autocomplete记住用户，type，name用提交数据的，value的默认值--->
用户名： <input name="User" value="666"> <br>
</label>
<label>
<!--外部表单控件可以连接form-->
电子邮件： <input name="email" form = "register">
</label>
<!--button属性: type：submit提交/reset重置/button按钮， formaction, formenctype, formmethod, formtarget, formvalidate-->
<button>提交</button>
</fieldset>
</form> <br>
<b>2. Input的type属性：</b> <br>
<form>
<!--text的属性: maxlength,size, name, value, readonly, disabled, list提供建议值,required必须输入才能提交, palceholder输入字符的提示 -->
文本：<input type="text" list="abc" required> <br>
<!--password的属性：与text基本一致-->
密码：<input type="password" placeholder="输入密码吧"> <br>
搜索: <input type="search"> <br>
<!--max,min,step,-->
数字: <input type="number"> <br>
范围: <input type="range"> <br>
日期: <input type="date"> <input type="month"> <input type="time"> <input type="week"> <input type="datetime"> <input type="datetime-local"> <br>
颜色: <input type="color"> <br>
复选框: 音乐<input type="checkbox" name="music" value="1"> 体育<input type="checkbox" name="sport" value="2"> <br>
单选框: <input type="radio" name="sex" value="1" checked>男 <input type="radio" name="sex" value="2">女 <br>
提交: <input type = "submit"> <br>
重置: <input type="reset"> <br>
按钮: <input type="button"><br>
图片按钮: <input type = "img" src="img/dog.jpg"> <br>
email: <input type="email"> <br>
telephone: <input type="tel"><br>
URL: <input type="url"><br>
隐藏:<input type="hidden" value="1"><br>
上传文件:<input type="file" accept="image/gif"><br>
<button>提交</button>
</form>
<datalist id="abc">
<option value="1">苹果</option>
<option value="2">橘子</option>
</datalist> <br>
<b>3. 下拉列表框：</b> <br>
<form action="http://www.haosou.com">
<!--auto,disabled,form size（下拉高度）,multiple（多选）,autofocus, required-->
<select name="fruit">
<!--选项分组-->
<optgroup label="水果">
<option value="1">苹果</option>
<option value="2" selected>橙子</option>
<option value="3">香蕉</option>
</optgroup>
<optgroup label="粗粮">
<option value="4">大米</option>
<option value="5">稻谷</option>
<option value="6">玉米</option>
</optgroup>
</select>
<button>提交</button>
</form> <br>
<b>4.多行文本框：</b> <br>
<form action="http://www.haosou.com">
<!--name,form,readonly,disabled,maxlength,autpfocus,placeholder,rows,cols,wrap,requried-->
<textarea name="content" cols="30" rows="10">
请留下你的建议
</textarea>
<button>提交</button>
</form> <br>
4. 框架标签
| 标签名称 | 说明 |
|---|---|
| frame | 定义框架集的窗口或框架 |
| frameset | 定义框架集 |
| noframes | 定义针对不支持框架的用户的替代内容 |
| iframe | 定义内联框架 |
5.图形标签
| 标签名称 | 说明 |
|---|---|
| img | 定义图像 |
| map | 定义图像映射 |
| area | 定义图像地图内部的区域 |
| canvas | 定义图形 |
| figcaption | 定义 figure 元素的标题 |
| figure | 定义媒介内容的分组，以及它们的标题 |
在页面中插入另外一个frame： <br>
<a href="http://www.baidu.com" target="in">百度</a> | <a href="http://www.haosou.com" target="in">好搜</a>
<br>
<iframe src="http://www.bilibili.com" frameborder="1" width="800", height="600" name="in"></iframe> <br>
6. 音频视频标签
| 标签名称 | 说明 |
|---|---|
| audio | 声音内容 |
| source | 媒介源 |
| track | 定义用在媒体播放器中的文本轨道 |
| video | 定义视频 |
例子：
<h1>9.音频和视频</h1>
<!--autoplay自动播放，loop反复播放，muted静音, poster是视频开头的图片，preload加载网络video使用，none什么都不加载，metadata下第一帧，auto尽快下载-->
<video src="pink.mp4" width="640" height="480" controls poster="img/dog.jpg"></video> <br> <br>
音频和视频几乎一样（除了没有宽高）: <br>
<audio src="xusong.mp3" controls></audio> <br>
7. 链接标签
| 标签名称 | 说明 |
|---|---|
<a href="val"> |
外部跳转用url，内部跳转用锚点# |
超链接的属性
| 属性 | 说明 |
|---|---|
| href | 指定a所指向的资源URL |
| hreflong | 指向的链接资源所用的语言 |
| meida | 说明所链接资源用于哪种设备 |
| rel | 说明文档与所链接资源的关系类型 |
| target | 指定用以打开锁链接自愿的浏览环境 |
| type | 说明所链接资源的MIME类型 |
8. 列表标签
| 标签名称 | 说明 |
|---|---|
| p | 段落 |
| div | 通用分组(用途较少) |
| blockquote | 引用大段内容 |
| pre | 展示格式化的内容 |
| hr | 添加分割水平线 |
| ul-li | 无序列表 |
| ol-li | 有序列表 |
| dl-dt-dd | 生成说明列表,用于图片注释 |
| figure-figcaption | 图片及图片标题 |
例子如下：
无序列表:<br>
<ul>
<li><a href="https://www.google.com.hk/">张三</a></li>
<li>李四</li>
<li>王五</li>
</ul> <br>
有序列表：<br>
<ol type = 'a' start="2">
<li>张三</li>
<li value="8">李四</li>
<li>王五</li>
</ol> <br>
9. 表格标签
| 标签名称 | 说明 |
|---|---|
| table | 表格 |
| thead | 标题行 |
| tbody | 表格主体 |
| tfoot | 表脚 |
| tr | 一行单元格 |
| th | 标题行单元格 |
| td | 单元格 |
| col | 一列 |
| colgroup | 一组列 |
| caption | 表格标题 |
表格的属性有如下的：
| 表格属性 | 说明 |
|---|---|
| border | 表格的边框 |
| cellpadding | 单元格内容和边框距离 |
| cellspacing | 单元格之间的距离 |
| align | 水平对齐方式 |
| valign | 垂直对齐方式 |
| colspan | 单元格水平合并 |
| rowspan | 单元格垂直合并 |
例子如下：
<!--cellpadding: 内容和边框的距离-->
<!--cellspacingg: 格子之间的距离-->
<table border="1" width="500" height = "300" cellpadding="10" cellspacing = "10">
<!--表的标题-->
<caption>这是标题</caption>
<!--设置某一列为红色-->
<colgroup>
<!--第一列不设置-->
<col>
<!--第二列为红色-->
<col style = "background: red;" span = "1">
</colgroup>
<!--tr表示一行-->
<tr>
<!--th表示表头-->
<!--valign表示垂直对齐-->
<th valign="top">序号</th>
<th>产品名称</th>
<th>产品价格</th>
<th>产品数量</th>
<th>统计</th>
</tr>
<tr>
<!--colspan表示水平合并-->
<td colspan="5">水平合并</td>
</tr>
<tr>
<!--td表示一格-->
<!--align表示水平对齐-->
<td align="center">1</td>
<td align="center">苹果</td>
<td>￥5.00</td>
<td>1000</td>
<!--rowspan表示垂直合并-->
<td rowspan="3"></td>
</tr>
<tr>
<td>2</td>
<td>橘子</td>
<td>￥6.00</td>
<td>2000</td>
</tr>
<tr>
<td>3</td>
<td>葡萄</td>
<td>￥16.00</td>
<td>2300</td>
</tr>
</table> <br>
10. 样式/节 标签
| 标签名称 | 说明 |
|---|---|
| style | 文档的样式信息 |
| div | 文档的节 |
| span | 文档的节 |
| header | section或者page的页眉 |
| footer | section或者page的页脚 |
| section | 定义section |
| article | 定义文章 |
| aside | 定义页面内容之外的内容 |
| details | 定义元素的细节 |
| dialog | 定义对话框或窗口 |
Web前端教程-HTML及标签的使用的更多相关文章
- Python web前端 01 HTML常用标签
Python web前端 01 HTML常用标签 一.HTML创建项目 file ---->new project -----> 输入项目名------>创建文件夹 new dicr ...
- web前端教程《每日一题》（1-99）完结
第1期(2016年4月6日): (1)js中关闭当前窗口的方法是:window.close(); 第2期(2016年4月7日): (1)js中使字符串中的字符变为小写的方法是:toLowerCase方 ...
- web前端教程：CSS 布局十八般武艺都在这里了
CSS布局 布局是CSS中一个重要部分,本文总结了CSS布局中的常用技巧,包括常用的水平居中.垂直居中方法,以及单列布局.多列布局的多种实现方式(包括传统的盒模型布局和比较新的flex布局实现), ...
- web前端教程：用 CSS 实现三角形与平行四边形
最近在逛某个技术网站的时候,感觉文章关键词上的样式好酷炫啊,分页的样式.来张截图: 你在首页的底部也可以看到这样一个分页栏:是不是看上去还不错?下面就来看看这是如何实现的吧~ 第一种方法:利用bord ...
- Web前端教程3-JavaScript教程
目录 1. JavaScript介绍 1.1. JS嵌入页面的方式 2. JS基本语法 2.1. 变量类型 2.2. 获取元素方法 2.3. 操作元素属性 2.4. innerHTML的使用 3. J ...
- Web前端教程4-JQuery教程
目录 1. JQuery基础 1.1. 基本语法 1.2. JQ和JS的差异 1.3. JQ入口函数的写法 1.4. JQ核心函数 1.5. JQ对象 2. JQ静态和实例方法 2.1. JQ静态方法 ...
- web前端（6）—— 标签的属性，分类，嵌套
属性 HTML标签可以设置属性,属性一般以键值对的方式写在开始标签中 1.HTML标签除一些特定属性外可以设置自定义属性,一个标签可以设置多个属性用空格分隔,多个属性不区分先后顺序. 2.属性值要用引 ...
- web前端中实现多标签页切换的效果
在这里,实现多标签页效果的方法有两个,一个是基于DOM的,另一个是基于jquery的,此次我写的是一个对于一个电话套餐的不同,显示不同的标签页 方法一: 首先,我们要把页面的大体框架和样式写出来,ht ...
- Web前端教程2-CSS教程
目录 1. CSS基本语法 1.1. CSS基本定义 1.2. CSS布局属性 1.3. CSS文本常用属性 2.CSS选择器 2.1. 标签选择器 2.2. id选择器 2.3. 类选择器 2.4. ...
随机推荐
- DataPipeline | PayPal庞姬桦：大数据在小微企业贷款上的运用
庞姬桦女士毕业于北京大学和美国哥伦比亚大学,目前担任PayPal公司消费者风险管理总监,负责通过大数据实现对互联网金融风险的侦测.跟踪.管控和防范.在加入PayPal之前,曾任职于渣打银行(中国)和美 ...
- C语言实现循环队列
今日在处理数据存储的问题中,数据占用的空间较大,在询问之下,提及循环队列. 没有学习过的我,想想就是头大,只能慢慢从网上找资料,一个字母一个字母的敲,最后,还是慢慢的对队列有了一些理解 对于循环队列有 ...
- 基于HTTP协议的几种实时数据获取技术
原文链接https://www.cnblogs.com/xrq730/p/9280404.html,作者博客园----五月的仓颉,转载请注明出处,谢谢 HTTP协议 HTTP协议大家都很熟悉了,开始本 ...
- Visual Studio高效实用的扩展工具、插件
说明: 对一个有想法的程序员来说,善于使用一款高效的开发工具是很重要的,今天给大家介绍的是宇宙第一IDE vs用起来很不错的开发工具,假如大家觉得不错也可以尝试的用用,毕竟对于我们这些一天一大半的时间 ...
- jquery.data()&jquery.extend()
JQuery.data()方法 Jquery提供的在节点存取数据的方法. var $el = $('#app'); //使用键值对的方式存数据 $el.data('name', 'jinx'); $e ...
- Java笔试题库之选题题篇【1-70题】
1.下面中哪两个可以在A的子类中使用:( ) class A { protected int method1 (int a, int b) { return 0; } } A. public int ...
- Spring 数据库读写分离
读写分离常见有俩种方式 1 第一种方式比较常用就是定义2个数据库连接,一个是Master,另一个是Slave.更新数据时我们取Master,查询数据时取Slave.太过简单不做介绍. 2 第二种方数据 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十一║Vue实战：开发环境搭建【详细版】
缘起 哈喽大家好,兜兜转转终于来到了Vue实战环节,前边的 6 篇关于Vue基础文章我刚刚简单看了看,感觉写的还是不行呀,不是很系统,所以大家可能看上去比较累,还是得抽时间去润润色,修改修改语句和样式 ...
- Android上的Badge，快速实现给应用添加角标
应用角标是iOS的一个特色,原生Android并不支持.或许是因为当时iOS的通知栏比较鸡肋(当然现在已经改进了很多),而Android的通知栏功能强大?所以才出现了一方依赖于数字角标,一方坚持强大的 ...
- HandlerInterceptor里@Autowired对象为空的解决方法
That's because Spring isn't managing your PagePopulationInterceptor instance. You are creating it yo ...