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 的结构主要分为两大部分:headbody。 网页的描述应放入 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基础的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!