学习笔记—HTML基础标签

最新推荐文章于 2024-11-15 18:38:47 发布

dinglin1237

最新推荐文章于 2024-11-15 18:38:47 发布

阅读量173

点赞数

文章标签： java 前端 javascript ViewUI

原文链接：http://www.cnblogs.com/shangyang/p/10572913.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 />

　　空格符 &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属性：为选项组规定描述。
    -->