学习笔记—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:这两种类型在内存的不同地方,值类型存储在堆栈中,而引用类型存储在托管对上.存 ...
随机推荐
- Unity3D学习（四）:小游戏Konster的整体代码重构
前言 翻了下之前写的代码,画了个图看了下代码结构,感觉太烂了,有很多地方的代码重复啰嗦,耦合也紧,开个随笔记录下重构的过程. 过程 _____2017.10.13_____ 结构图: 目前发现的待改进 ...
- 令状态寄存器访问指令（MRS,MSR）
ARM中有两条指令用于在状态寄存器和通用寄存器之间传送数据. 针对32位的ARM处理器,状态寄存器就是一个32位长的寄存器.每个位的含义如下图: 分成了4部分: 1,条件标志位 N(Negative) ...
- SSM-SpringMVC-30：SpringMVC中InitBinder的骇客级优化
------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 上篇博客利用initbinder做了局部的日期类型转换,但是兼容性不要,只支持yyyy-MM-dd这种,所以 ...
- RecyclerView android
RecyclerView是用来替代ListView.GridView的一个牛掰的控件.用起来更灵活,还能实现线性布局(横向.纵向).网格布局.瀑布流等美观的UI. 在使用RecyclerView时候, ...
- CKEditor、UBB编辑器的使用总结
2018-04-08 22:07:16.188 ERROR 14728 --- [nio-8082-exec-8] o.a.c.c.C.[.[.[/].[dispatcherServlet] : Se ...
- Android开发的一些总结
Android开发与Java区别 1.执行入口点 AndroidMainfest.xml文件中的intent-filter 2.基于组件 Activity(Fragment), Service, Br ...
- pingo--util.go 源码阅读
:] } var _letters = []rune("abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789_-&qu ...
- redis结合自定义注解实现基于方法的注解缓存，及托底缓存的实现
本次分享如何使用redis结合自定义注解实现基于方法的注解缓存,及托底缓存的实现思路 现在的互联网公司大多数都是以Redis作为缓存,使用缓存的优点就不赘述了,写这篇文章的目的就是想帮助同学们如 ...
- BZOJ_3675_[Apio2014]序列分割_斜率优化
BZOJ_3675_[Apio2014]序列分割_斜率优化 Description 小H最近迷上了一个分隔序列的游戏.在这个游戏里,小H需要将一个长度为n的非负整数序列分割成k+1个非空的子序列.为了 ...
- BZOJ_4518_[Sdoi2016]征途_斜率优化
BZOJ_4518_[Sdoi2016]征途_斜率优化 Description Pine开始了从S地到T地的征途. 从S地到T地的路可以划分成n段,相邻两段路的分界点设有休息站. Pine计划用m天到 ...