前端开发~H5 ·学习笔记 ·001——【HTML介绍、常用HTML标签】
文章目录
- 一、HTML介绍
- 1、介绍
- 2、HTML标签
- (1).介绍
- (2).嵌套
- (3).属性
- 3、HTML文档结构
- (1).完整结构
- (2).<!DOCTYPE html>标签
- (3).<html>标签
- (4).<head>标签
- (5).<body>标签
- 4、HTML注释
- 5、HTML标签分类
- 二、常用HTML标签整理
- 1、总体整理
- (1).文本标签
- (2).表单标签
- 2、整体示例
- (1).文本标签
- (2).表单标签
一、HTML介绍
1、介绍
HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
2、HTML标签
(1).介绍
形如下面这样的就是HTML标签。
<div>XXX</div>
由一个开始标签开始，以对应的结束标签结束。
当然也有些标签只有开始标签，比如<br>、<img>、input等。
(2).嵌套
HTML标签可以进行嵌套，如下面这样：
<div><span>Look!</span>
</div>
(3).属性
标签可以没有属性、或者拥有若干个属性。
这些属性
- 以键值对的形式呈现出来，形如
key="value" - 写在开始标签内，以空格分隔
<div class="nav" id="user">
3、HTML文档结构
(1).完整结构
一个完整的HTML文档，一般结构如下：
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title>
</head>
<body></body>
</html>
Tips：很多IDE，可以用过输入英文感叹号按下回车，生成上述结构
(2).<!DOCTYPE html>标签
告知浏览器该页面文件的文档类型，指示web浏览器使用哪个HTML版本编写页面。
Tips：必须放在文件第一行。
(3).<html>标签
告知浏览器自身是一个HTML文档，限定文档的开始点和结束点
(4).<head>标签
定义文档的头部，通常在这里引用样式表，其中的<title>标签存放文档的标题。
(5).<body>标签
定义文档的主题内容。
4、HTML注释
用下面这样的标签来进行注释
<!-- 这是注释 --><!-- 多行注释多行注释多行注释 -->
5、HTML标签分类
简单的划分，一般可以分为块状标签和内联标签。
两者的最大区别在于，块级标签会为自己的内容占据新的一行，内联标签不会。
二、常用HTML标签整理
1、总体整理
(1).文本标签
| 标签 | 功能 | 属性 | 块状/内联 | 是否有闭合标签 |
|---|---|---|---|---|
<h1>至<h6>
|
标题（h1最大，h6最小）
|
块状 | 有 | |
<p>
|
段落 | 块状 | 有 | |
<span>
|
普通文本 | 内联 | 有 | |
<strong>
|
加粗强调 | 内联 | 有 | |
<img>
|
图片 |
src
|
内联 | 无 |
<a>
|
超链接 |
href、title、target、
|
内联 | 有 |
<ul>
|
无序列表 | 块状 | 有 | |
<ol>
|
有序列表 | 块状 | 有 | |
<li>
|
列表元素 | 块状 | 有 | |
<label>
|
标签 |
for
|
内联 | 有 |
(2).表单标签
| 标签 | 功能 | 属性 | 块状/内联 | 是否有闭合标签 |
|---|---|---|---|---|
<form>
|
表单 |
action、method
|
块状 | 有 |
<input>
|
单行文本输入框 |
type、placeholder、name、value、readonly、disabled
|
内联 | 无 |
<textarea>
|
多行文本输入框 |
placeholder、name、cols、rows
|
内联 | 有 |
<select>
|
选项菜单 |
name、multiple
|
内联 | 有 |
<option>
|
选项 |
value
|
块状 | 有 |
<button>
|
按钮 |
type
|
内联 | 有 |
2、整体示例
(1).文本标签
Html文档
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title>
</head>
<body><h1>一级标题</h1><p>一段文字，这段文字描述了ABCDEFGHIJKLMN一段文字，这段文字描述了ABCDEFGHIJKLMN一段文字，这段文字描述了ABCDEFGHIJKLMN一段文字，这段文字描述了ABCDEFGHIJKLMN一段文字，这段文字描述了ABCDEFGHIJKLMN一段文字，这段文字描述了ABCDEFGHIJKLMN一段文字，这段文字描述了ABCDEFGHIJKLMN<span>突如其来的span标签内容</span><strong>突如其来的strong标签内容</strong></p><img src="https://csdnimg.cn/cdn/content-toolbar/csdn-logo_.png?v=20190924.1" alt=""><a href="https://www.csdn.net/" target="_blank">新窗口打开CSDN首页</a><ul><li>无序列表元素</li><li>无序列表元素</li><li>无序列表元素</li><li>无序列表元素</li></ul><ol><li>有序列表元素</li><li>有序列表元素</li><li>有序列表元素</li><li>有序列表元素</li></ol><labe>label元素一般用在表单里，用for属性给表单元素绑定id哦</labe></body>
</html>
效果图示
(2).表单标签
Html文档
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title>
</head>
<body><form><input type="text" name="nickname1" /><br><input type="text" placeholder="昵称" name="nickname2" /><br><input type="text" placeholder="昵称" name="nickname3" value="小明" /><br><input type="text" placeholder="昵称" name="nickname4" value="小明(不可修改)" readonly /><br><input type="text" placeholder="昵称" name="nickname4" value="小明(不可修改)" disabled /><br><input type="password" placeholder="密码" name="psw" /><br><textarea rows="5" cols="40" placeholder="输入你想输入的一段话"></textarea><br><select><option value ="v1">v1</option><option value ="v2">v2</option><option value ="v3">v3</option></select><br><select multiple><option value="s1">s1</option><option value="s2">s2</option><option value="s3">s3</option></select><br><button type="button">样式按钮</button><button type="submit">提交按钮</button></form>
</body>
</html>
效果图示
前端开发~H5 ·学习笔记 ·001——【HTML介绍、常用HTML标签】相关推荐
- Web前端html5+css3前端开发入门学习笔记
文章目录 前言 HTML 认识HTML 1. 网页组成和本质 2.了解浏览器 3.web标准 4.HTML感知 5.HTML骨架 6.编译软件vscode的简介和使用 7.注释 8.标签组成和关系 9 ...
- 《Webservice的应用与开发》学习笔记 ·001【Web服务、XML文档】
注:前言.目录见 https://blog.csdn.net/qq_44220418/article/details/108428971 文章目录 一.Web服务 1.特点 2.定义 二.XML文档 ...
- Hibernate视频学习笔记（3）常用映射标签及属性
JTA实现两阶段提交,全局事务,对多个数据库起作用 JDBC是本地事务,只对单一数据库起作用 Hibernate基本映射 实体类 –〉表 实体类中的普通属性 –〉表字段 采用<class> ...
- “物联网开发实战”学习笔记-（四）智能音箱制作和语音控制
"物联网开发实战"学习笔记-(四)智能音箱制作和语音控制 这次来造一个属于自己的智能音箱,这里详细介绍了智能音箱的语音控制的实现. 智能音箱的技术架构 智能音箱主要涉及拾音.前端信 ...
- 微信小程序-常用API开发技巧学习笔记
常用API开发技巧学习笔记 第一章 认识微信小程序 前后端分离的开发方式 小程序的特点 小程序对开发者的影响 学习小程序需要的基础 第二章 小程序环境搭建与开发工具介绍 小程序开发环境 没有小程序号对 ...
- Hadoop学习笔记一 简要介绍
Hadoop学习笔记一 简要介绍 这里先大致介绍一下Hadoop. 本文大部分内容都是从官网Hadoop上来的.其中有一篇介绍HDFS的pdf文档,里面对Hadoop介绍的比较全面了.我的这一 ...
- 好程序员web前端分享Nodejs学习笔记之Stream模块
好程序员web前端分享Nodejs学习笔记之Stream模块 一,开篇分析 流是一个抽象接口,被 Node 中的很多对象所实现.比如对一个 HTTP 服务器的请求是一个流,stdout 也是一个流.流 ...
- ASP.Net MVC开发基础学习笔记（5）：区域、模板页与WebAPI初步
http://blog.jobbole.com/85008/ ASP.Net MVC开发基础学习笔记(5):区域.模板页与WebAPI初步 2015/03/17 · IT技术 · .Net, Asp. ...
- web前端开发怎么样学习？看这份web前端学习路线
前端开发是创建Web页面或app等前端界面呈现给用户的过程.前端开发通过HTML,CSS及JavaScript以及衍生出来的各种技术.框架.解决方案,来实现互联网产品的用户界面交互.它从网页制作演变而 ...
最新文章
- 北大BBS2008年毕业生晒工资
- Careercup - Google面试题 - 5424071030341632
- 云原生视频时代已开启，华为云准备好了
- [深度学习] 自然语言处理---Transformer 位置编码介绍
- php字符串学习笔记
- CSS中属性的值和单位
- linux c 编程手册,Linux C/C++编程手册查阅方法
- Java求两个数的最大公约数
- 用es5实现es6的promise，彻底搞懂promise的原理
- 【数据结构的魅力】003.算法归并与随机快排
- laravel5.2 增加Caffienate Modules,实现模块化开发
- ftp 服务器文件夹创建命令,ftp 服务器文件夹创建命令
- cmd命令查询电脑序列号_如何在Windows10中查找计算机序列号/主板型号
- packet协议源码解析
- 事务的四大特性(ACID)
- 两个二层交换机，两个PC配置固定地址，查看MAC地址实验
- 汽车诊断协议，（K线/CAN总线、kwp2000、ISO14230、ISO1575...）
- 雅礼集训 Day1 T1 养花
- 【预训练视觉-语言模型文献阅读】VL-BERT: PRE-TRAINING OF GENERIC VISUAL- LINGUISTIC REPRESENTATIONS（ICLR 2020）
- c语言添加输入函数吗,C语言scanf()函数下支持中文输入吗？