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基础标签学习的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!