学习笔记—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属性:为选项组规定描述。
    -->
posted @ 2019-03-29 18:12  殇灬央  阅读(373)  评论(0编辑  收藏  举报
/* */