HTML5教程

HTML基础标签学习

本文主要是介绍HTML基础标签学习，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、HTML概述

        HTML是一种超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。我们可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

二、HTML骨架格式

如同日常生活的书信，我们要遵循约定俗成的格式进行书写。那么，HTML 页面也有自己的骨架格式：

<!DOCTYPE html>//声明为 HTML5 文档
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

</body>
</html>

分析总结：

1.html结构：包括head、title、 body;
2.html标签是以尖括号包围的关键字;
3.html标签通常是成对出现的，有开始就有结束，包含成对标签、独立标签（<br/><hr/><img/><input/><param/><meta/><link/>);
4.html通常都有属性，格式:属性名＝“属性值”(多个属性之间空格隔开);
5.html标签不区分大小写,建议小写;

三、html基本标签

1 、HTML标签：

作用所有HTML中标签的一个根节点。

2 、head标签：

作用：用于存放：title,meta,base,style,script,link

注意在head标签中我们必须要设置的标签是title，其他可根据需要进行设置

3、title标签：

作用：让页面拥有一个属于自己的标题。

4、body标签：

作用：页面在的主体部分，用于存放所有的HTML标签：p,h,a,b,u,i,s,em,del,ins,strong,img......
属性：color:文本的颜色、bgcolor:背景色、background:背景图片
颜色的表示方式：

第一种方式：使用颜色名称: 仅仅有16种颜色名可用英文字母，其余的要用16进制值。

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

第二种方式：RGB模式：rgb(255,255,255)

第三种方式：十六进制：#000000   #ffffff   #325687   #377405

四、HTML标签的语义化（重点）

所谓标签语义化，就是指标签的含义。

为什么要有语义化标签

    1、方便代码的阅读和维护

    2、同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容

    3、使用语义化标签会具有更好地搜索引擎优化

核心：合适的地方给一个最为合理的标签。

语义是否良好： 当我们去掉CSS之后，网页结构依然组织有序，并且有良好的可读性。不管是不是开发者，都能看懂这块内容是什么。

遵循的原则：先确定语义的HTML ，再选合适的CSS。

五、HTML标签等级

标签分为两种等级：1，行内元素。2，块级元素。

行内元素和块级元素的区别：

行内元素：　　

  • 与其他行内元素并排
  • 不能设置宽高，默认的宽度就是文字的宽度

  • 行内元素有：

<a href=""></a>链接锚点
<abbr></abbr>缩写
<acronym></acronym>首字母
<big></big>大字体
<br/>换行
<cite></cite>引用
<code></code>计算机代码
<dfn></dfn>定义字段
<em></em>强调
<i></i>斜体
<img src="">图片
<input type="" name="">输入框
<kbd></kbd>定义键盘文本
<label></label>表格标签
<q></q>短引用
<samp></samp>定义范例计算机代码
<select></select>项目选择
<small></small>小字体文本
<span></span>常用内联容器,定义文本内区块
<strong></strong>粗体强调
<sub></sub>下标
<sup></sup>上标
<textarea></textarea>多行文本输入框
<tt></tt>电传文本
<u></u>下划线
<var></var>定义变量

块级元素：

  • 霸占一行，不能与其他任何元素并列
  • 能接受宽高，如果不设置宽度，那么宽度将默认变为父级的100%
  • 块级元素有：
<div></div> 常用块级容器
<dl></dl> 定义列表
<form></form> 交互表单
<h1></h1>-<h6></h6> 各级标题
<ol></ol> 有序列表
<li></li> 无序列表
<p></p> 段落
<pre></pre> 预格式文本
<table></table> 表格

六、HTML标签分类

1.换行标签：<br/>
2.段落标签：<p> </p> 文本文字

特点：段与段之间有行高
属性：align对齐方式(left：左对齐  center：居中  right：右对齐)

3.水平线标签:<hr/>

属性:

width：水平线的长度(两种:第一种:像素表示；第二种，百分比表示)
size: 水平线的粗细 (像素表示，例如：10px)
color: 水平线的颜色
align:水平线的对齐方式(left：左对齐 ;center：居中; right：右对齐)

4.容器标签（重点）

<div>:块级标签，独占一行；主要是结合css页面分块布局。
<span>:行级标签，所有内容都在同一行作用；进行友好提示信息。

5.标题标签 (熟记)

       为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题，随着数字增大文字逐渐变小，字体是加粗的，内置字号，默认占据一行；<h1>、<h2>、<h3>、<h4>、<h5>和<h6>

6.列表标签

容器里面装载着文字或图表的一种形式，叫列表
列表最大的特点就是整齐 、整洁、 有序

6.1无序列表 ul （重点）

<ul>
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ul>

无序列表标签： <ul></ul>
属性：type :三个值，分别为：circle(空心圆) ,disc(默认,实心圆),square(黑色方块)
列表项：<li></li>

6.2有序列表 ol

<ol>
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ol>

有序列表标签：<ol>
属性：type：1、A、a、I、i（数字、字母、罗马数字）
列表项： <li></li>

6.3定义列表dl

<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
</dl>

7.图片标签<img/>

<img src="/img/flower.jpg"  alt="上海鲜花港 - 郁金香" />

属性:

src：图片地址， 相对路径 （同一个网站） 绝对路径 （不同网站）；

alt:图片的文字说明；

8.链接标签

<a href="#id名">"链接文本"</a>创建链接文本

9.字体标签

<font size="设置字体大小" color="设置字体颜色" face="设置字体"> 文字 </font>

10.表单域和表单控件标签(掌握)

form标签（表单域）

       在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：

<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>

常用属性：

        Action：在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。（表示动作，值为服务器的地址，把表单的数据提交到该地址上处理）

         method:用于设置表单数据的提交方式，其取值为get或post。

         name:用于指定表单的名称，以区分同一个页面中的多个表单。

表单控件： 

​        包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

input控件：

       在上面的语法中，<input />标签为单标签，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。

<input type="元素类型" name="元素的名称" value="元素的值" size="元素的宽度"  readonly="是否只读"  maxlength="输入字符的最大长度" disabled="是否禁用"/>

10.1文本框

在表单中，文本框用来让用户输入字母、数字等等，如用户的姓名，地址等。

代码格式如下：
<input type=“text” name="…" size="…" maxlength="…" value="…"/>

属性解释：

type=”text”：定义单行文本输入框；

name属性：定义文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；

size属性：定义文本框的宽度，单位是单个字符宽度；

value属性：定义文本框的初始值。

10.2密码框

是一种特殊的文本域，用于输入密码。

代码格式如下：
<input type=“password” name="…" size="…" maxlength="…" value="…"/>

属性解释：

type=”password”定义密码框；

name属性：定义密码框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；

size属性：定义密码框的宽度，单位是单个字符宽度；

value属性：定义文本框的初始值。

10.3隐藏域

是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。

代码格式如下：
<input type=“hidden” name="…" value="…"/>

属性解释：

type=”hidden”：定义隐藏域；

name属性：定义隐藏域的名称，要保证数据的准确采集，必须定义一个独一无二的名称；

value属性：定义文本框的初始值。

10.4单选按钮

当需要用户从有限个选项中选择一个时，使用单选按钮。比如我们在注册的时候选择体重。

代码格式如下：
<input type=“radio” name="…" value="…"/>

属性解释：

type=”radio”定义单选框；

name属性：定义单选框的名称，要保证数据的准确采集，单选框都是以组为单位使用的，在同一组中的单选项都必须同一个名称；

value属性：定义单选框的值，同一组中，他们的域值必须是不同的。

10.5复选框

允许在待选项中选中一项以上的选项。每个复选框都是一个独立的元素，都必须有一个独一的名称。

代码格式如下：
<input type=“checkbox” name="…" value="…"/>

属性解释：

type=”checkbox”定义复选框；

name属性：定义复选框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；

value属性：定义复选框的值。

10.6文件上传框

代码格式如下：
<input type="file" name="…" />

注意：利用这项功能时，在 form 标签中要指定method属性。要把method 指定为post, enctype属性指定为 multipart/form-data。

说明：multipart 控件是否上传多文件。

属性解释：

type=”file”：定义文件上传框；
name属性：定义文件上传框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；

11.textarea控件(文本域)

       如果需要输入大量的信息，就需要用到<textarea></textarea>标签。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：

<textarea cols=“每行中的字符数” rows=“显示的行数”>
文本内容
</textarea>

12.下拉菜单

使用select控件定义下拉菜单的基本语法格式如下

    <select>
      <option>选项1</option>
      <option>选项2</option>
      <option>选项3</option>
      ...
    </select>

注意：

  1. <select></select>中至少应包含一对<option></option>。

  2. 在option 中定义selected =" selected "时，当前项即为默认选中项。

这篇关于HTML基础标签学习的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航