学好前端应该熟悉最基础的知识
一、什么是HTML
超文本标记语言（英文：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与CSS、JavaScript一起呗众多网站用于设计令人赏心悦目的网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。
二、简单介绍HTML语法
HTML由一系列的元素组成，你可以使用它来封装，包装或标记内容的不同部分，使其以某种方式显示或以某种方式执行。封闭标签（tags）可以使一些内容成为超链接以跳转到别的页面、加粗或斜体字等等。
1.剖析HTML元素
如果想要在html中输入段落文本，可以讲要输入的段落文本包含在段落标签（<p>）元素中：
<p>My cat is very grumpy</p>
本例<p>段落元素主要的组成部分：
1.开始标签（Opening tag）：包括元素的名称（本例中的p），包裹在开始（<）和结束（>）尖括号中。这表示元素开始-在本例中表示了一个段落的开头。
2.结束标签（Closing tag）：这与开始标记相同，除了它在元素名称之前有一个正斜杠（/）。这表示元素结束的位置-在本例中表示了一个段落的结尾。
3.内容（Content）：这是元素的内容，在本例中只是文本。
4.元素（Element）：开始标记 + 内容 + 结束标记 = 元素
2.嵌套元素
你可以把元素放在其他元素之中--这被称之为嵌套。如果我们想要表明我的小猫是非常暴躁的，可以将very嵌套在<strong>中，意味着这个单词被着重强调：
<p>My cat is <strong>very</strong> grumpy.</p>
3.块级元素和内联元素
在HTML中有两种需要知道的重要元素类别，块级元素和内联元素。
· 块级元素在页面中以块的形式展现 —— 相对与其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。块级元素通常用于展示页面上结构化的内容，例如段落、列表、导航菜单、页脚等等。一个以block形式展现的块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中
内联元素通常出现在块级元素中并包裹文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行：它通常出现在一堆文字之间例如超链接元素<a>或者强调元素<em>和<strong>。
4.注释
在编写HTML代码使想要对代码进行解释说明，那便可以将代码的说明放在注释中。 注释是被浏览器所忽略，并且对用户不可见 语法：<!-- 注释内容 -->
5.空元素
不是所有元素都拥有开始标签、内容和结束标签。有些元素只有一个标签，通常用来在此元素的位置插入/嵌入一些东西，这些元素被称之为空元素。在HTML中通常在一个空元素上使用一个闭标签是无效的。
6.属性
属性包含元素的额外信息，这些信息不会出现在实际的内容中。在图片中，这个class属性给元素赋了一个识别的名字（id），这个名字此后可以被用来识别此元素的样式信息和其他信息。
常用的标准属性
id： 定义元素在页面中的唯一标识
title：鼠标移入到元素上时提示的文本
class：样式相关，定义元素引用的类选择器
style：样式相关，定义元素的行内样式
7.HTML文档结构
简单完整的HTML
<!DOCTYPE html> <!-- 声明文档类型 --> <html> <!-- <html>元素包裹了整个完整的页面，是一个根元素 --> <head> <!-- <head>元素是一个容器，它包含了所有你想包含在HTML页面中但不想在其中显示的内容 --> <meta charset="utf-8"> <!-- 这个元素设置文档使用utf-8字符集编码 --> <title>My blog</title> <!-- 设置页面标题，让其出现在浏览器标签上。当你标记/收藏页面时它可用来描述页面。 --> </head> <body> <!-- <body>元素包含了访问页面时所有显示在页面上的内容：文本、图片、音视频、游戏等等 --> <p>This is my blog</p> </body> </html>
三、HTML常用的标签
1.<a>标签
a（anchor 锚点）：超链接、设置页面中允许被点击的内容 标签样式：<a></a> 属性： href:"xxx" -- 链接地址，xxx表示要跳转到新页面的地址 target:"xxx" -- 目标，xxx表示打开新网页所使用的的形式 target:"_blank" -- 在一个新页面打开 target:"_self" -- 在自己（本）页面打开 target:"_parent" -- 在父级页面打开 target:"_top" -- 在顶级页面打开
2.文本样式
<i></i>：斜体 <b></b>：加粗 <s></s>：删除线 <u></u>：下划线 <sup></sup>：上标 <sub></sub>：下标
3.标题
以下标签可显示一至六级标题，一级最大六级最小： <h1></h1> <h2></h2> ... <h6></h6>
4.简单标签
p（paragraph 段落）：段落元素 标签样式：<p></p> br：换行元素 标签样式：<br> hr：分割线元素 标签样式：<hr> strong：表示文本十分重要（粗体） 标签样式：<strong></strong> em（emphasize 强调）：着重元素，标记处需要用户着重阅读的内容（斜体） 标签样式：<em></em> small：将文本字体小一号 标签样式：<small></small> img：图片元素 标签样式：<img> 属性： src：图片的地址（可是绝对路径也可是相对路径） width：图片宽度 height：图片高度
5.分区元素
1）块分区元素：<div></div> 用于页面布局，独立成行 2）行内分区元素：<span></span> 用于设置同一行文本内的不同格式，多个元素在一行内显示出来
6.<iframe>标签
iframe：在一个页面内嵌套另一个页面 标签样式：<iframe></iframe> 属性： src：嵌套页面的URL地址 name：嵌入的页面的名称 frameborder：取值为1时（默认值），告诉浏览器在当前iframe与其他iframe之间绘制边框，取0时则无需绘制此边框
7.表单
由<form>标签定义，将用户输入的数据提交给后台。 但如果form表单中没有提交按钮，就无法提交form的数据。 标签样式：<form action="xxx" method="get"></form> 属性： action：提交的服务器地址 method：表单数据提交的方式（form只支持get与post两种方式） name：定义表单的名称 id：独一无二的标识 target：与<a>标签相同，一样有四个target对应的值
<input>元素
<input>：用于为基于Web的表单创建交互式控件，以便接受来自用户的数据 标签样式：<input> 属性： type：根据不同的type属性值可以创建各种类型的输入字段 value：最终提交给服务器的值 name：控件的名称，提供给服务器使用，没有name，控件则无法提交 id：唯一标识 disabled：标记表单使之为不可用
常用的type值：
-文本框：<input type="text"> -密码框：<input type="password"> -单选框：<input type="radio"> -多选框：<input type="checkbox"> -提交按钮：<input type="submit"> -重置按钮：<input type="reset"> -普通按钮：<input type="button"> -图片按钮：<input type="image" src="xxx"> -隐藏域：<input type="hidden"> -文件选择框：<input type="file">
提交按钮
标签样式：<button>按钮</button> 如果一个form里只有一个<button>（type属性为空），那这个按钮会自动升级为一个submit按钮。
<select>下拉选择框
<select name="分组"> <option value="" selected>-</option> <!-- 默认选择 --> <option value="1">第一组</option> <option value="2" disable>第二组</option> <!-- 不可选定 --> <option value="3">第三组</option> </select>
<textarea>标签
<textarea>标签：让用户可输入多行文本 标签样式：<textarea name="" id="" cols="30" rows="10"></textarea> 属性： name：控件的名称，提供给服务器使用，没有name，控件则无法提交 id：唯一标识 clos：文本框宽度 rows：文本框高度
8.列表
列表：将一组具有相似特征或者具有先后顺序的内容按照从上到下的顺序排列在一起。
1）ol（order list）有序列表 <ol> <li></li> </ol> 2）ul（un-order list）无序列表 <ul> <li></li> </ul> 3）自定义列表 <dl> <!--description list（描述列表） --> <dt>描述列表的标题内容</dt> <!-- description term（描述术语） --> <dd>描述列表定义</dd> <!-- description definition（描述定义） --> </dl>
9.表格
<table>元素定义表格 标签样式：<table></table> <table>标签的子元素有：thead、tbody、tfoot、colgroup
<table>表格示例
<table> <thead> <tr> <td>姓名</td> <td>班级</td> </tr> </thead> <tbody> <tr> <td>小红</td> <td>一班</td> </tr> <tr> <td>小蓝</td> <td>二班</td> </tr> </tbody> </table>
10.结构标记
HTML5所提供的结构标记，专门用于表示常见的网页结构（即制作布局），提升布局代码的语义性和可读性
<header></header>：定义页面顶部信息 <nav></nav>：定义页面的导航条部分 <section></section>：定义文档中的节，文档中主体内容 <article></article> ：定义独立于文档的其他部分内容(章、节等) <footer></footer>：定义某区域的脚注信息，页面底部内容等 <aside></aside>：多用于侧边栏和相关引用信息等
|
|
收藏
淘帖
踩
