学习笔记—HTML基础标签
HTML的概念
概念：
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
作用：
在浏览器中数据需要使用友好的格式展现给用户。
告诉浏览器接收到的数据使用什么样的数据组织形式进行显示。
使用：
HTML的标准文档规范
HTML的标签
互联网的三大基石
URL：统一资源定位符（唯一的定位一个网络资源）
HTTP：超文本传输协议（规范了浏览器和服务器之间数据交互格式）
HTML：超文本标记语言（有效的组织数据在浏览器端的显示）
HTML的文档声明
文件名.html 或 文件名.htm
HTML的标准文档结构
<html>
<head>
<!--
主要是配置 浏览器显示数据的配置信息
例如：字符编码等
一般是给浏览器进行使用
-->
</head>
<body>
<!--给用户进行数据展示-->
</body>
</html>
标签学习
head标签
<head>
<title></title>
<meta />
<link />
</head>
网页标题标签：
<title>Title</title>
编码格式标签：
<meta http-equiv="content-type" content="text/html;charset=utf-8">
网页搜索优化标签：
<!--网页关键字-->
<meta name="keywords" content="关键字" />
<!--网页描述-->
<meta name="description" content="网页描述" />
<!--作者-->
<meta name="author" content="殇央" />
网页指定跳转标签：
<meta http-equiv="refresh" content="3;url=https://i.cnblogs.com/shangyang" />
文本标签
标题标签h1...h6:
块级标签，自动换行。标题标签会将其中的文本加粗加黑显示，并从1到6依次减弱。
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
段落标签 p：
块级标签，自动换行。表示文本的段落，段落通常在可视媒体中表示为文本块。段间距较大。
<p>这是一个段落。</p>
换行标签 br：
换行符。换行间距较小。
<br />
水平线标签 hr：
块级标签。表示段落级元素之间的主题划分，会在浏览器中添加一条横线。
<hr />
空格符  ：
空格符，告诉刘浏览器在此出输出一个空格。可在标签内使用。
 ；
列表标签
列表项目标签 li：
<li> 标签定义列表项目。
<li>列表项</li>
无序列表 ul：
表示HTML页面中项目的无序列表，一般会以项目符号（黑色实心圆）列表呈现。
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
有序列表 ol：
在 HTML 中表示有序列表，是 ordered lists 的缩写。reversed属性可以指定列表倒序。
<ol>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ol> <ol reversed>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ol>
自定义列表 dl dt dd：
<dl> 标签代表一个描述列表。<dt> 标签只能够作为 <dl> 标签的一个子元素出现，常常后跟一个 <dd> 标签。
<dt> 标签定义一个描述列表的项目/名字。<dd> 标签被用来对一个描述列表中的项目/名字进行描述。
<dl>
<dt>编程语言</dt>
<dd>Java</dd>
<dd>C++</dd>
<dt>数据库</dt>
<dd>mysql</dd>
<dd>orcale</dd>
</dl>
图片标签
图片标签 img：
行内元素，不自动换行。用于展示 HTML 页面中的图像。<img> 标签有两个必需的属性：src 和 alt。
注释：从技术上讲，图像并不会插入 HTML 页面中，而是链接到 HTML 页面上。<img> 标签的作用是为被引用的图像创建占位符。
<img src="http://images.cnblogs.com/cnblogs_com/shangyang/1431105/o_background.jpg" alt="background" width="42" height="42" />
<!--
src:规定显示图像的 URL。
alt:规定图像的替代文本。
width:规定图像的宽度。
height:规定图像的高度。
宽度或高度如果只设置一个会等比例缩小或放大。
-->
超链接标签
超链接标签 a：
<a> 标签用于定义超链接，作用是从一个页面链接到另一个页面。
<a> 标签最重要的属性是 href 属性，用于创建指向另外一个文档的链接（或超链接）。
<a href="https://www.cnblogs.com/shangyang/" target="framename">欢迎来到殇央的博客</a>
<!--
target:规定在何处打开目标 URL。
值： _blank 在新窗口中打开被链接文档。
_self 默认。在相同的框架中打开被链接文档。
_parent 在父框架集中打开被链接文档。
_top 在整个窗口中打开被链接文档。
framename 在指定的框架中打开被链接文档。
-->
表格标签
一个 HTML 表格包括 <table> 元素，一个或多个 <tr>、<th> 以及 <td> 元素。
<tr> 元素定义表格行，<th> 元素定义表头，该标签中的内容会以粗体显示。<td> 元素定义表格单元。
<table border="1">
<tr>
<th>语文</th>
<th>数学</th>
</tr>
<tr>
<td>123</td>
<td>145</td>
</tr>
</table>
<!--
table属性：
border:规定表格单元边框的像素。
th属性：
colspan：规定表头单元格可横跨的列数。
rowspan：规定表头单元格可横跨的行数。
-->
内嵌标签
内嵌标签 iframe：
会创建包含另外一个文档的内联框架，有效地将另一个 HTML 页面嵌入到当前页中。
iframe标签可以在当前网页加载其他网页的资源。src属性规定在 <iframe> 中显示的文档的 URL。
<iframe src="https://www.baidu.com/" width="600" height="600" scrolling="yes">
<p>您的浏览器不支持iframe 标签。</p>
</iframe>
<!--
height:规定 <iframe> 的高度。
width：规定 <iframe> 的宽度。
scrolling：规定是否在 <iframe> 中显示滚动条。
值：
auto：在需要的情况下出现滚动条（默认值）。
yes ：始终显示滚动条（即使不需要）。
no ：从不显示滚动条（即使需要）。
-->
表单域标签
表单标签
表单标签 form：
<form> 标签用于创建供用户输入的 HTML 表单。使用 <form> 标签可以向服务器传输数据。
当点击提交数据时，form标签会将用户输入的数据按照method指明的提交方式提交给action属性所指明的提交地址。
<form name="login" action="/login" method="post">
<input type="submit" value="登录"/>
</form>
<!--
属性：
name:规定表单的名称。
action：规定当提交表单时向何处发送表单数据。
method:规定用于发送表单数据的 HTTP 方法。
enctype:属性规定在将表单数据发送到服务器之前如何对其进行编码。
值：
application/x-www-form-urlencoded：默认。在发送前对所有字符进行编码（将空格转换为 "+" 符号，特殊字符转换为 ASCII HEX 值）。
multipart/form-data：不对字符编码。当使用有文件上传控件的表单时，该值是必需的。
text/plain：将空格转换为 "+" 符号，但不编码特殊字符。
-->
input标签
行内元素，不自动换行。<input> 标签用于创建交互式控件，这类控件是基于 web 表单的，它可以接收用户的数据、信息。
<input> 标签规定了用户可以在其中输入数据的输入字段。
type 属性规定要显示的 <input> 元素的类型。name 属性规定 <input> 元素的名称。value属性指定 <input> 元素 value 的值。
提交的数据以name-value键值对的形式提交。
<form name="login" action="/login" method="post">
用户名：<input type="text" name="username" /><br /> 密码：<input type="password" name="pwd"><br /> E-mail: <input type="email" name="usremail"><br /> <!--name 值相同的单选框只能选择一个值 -->
性别：<input type="radio" name="gender" value="女">女
<input type="radio" name="gender" value="男">男 <br /> 选择一个文件: <input type="file" name="img"><br /> <input type="checkbox" name="vehicle[]" value="Bike">我有一辆自行车<br>
<input type="checkbox" name="vehicle[]" value="Car">我有一辆小轿车<br>
<input type="checkbox" name="vehicle[]" value="Boat">我有一艘船<br> 选择你喜欢的颜色: <input type="color" name="favcolor"><br /> 生日: <input type="date" name="bday"><br />
<input type="submit" value="登录"/>
<input type="reset" value="重新输入" />
</form>
<!--
type属性:
text:默认。定义一个单行的文本字段（默认宽度为 20 个字符）。
password:定义密码字段（字段中的字符会被遮蔽）
email:定义用于 e-mail 地址的字段。
radio:定义单选按钮。
file:定义文件选择字段和 "浏览..." 按钮，供文件上传。
button:定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本）。
checkbox:定义复选框。
color:定义拾色器。
date:定义 date 控件（包括年、月、日，不包括时间）。
datetime:定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，基于 UTC 时区）。
datetime-local:定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，不带时区）。
hidden:定义隐藏输入字段。
image:定义图像作为提交按钮。
month:定义 month 和 year 控件（不带时区）。
number:定义用于输入数字的字段。
range:定义用于精确值不重要的输入数字的控件（比如 slider 控件）。
search:定义用于输入搜索字符串的文本字段。
tel:定义用于输入电话号码的字段。
time:定义用于输入时间的控件（不带时区）。
url:定义用于输入 URL 的字段。
week:定义 week 和 year 控件（不带时区）。
reset:定义重置按钮（重置所有的表单值为默认值）。
submit:定义提交按钮。
-->
文本标签
<textarea> 标签表示多行纯文本编辑控件，用户可在其文本区域中写入文本。
文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性。
<textarea name="text" cols="40" rows="40" wrap="hard"> 文本框 </textarea>
<!--
属性：
cols：规定文本区域内可见的列数。
rows：规定文本区域内可见的行数。
wrap：规定在表单提交时文本区域中的文本是如何换行的。
值：
soft：在表单提交时，textarea 中的文本不换行。默认。
hard：在表单提交时，textarea 中的文本换行（包含换行符）。当使用 "hard" 时，必须指定 cols 属性。
-->
下拉列表
<select> 元素用来创建下拉列表。
<select> 元素中的 <option> 标签定义了列表中的可用选项。
<select name="语言">
<option value="Java">Java</option>
<option value="C++">C++</option>
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
</select>
<!--
disabled属性：当该属性为 true 时，会禁用下拉列表。
-->
<optgroup> 标签用于对 <select> 元素所提供的选项进行分组。当您使用一个较长的选项列表时，对相关的选项进行组合会使处理更加容易。
<select>
<optgroup label="前端">
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
</optgroup>
<optgroup label="后台">
<option value="Java">Java</option>
<option value="C++">C++</option>
</optgroup>
</select>
<!--
label属性：为选项组规定描述。
-->
学习笔记—HTML基础标签的更多相关文章
- HTML5学习笔记之表格标签
HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...
- HTML+CSS学习笔记(4) - 认识标签（3）
HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...
- HTML+CSS学习笔记(2) - 认识标签（1）
HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...
- MyBatis:学习笔记(1)——基础知识
MyBatis:学习笔记(1)--基础知识 引入MyBatis JDBC编程的问题及解决设想 ☐ 数据库连接使用时创建,不使用时就释放,频繁开启和关闭,造成数据库资源浪费,影响数据库性能. ☐ 使用数 ...
- bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111
基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...
- Django学习笔记（基础篇）
Django学习笔记(基础篇):http://www.cnblogs.com/wupeiqi/articles/5237704.html
- C#学习笔记（基础知识回顾）之值类型与引用类型转换（装箱和拆箱）
一:值类型和引用类型的含义参考前一篇文章 C#学习笔记(基础知识回顾)之值类型和引用类型 1.1,C#数据类型分为在栈上分配内存的值类型和在托管堆上分配内存的引用类型.如果int只不过是栈上的一个4字 ...
- C#学习笔记（基础知识回顾）之值传递和引用传递
一:要了解值传递和引用传递,先要知道这两种类型含义,可以参考上一篇 C#学习笔记(基础知识回顾)之值类型和引用类型 二:给方法传递参数分为值传递和引用传递. 2.1在变量通过引用传递给方法时,被调用的 ...
- C#学习笔记（基础知识回顾）之值类型和引用类型
一:C#把数据类型分为值类型和引用类型 1.1:从概念上来看,其区别是值类型直接存储值,而引用类型存储对值的引用. 1.2:这两种类型在内存的不同地方,值类型存储在堆栈中,而引用类型存储在托管对上.存 ...
随机推荐
- C# 使用 SmtpClient.SendAsync 方法发送邮件失败，总是返回 Cancelled
问题: 调用 SmtpClient.SendAsync,在 SendCompleted 的回调函数里面总是获取到 e.Cancelled 为 true. 后来测试了一下,相同的代码,只是把 SmtpC ...
- ztre的使用入门
1.首先需要下载ztree插件, 2.把下载的插件中的js和css放到项目中去(img文件默认放到css文件下方,如果把img文件放到其他地方,加载出来的树将没有默认图标(文件夹图标)和节点前的展开闭 ...
- Java 标准 I/O 介绍
一.Java标准I/O知识体系图: 二.I/O是什么 I/O 是Input/Output(输入.输出)的简称,输入流可以理解为向内存输入,输出流是从内存输出. 三.Java I/O 用途与对应的流一览 ...
- echarts--迁徙图特性简介
$(function() { loadMapData(); //页面加载时调用封装加载echarts地图的函数});function loadMapData (cityName) { if ...
- Activity的运行过程
今天看到了这个关于Activity的过程这个方面的知识,之前我其实也是做过安卓项目的,也是有安卓开发的一定经验的,但是我发现之前似乎是知其然,而不知其所以然,之前来说只知道activity里的onCr ...
- spring-boot-oracle spring-batch
Install/Configure Oracle express Oracle xe installer for linux (I don't care if you're running linux ...
- FPGA学习笔记（二）——FPGA学习路线及开发流程
###### [该随笔部分内容转载自小梅哥] ######### 一.FPGA学习路线 工具使用 -> 语法学习 -> 逻辑设计 -> IP使用 ->接口设计 -& ...
- javascript系列1--把字符串当代码来执行
转发请标明来源:http://www.cnblogs.com/johnhou/p/javascript.html 请尊重笔者的劳动成果 --John Hou 在javascript中有多种方法可以 ...
- Ubuntu 16.04下安装64位谷歌Chrome浏览器
1.进入 Ubuntu 16.04 桌面,按下 Ctrl + Alt + t 键盘组合键,启动终端. 也可以按下 Win 键(或叫 Super 键),在 Dash 的搜索框中输入 terminal 或 ...
- 有趣的toggleClass实现交替样式
addClass和removeClass进行样式类型的修改相信比较容易学习和接受 但是用这两个方法去实现交替样式,像一些<li>列表的样式,还有同类型数据的呈现, 当然很多框架都给出了封装 ...