HTML基础

2018-08-12

Web 标准

结构 (xhtml、xml)
表现 (css)
万维网联盟(w3c)制定了结构和表现的标准
行为 (Dom ECMAScript)
欧洲电脑厂商联合会(ECMA)制定行为标准

关于 HTML 的相关概念

HTML 指的是超文本标记语言(Hyper Text Markup Language)
XHTML 指可扩展超文本标记语言(标识语言)
Extensible HyperText Markup Language
HTML5 指的是 HTML 的第五次重大修改(新标准)

HTML 的文件结构

<!DOCTYPE html>
<!--声明文档类型-->
<html>
  <head>
    <meta charset="utf-8" />
    <!--编码格式-->
    <title>我的第一个网页</title>
    <!--文档标题-->
  </head>
  <body>
    所有要写的内容
    <!--网页内容-->
  </body>
</html>

HTML 的文件命名

文件命名规则：用英文，不用中文

.html 和.htm;
无汉字、无空格、无特殊符号（如标点符号）
必须以英文开头，只可以有英文字母、下划线和数字；
首页的文件默认命名为：index.html 或 index.htm；

HTML 的语法

<标签名属性名=“属性值”属性名=“属性值” >文本</标签名>
例如：

1	<a href="“#”" title="“这是一个连接”">背景红色</a>

<标签名属性名=“属性值” />
例如：

1	<img src="“图片地址”" />

说明： 1)写在<>中的第一个单词叫做标记，标签，元素。 2)标记和属性用空格隔开，属性和属性值用等号连接，属性值必须放在””号内。 3)一个标记可以没有属性也可以有多个属性，属性和属性之间不分先后顺序。 4)单标记没有结束标签，用”/“代替。

HTML 的常用标记

HTML 文本标记

文本标题标签

<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>

特点：字体加粗、变大；自动换行

段落标签

1	<p>段落文本内容</p>

特点：段落与段落之间有段间距

定义粗体文本

1	<strong>文本</strong> <b>文本</b>

定义斜体文本

1	<em>文本</em> <i>文本</i>

定义下标字

1	<sub>文本</sub>

定义上标字

1	<sup>文本</sup>

定义删除字

1	<del>文本</del>

强制换行
>
水平线
空格符

&nbsp;

列表标签
HTML 中有三种列表，分别是：无序列表，有序列表，自定义列表

<!-- 无序列表 -->
<ul>
  <li>内容</li>
  <li>内容</li>
  <li>内容</li>
  ．．．．．．
</ul>

<!-- 有序列表 -->
<ol>
  <li>内容</li>
  <li>内容</li>
  <li>内容</li>
  ．．．．．．
</ol>

<!-- 自定义列表 -->
<dl>
  <dt>名词</dt>
  <dd>解释</dd>
  ．．．．．．
</dl>

HTML 的超链接标签

<!-- 新窗口打开 -->
<a href="“#”" target="_blank" title="“”">链接内容</a>
<!-- 当前窗口打开 -->
<a href="“#”" target="_self">链接内容</a>

HTML 的图片标记

1	<img src="目标文件路径及全称" alt="图片替换文本" title="图片标题" />

title 的作用: 当鼠标悬停在该图片上时显示一个小提示，鼠标离开就没有了
（注：HTML 的绝大多数标签都支持 title 属性，title 属性就是专门做提示信息的）
alt 的作用:当图片因为某种原因不能正常加载时，在图片位置显示的提示信息

HTML 相对路径的写法

1	<img src="img01.jpg" />

当前文件与目标文件所处的文件夹在同一目录下:

1	<img src="images/img01.jpg" />

当前文件所处的文件夹和目标文件所处的文件夹在同一目录下:

1	<img src="../images/img01.jpg" />

HTML 数据表格的作用及组成

表格的基本构成

<table
  width=" 500"
  height="300 "
  border="1"
  bgcolor="red"
  cellspacing="5"
  cellpadding="0"
>
  <tr>
    <td>内容</td>
  </tr>
</table>

注：一个 tr 表示一行; 一个 td 表示一列(一个单元格)

表格的相关属性:

单元格与单元格之间的间距：cellspacing=”20”
单元格与内容之间的空隙：cellpadding=”10”
水平对齐方式：align=”left/center/right”
(注:如果此属性加到 table 上表示 table 相对于浏览器的对齐方式;如果加到 tr 或 td 上表示单元格内容相对于单元格的对齐方式。)
垂直对齐：valign=”top/middle/bottom”

合并单元格属性：
合并列：colspan=”所合并的列数”
合并行：rowspan=”所合并的行数”

HTML 表单的应用

表单框

1	<form name=“name01” method=“post/get” action=“ ”>内容</form>

称为表单标记，属于一个容器标记，表示其它表单标记需要在它的包围中才有效。

单行文本框

1	<input name="“" ” type="“text”" value="默认值" />

密码框

1	<input name="“”" type="password" placeholder="密码" />

提交按钮

1	<input type="submit" value="按钮内容" />

重置按钮

1	<input type="reset" value="按钮内容" />

普通按钮

1	<input type="“button”value" ="“下一步”" />

HTML div 和 span 的用法

div 的用法

1 2	<div id="id名“ class="class名"></div> <!-- 文档区域，文档布局对象 -->

span 的用法

1 2	<span></span> <!-- 文本结点（某一小段文本，或是某一个字） -->

post 和 get 的区别

get 是从服务器上获取数据，post 是向服务器传送数据
get 是把参数数据队列加到提交表单的 ACTION 属性所指的 URL 中，在 URL 中可以看到。post 是通过 HTTP post 机制，用户看不到这个过程
get 传送的数据量较小，不能大于 2KB。post 传送的数据量较大，一般被默认为不受限制。
get 安全性非常低，post 安全性较高。但是执行效率却比 Post 方法好。

本文作者：人模人样的搬砖老段
本文链接：HTML 基础
如有错误，请及时评论或者知乎私信或者 B 站私信哦~

最后更新于:2020/04/11