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 />

　　空格符 &nbsp：

　　　　空格符，告诉刘浏览器在此出输出一个空格。可在标签内使用。

&nbsp；

列表标签

　　列表项目标签 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基础标签的更多相关文章

  1. HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...

  2. HTML+CSS学习笔记(4) - 认识标签（3）

    HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...

  3. HTML+CSS学习笔记(2) - 认识标签（1）

    HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...

  4. MyBatis:学习笔记(1)——基础知识

    MyBatis:学习笔记(1)--基础知识 引入MyBatis JDBC编程的问题及解决设想 ☐ 数据库连接使用时创建,不使用时就释放,频繁开启和关闭,造成数据库资源浪费,影响数据库性能. ☐ 使用数 ...

  5. bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

    基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...

  6. Django学习笔记（基础篇）

    Django学习笔记(基础篇):http://www.cnblogs.com/wupeiqi/articles/5237704.html

  7. C#学习笔记（基础知识回顾）之值类型与引用类型转换（装箱和拆箱）

    一:值类型和引用类型的含义参考前一篇文章 C#学习笔记(基础知识回顾)之值类型和引用类型 1.1,C#数据类型分为在栈上分配内存的值类型和在托管堆上分配内存的引用类型.如果int只不过是栈上的一个4字 ...

  8. C#学习笔记（基础知识回顾）之值传递和引用传递

    一:要了解值传递和引用传递,先要知道这两种类型含义,可以参考上一篇 C#学习笔记(基础知识回顾)之值类型和引用类型 二:给方法传递参数分为值传递和引用传递. 2.1在变量通过引用传递给方法时,被调用的 ...

  9. C#学习笔记（基础知识回顾）之值类型和引用类型

    一:C#把数据类型分为值类型和引用类型 1.1:从概念上来看,其区别是值类型直接存储值,而引用类型存储对值的引用. 1.2:这两种类型在内存的不同地方,值类型存储在堆栈中,而引用类型存储在托管对上.存 ...

随机推荐

  1. Python_字符串检测与压缩

    ''' center().ljust().rjust(),返回指定宽度的新字符串,原字符串居中.左对齐或右对齐出现在新字符串中, 如果指定宽度大于字符串长度,则使用指定的字符(默认为空格进行填充). ...

  2. Linux文本处理命令 -- grep

    简介 grep (global search regular expression(RE) and print out the line,全面搜索正则表达式并把行打印出来)是一种强大的文本搜索工具,它 ...

  3. (细节)My SQL中主键为0和主键自排约束的关系

    开始不设置主键 表的设计如下: 如果id的位置有好几个0的话:设置主键并且自动排序时,0会从1开始递增: Insert 进去 id = 0的数据,数据会从实际的行数开始增加,和从0变化不一样: 现在主 ...

  4. Thymeleaf 3.0 专题

    http://www.thymeleaf.org/doc/articles/layouts.html thymeleaf的初次使用(带参请求以及调用带参js方法) 之前对于前端框架接触较少,第一次接触 ...

  5. OAuth 2 开发人员指南

    这是支持OAuth2.0的用户指南.对于OAuth1.0,一切都是不同的,所以看它的用户指南. 本用户指南分为两个部分,第一部分是OAuth2.0提供端(OAuth 2.0 Provider),第二部 ...

  6. 巩固java(六)----java中可变参数方法(非常实用哦)

    java提供了可变参数的方法,即方法的参数个数可以不确定,用"..."定义. import java.util.ArrayList; import java.util.List; ...

  7. centos网络配置方法(手动设置，自动获取)

    不知道为什么最近一段时间网络特别的慢,还老是断,断的时候,局域网都连不上,当我手动设置一下ip后就可以了,搞得我很无语.下面是2种设置网络连接的方法,在说怎么设置前,一定要做好备份工作,特别是对于新手 ...

  8. Android 实现个性的ViewPager切换动画 实战PageTransformer（兼容Android3.0以下）

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/40411921,本文出自:[张鸿洋的博客] 1.概述 之前写过一篇博文:Andro ...

  9. centos环境的python、scrapy部署

    1 操作系统 Centos 6.5 64bit 或以上版本 2 软件环境 提示:(1)用什么软件:(2)运行环境(3)开发包. Python:Python-2.7.6.tgz Scrapy:Scrap ...

  10. 种树 BZOJ2151 模拟费用流

    分析: 我们如果选择点i,那么我们不能选择i-1和i+1,如果没有这个限制,直接贪心就可行,而加上这个限制,我们考虑同样贪心,每次选择i后,将点i-1,i+1从双向链表中删除,并且将-a[i]+a[i ...