HTML5教程

HTML基础

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

HTML 是英文 Hyper Text Markup Language（超文本标记语言）的缩写。

html文档的基本结构

<!DOCTYPE html>
<meta charset="utf-8"> <!-- 说明文档的字符编码，否则浏览器可能不能正确解析-->
<html>
    <head>
    <!-- ... -->
    </head>


    <body>
    <!-- ... -->
    </body>
</html>

在文档的顶部，我们需要告诉浏览器网页所使用的 HTML 的版本。 HTML 是一个在不停发展的语言，大部分浏览器都支持 HTML 的最新标准，也就是 HTML5。 大部分主流浏览器都支持最新的 HTML5 规范。 但是一些陈旧的网页可能使用的是老版本的 HTML。
可以通过 <!DOCTYPE ...> 来告诉浏览器页面上使用的 HTML 版本，同时也声明了使用标准模式，而不是兼容模型。"..." 部分就是版本号。 <!DOCTYPE html> 对应的就是 HTML5。
!和大写的 DOCTYPE 是很重要的，尤其是对那些老的浏览器， 但 html 无论大写小写都可以。

所有的 HTML 代码都必须位于 html 标签中。 其中 <html> 位于 <!DOCTYPE html> 之后，</html> 位于网页的结尾。

html 的结构主要分为两大部分：head 和 body。 网页的描述应放入 head 标签， 网页的内容（向用户展示的）则应放入 body 标签。比如 link、meta、title 和 style 都应放入 head 标签；h、p都应放入body标签。

html文本标签

大部分 HTML 元素都有一个开始标记和一个结束标记。开始标记像这样：<h1> 结束标记像这样：</h1> 开始标记和结束标记的唯一区别就是结束标记多了一个/。
也有一些标签没有结束标签，例如img、input等。

  • h标签

h1元素通常被用作主标题，h2元素通常被用作副标题，还有h3、h4、h5、h6元素，它们分别用作不同级别的标题。

  • p标签

p是paragraph的缩写，通常被用来创建一个段落。
开发习惯：用“lorem ipsum”来占位，通常作为没用什么实际意义的文本用于页面的测试中。

  • title标签

即打开网页时，网页的标题。

  • main标签等

HTML5 引入了很多更具描述性的 HTML 元素，例如：header、footer、nav、video、article、section等等,这些元素让 HTML 更易读，同时有助于搜索引擎优化和无障碍访问。
main元素让搜索引擎和开发者瞬间就能找到网页的主要内容

  • div标签

div 元素也叫内容划分元素，是一个包裹其他元素的通用容器。它也是 HTML 中出现频率最高的元素。

  • img标签
    <img src = "..." alt = "图片的描述">

用img元素来为网站添加图片，其中src属性指向一个图片的地址。注意：img元素是没有结束标记的。
所有的img元素必须有alt属性，alt属性的文本是当图片无法加载时显示的替代文本，这对于通过屏幕阅读器来浏览网页的残障用户非常重要。
注意：如果图片是纯装饰性的，alt应设为空。

  • a标签

可以用 a 锚点（Anchor，简写 a）来实现网页间的跳转（即超链接）, 锚点需要一个href属性指向目的地（即链接的URL地址），同时还需要有锚点文本（即网页中点击的地方）。

<a href = "..."> 链接描述</a>
<a href = "..." target = "_blank"> 链接描述</a>  <!-- 属性中加入 target="_blank" 可以实现点击链接后打开新的网页 -->

还可以用a锚点来实现页面内的跳转

<a href="#destination">跳转</a>
...
<p id = "destination">跳转到了这里</p>

设置锚点的href属性值为井号#加上想跳转区域对应的id属性值，这样就可以创建一个内部跳转。id是用来描述网页元素的一个属性，id的内容可以随便取，相当于区域名。链接区和跳转区的id值相对应即可。

有时想为网站添加一个超链接，但暂时还不知道链接到哪里，可以先用#来占位。

<p>
	这是我的个人网站 <a href = "#" target = "_blank">SYH's homepage</a>
</p>
  • ul、ol、li标签

用ul来创建一个无序列表，用ol来创建一个有序链表

<ul>
	<li>3</li>
	<li>4</li>
</ul>

<ol>
	<li>1</li>
	<li>2</li>
</ol>
  • input标签

注意input标签也是没有结束标签的。

用input设置一个输入框，输入框的类型可以利用type属性来设置。

<input type = "text">  <!-- “text”设置的就是文本输入框。 -->
<input type = "text" placeholder = "占位文本">  <!-- 即在输入之前，输入框内所显示的的预定义文本。-->
<input type = "text" placeholder = "占位文本" required> <!-- 当设计表单时，可以指定某些字段为必填项（required），只有当用户填写了该字段后，才可以提交表单 -->

input的类型还可以设置为单选radio、多选类型checkbox
注意：每一个选项按钮都应该嵌套在它自己的label标签中，相当于给 input 元素和包裹它的 label 元素建立起了对应关系。
所有关联的单选按钮（即同一道“题”的所有选项）应该拥有相同的 name 属性。

创建一组单选按钮，选中其中一个按钮，其他按钮即显示为未选中，以使用户只能提供一个答案。

<label><input type="radio" name="question1">choice1</label>
<label><input type="radio" name="question1">choice2</label>
<label><input type="radio" name="question1">choice3</label>

创建一组多选类型，与单选类型。

<label><input type="checkbox" name="question1">choice1</label>
<label><input type="checkbox" name="question1">choice2</label>

提交表单时，所选项的值会发送给服务端。 radio 和 checkbox 的 value 属性值决定了发送到服务端的实际内容。例如

<form action="URL-where you want to submit the data to">
	<label><input type="radio" name="question1" value = "Choice1">choice1</label>
	<label><input type="radio" name="question1" value = "Choice2">choice2</label>
	<button type="submit">提交</button>
</form>

这里有两个 radio 单选框。 当用户提交表单时，如果choice1选项被选中，表单数据会包含：question1=Choice1。 也就是所选项的 name 和 value 属性值。
如果没有指明 value 属性值，则会使用默认值on做为表单数据提交。 在这种情况下，如果用户选中 “choice1” 选项然后提交表单，表单数据则会包含 question1=on。 这样的表单数据看起来不够直观，因此最好将 value 属性值设置为一些有意义的内容。

还给单选按钮和复选框添加默认选中项，即在该选项的属性中添加checked。

<label><input type="radio" name="question1" value = "Choice1" checked>choice1</label>
  • form标签

如果要通过HTML 来发送数据（例如输入框中的内容）给服务器的表单， 只需要给 form 元素添加 action 属性即可。

<form action="URL-where you want to submit the data to">
	<input type="text" placeholder="place input">
</form>
  • button标签

添加一个按钮，以实现不同的功能，例如提交等。通常可用添加在输入框的下面，将输入提交给服务器。

<form action="URL-where you want to submit the data to">
	<input type="text" placeholder="place input">
	<button type="submit">提交</button>
</form>

标签的嵌套

html各种标签之间的嵌套使网页的设计更加多样。

例如锚点可以嵌套在段落<p> <a href = "..."></a> <\p>内部
图片也可以嵌套在锚点中，从而实现图片成为超链接的入口。

<a href="...">
        <img src="..." alt="...">
</a>
这篇关于HTML基础的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航