震惊 HTML快速入门！！！

李恩泽的博客
65 阅读7分钟

HTML

HTML基本概念

  • 什么是HTML？

超文本标记语言(HyperText Markup Language)，标准通用标记语言下的一个应用

超文本就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素

HTML不是一种编程语言，而是一种标记语言

HTML基本语法

基本结构

如下所示，这是一个非常简单基本的html结构

在谷歌等浏览器中，也可以通过右键一个页面，查看元素获取到一个网站的基本html源代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>标题</title>
    </head>
    <body>
        <h1>我的第一个标题。</h1>
        <p>我的第一个段落。</p>
    </body>
</html>
  • <!DOCTYPE html>声明为HTML文档，HTML文档也常称为网页
    • 一个文档包含HTML标签和文本
  • <html>与</html>之间的文本描述网页，同时HTML元素也是当前页面的根元素
  • <head>是包含了文档的元(meta)数据，如定义网页编码格式<meta charset="utf-8">
  • <title>元素描述当前文档页面的标题
  • <body>与<body>之间的文本是可见的页面内容
  • <h1>与</h1>之间的文本被显示为标题
  • <p>与</p>之间的文本被显示为段落

标签规则

基本结构中诸多尖括号所组成的代码被称为标记标签(HTML标签)，遵循如下基本规则

  • 标签由尖括号<>包围
  • 标签经常成对出现，由开始标签与结束标签组成
  • 多数情况下，标签支持互相嵌套，用来实现更复杂的页面内容

注释语法

注释主要为页面代码进行标识标注，方便开发者进行代码阅读

本身解释器或编译器不会解释任何注释内容，只会当做空白处理，浏览器在遇到注释时同样如此

<!-- 这是一段注释 -->
<h5>这是一个H5标题。</h5>
<!-- 被注释的内容不显示 -->

HTML常见标签

块级标签

  • 块级标签最明显的特征为独占一行，不会和其他元素待在同一行

  • 其次具备的特点是可以设置宽、高属性

标题标签

呈现加粗，加大的字体样式，从h1~h6，越来越细越小

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
段落标签

段落为p标签，特点为会在内容的末尾携带额外的换行标识，看起来行与行之间的间隔会更大

<p>这是一段文本</p>
<p>很遗憾，这也是一段文本</p>
块级标签

div标签为块级标签，经常用来组合一群标签内容，进行一块一块的标签管理组合

div标签后同样具备一个换行符

<div>
    <p>一个段落</p>
    <h1>一个标题</h1>
</div>
列表标签

列表标签分为无序和有序两种标签样式，分别以序号以及小黑圆圈表示

有序标签通过ol标签包裹，而无序标签通过ul标签，不论是有序还是无序，都通过li标签定义列表元素

li标签也可以单独使用，表示一项

<ol>
    <li>有序项目1</li>
    <li>有序项目2</li>
</ol>
<ul>
    <li>无序列表项1</li>
    <li>无序列表项2</li>
</ul>
表单标签

表单标签主要结合表单框等标签组合使用，创建可以被提交的HTML表单

表单标签中可以包含input、textarea等表单标签元素

<form action="/" method="POST">
    <input type="text">
    <button type="submit">提交</button>
</form>

action: 指明当前表单数据提交地址

method: 指明表单提交数据时使用的http请求方式

行级标签

  • 行级标签不具备自动换行的属性
  • 并且设置行级标签的宽高也是无意义的
跳转标签

跳转标签使用a标签，通过标签的href属性指明在点击时跳转的地址

<a src="https://www.baidu.com">百度</a>
文本标签

span标签为不会换行的文本标签，经常也用来组合行内元素，所有的浏览器都支持他

<span>一段文本</span>
<span>和上一段紧紧挨着</span>

行内块标签

  • 行内块标签拥有内在尺寸，可设置高宽
  • 但是这样的标签不会自动换行
图片标签

图片标签为img标签，可以在页面加载图片资源，使用相对、绝对、网路资源都是可以的

使用src属性指明图片资源地址，alt属性表示光标位于图片时所显示的内容，或是当图片加载失败时所显示的内容

<img src="img/1.jpg" alt="图片" />
按钮标签

按钮标签分为三种主要用途，主要结合未来的表单标签使用

<button type="button">button</button>

type属性声明按钮的类型，支持如下一些属性

  • submit: 当在form标签中时，可以提交表单，触发form标签action动作
  • reset: 当在form标签中时，可以重设表单内容，清空表单内比表单框数据
  • button: 普通按钮

样式标签

加粗

加粗文本可以使用b标签，也可以使用strong标签

<b>加粗</b>
<strong>加粗</strong>
斜体

i标签实现斜体样式

<i>斜体</i>
下划线

u标签实现文本带有下划线效果

<u>下划线</u>
删除线

s标签实现删除线横跨文字的效果

<s>删除</s>

HTML表格标签

表格标签由table标签进行定义，是在页面中表示数据时经常使用到的标签元素

每一行: tr[table row]

每一行有几个单元格: td[table data]

表头: th[table header]

表格外边框

<table border="5">
    <caption>用户表</caption>
	<tr>
		<th>名字</th>
		<th>年龄</th>
	</tr>
	<tr>
		<td>张三</td>
		<td>18</td>
	</tr>
</table>

border: 定义表格边框，数字越大，边框越粗

caption: 定义表格标题

表格单元格间距

<table border="1" cellpadding="5" cellspacing="3">
...
</table>

cellpadding: 表格单元边界与单元内容之间的间距

cellspacing: 单元格之间间距

表格边框覆盖

<table border="1" frame="box">
...
</table>

frame：控制围绕表格的边框样式

  • above: 上边框
  • below: 下边框
  • hsides: 上下两侧
  • vsides: 左右两侧
  • box: 四面环山边框

表格单元格合并

<table>
    ...
    <tr>
   		<td colspan="2">无名氏</td>
    </tr>
</table>

colspan：合并列

rowspan：合并行

表格文字对齐

<table border="1">
...
    <tr>
        <td align="center">对齐</td>
    </tr>
</table>

align：设置单元格内容靠齐，可选属性有left、right以及center

HTML表单标签

大部分表单标签(input、textarea、select)属于行块级元素，具备内在尺寸，宽高属性等，但不会自动换行

表单用于收集不同类型的用户输入，表单由不同类型的标签组成

单行文本

普通文本输入框使用text类型

<label for="username">姓名:</label>
<input type="text" name="username" value="张三" />

label标签可以为表单框进行标识说明，为用户带来更好的体验，并且当光标点击label标签时，会自动将焦点移动至对应的输入框中

当type类型为password时，为密码输入类型，输入的内容以*号代替

<label for="password">密码：</label>
<input type="password" name="password" placeholder="请输入密码" id="password"/>

value: 表单框输入的实际内容

name: 定义表单数据标识符，提交数据时声明该数据的键

placeholder: 表单框输入前提示内容

单选框

单选框使用radio标签，由相同name属性定义为一组选项单选框组

<input type="radio" name="gender" value="0" /> 男
<input type="radio" name="gender" value="1" checked /> 女

checked: 默认选中的项

复选框

复选框使用checkbox属性，支持同时选择多项，同样适用name属性进行一组选线框组标识

<input type="checkbox" name="like" value="sing" checked /> 唱歌
<input type="checkbox" name="like" value="run" checked /> 跑步
<input type="checkbox" name="like" value="swiming" /> 游泳

checked: 默认选中的项

文件框

文件框可以提供用户进行文件上传选择，使用file属性

<input type="file" name="picture">

多行文本

多行文本textarea，支持设置行列属性，进行大段落文本的输入

<textarea cols="10" rows="5"></textarea>

cols: 渲染时具备的列数

rows: 渲染时具备的行

下拉菜单

select标签实现基本下拉菜单，option标签声明下拉菜单选项

<select name="site">
    <option value="0">北京</option>
    <option value="1" selected>上海</option>
</select>

option: 下拉菜单选项

value: 选中时实际代表的值

selected: 默认选中项

多选下拉菜单

多选下拉菜单支持按着Ctrl按钮来选择多个选项，进行多项选择

通过select标签结合multiple属性实现

<select multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
avatar
文章
阅读
粉丝