HTML基础知识详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_51267159/article/details/123955517

HTML文件基础知识

HTML文件是标准的ASCII文件，且其后缀名为htm或html的文件。
可以使用任何能够生成TXT类型源文件的文本编辑器来制作超文本标记语言文件。
HTML文件中的标记是不区分大小写的。
注意：现代HTML文件通常使用UTF-8编码，因此所使用的文本编辑器最好支持该编码。标准的超文本标记语言文件都具有一个基本的文档结构，标记一般都是成对出现，部分标记也有单标记。

<!DOCTYPE html>             <!--文档声明：告诉浏览器以下文件用HTML版本解析-->		
<html> 				        <!--告诉浏览器以下文件为HTML文件，开始-->	
<head> 				        <!--HTML文件头部-->		
  <meta charset="UTF-8">	<!--网页的编码格式为UTF-8，即国际通用编码格式-->
  <title>第一个网页</title>	<!--网页的标题是“第一个网页”-->
</head>						<!--head结束标签-->
<body>						<!--HTML文件的实体部分开始-->
    Hello World!			<!--显示在网页中的信息内容都放在body标签里-->
</body>						<!--HTML文件的实体部分结束-->
</html>		                <!--HTML文件结束-->

标题标记基础知识

标题可用来分隔文章中的文字，HTML中提供了六级标题，为h1至h6，标题标记的语法格式如下：

<hn align="对齐方式">标题文本</hn>

align属性是可选属性，用于指定标题的对齐方式，其取值有三种：left、center、right

字体和文字修饰

字体标记的基本语法如下：

<font  face="字体名称"  size="字号"  color="字体颜色" >文字</font>

face属性设置字体的类型，中文的默认字体是宋体
size属性设置指定文字的大小，其取值范围是1~7
color属性设定文字颜色

常用的文字修饰：

<b>加粗bold</b>
<i>斜体italic</i>	
<u>下划线underline</u>
<s>删除线strike</s>
<sup>上标</sup>
<sub>下标</sub>

段落、换行和预格式化

HTML文件在输出时都是要重新排版的，即把文本上一些额外的字符（包括空格、制表符和回车符等）都忽略，不能使用回车来换行，段落标记可以实现换行，其语法格式如下：

<p align="对齐方式"> 段落内容 </p>

<br />标记的作用就是换行，不能设置任何属性
一次换行使用一次<br />，多次换行需要使用多次<br />
连续使用两次<br />等效于一个段落换行标记<p />

预格式化指的是某些格式可以在源代码中预先设置，源代码执行后的效果与源代码中预先设置好的效果几乎完全一样。预格式化标记的语法如下：

<pre>…</pre>

转义字符

转义字符由三部分组成：
第一部分是“&”符号；
第二部分是实体名字或者是“#”加上实体编号；
第三部分是分号，表示转义字符结束。
在这里插入图片描述

列表

无序列表主要使用<ul>、<li>标记和type属性
<ul>标记表示定义无序列表
<li>标记定义列表项
type属性表示列表项的显示模式，其的取值定义如下：
　　disc是默认值，为实心圆；
　　circle为空心圆；
　　square为实心方块；

无序列表的基本语法如下：

<ul  type="列表项的标记符">
<li>项目一 </li>
<li>项目二 </li>
<li>项目三 </li>
…… 
</ul>

有序列表中的项目采用数字或英文字母开头，通常各项目间有先后的顺序性。
在有序列表中，主要使用ol和li两个标记以及type和start属性。
有序列表的基本语法如下：

<ol  type="列表项的标记符 "  start="起始值 ">
　<li>项目一 </li>
　<li>项目二 </li>
　<li>项目三 </li>
　…… 
</ol> 

start属性定义列表项开始编号的位置序号。
type属性将有序列表的类型设置为英文或罗马字母

超链接

超链接可以实现页面之间的跳转。
默认情况下，超链接在网页中以蓝色带下划线的文字表示。
超链接以a标记表示，当用户单击文本链接指针时，即可在浏览器窗口打开链接的主页内容。
超链接的格式如下：

<a href="url" target="opentype">Link text</a>

href属性规定链接的目标
target属性定义链接在何处显示

target属性值：

属性值	说明
_self	默认在现有的窗口打开新页面，原窗口将被覆盖
_blank	在新的窗口中打开新页面
_parent	在当前框架的上一层打开新页面
_top	在顶层框架中打开新页面

绝大部分情况下，target 属性要么不写，保持默认的 _self，要么把它的值设置为 _blank，在新的窗口中打开链接。

书签链接可用于当前页面的书签位置跳转，也可跳转到不同页面的书签位置。

创建书签语法结构如下：　　
<a name="书签名">[文字或图片]</a>

链接到同一页面的书签连接定义语法如下：
<a href="#书签名">源端点</a>

链接到不同网页页面的书签连接定义语法如下：
<a href="file_URL#书签名">源端点</a>

图片

图片标记语法格式如下：

<img src="" alt="" height="" width="" />

src属性表示图片文件的路径
alt属性表示提示文本，当图片无法显示时会显示该文本代替
height属性表示图片的高度
width属性表示图片的宽度

表格

表格的基本语法结构如下所示：

<table  width="  " border=" ">
  <tr>
      <td>单元格内容</td>
    ......
  </tr>
</table>

表格有大量的属性，可以控制表格的各种特性：
border属性设定表格边框线宽度；
bordercolor属性设定表格边框线的颜色；
width属性设定表格宽度；
height属性设定表格高度；
cellspacing属性设定单元格之间的间距；
cellpadding属性设定单元格的内容与其边框的内边距的间距；
align属性设定表格的对齐方式；
background属性设定表格的背景图片文件；
bgcolor属性设定表格的背景颜色。

从结构上来看，表格可以分成表头、主体和表尾三个部分，分别使用<thead>、<tbody>、<tfoot>标签来表示。
表头和表尾在一张表格只能有一个，而一张表格可以有多个主体。
<thead>、<tbody>、<tfoot>标签内部都必须使用<tr>标签。

表格的行也有大量的属性可以设置，其语法如下：

<tr height="" a1ign="" va1ign=""  bgco1or="">

align属性设定表格水平方向对齐
height属性设定表格高度
valign属性设定该行的垂直方向对齐
bgcolor属性设定该行的背景颜色

跨行和跨列功能可分别通过单元格的rowspan和colspan属性来实现，语法如下：

<td rowspan="所跨行数" colspan="所跨列数">

表单

input标记定义的语法格式如下所示：

<input  type="..."  name="..."  value="...">

输入框是最基本的表单元素，主要分文文本框和密码框，他们的差别主要在于type属性不同，此外，密码框输入时，不回显用户的输入值。

文字输入
<input  type="text"  name="..."  value="...">

密码输入
<input  type="password"  name="..."  value="...">

type的值还可以为：submit（提交）、reset（复位）
如果需要限制用户输入数据的最大长度时，在input标记中使用最大长度的属性maxlength
value属性可以设置默认值

单选框和复选框一般用来让用户作出选择，相同组的单选框只能选中一项，而复选框可以选多项，他们的区别也在于type属性不同。

复选框:
<input  type="checkbox"  name="..."  value="...">

单选框:
<input  type="radio"  name="..."  value="...">

checked属性表示在初始情况下该单选框或复选框是否被选中
单选框：name属性相同为一组，一组当中只能同时选中一项
复选框：name属性相同为一组，一组当中可以同时选中多项

下拉列表框也是让用户作出选择的表单元素，一般通过select和option标记表示。
select标记的语法格式如下所示：

<select name="" size="" multiple>
  <option value="选项1">选项1
  ...
  <option value="选项n">选项n
</select>

select 标记中有几个常用的属性，分别是 name、size、multiple
option标记中如果有selected属性表示默认选中的选项

在表单中，如果需要输入大量的文字时，特别是包括换行文字时，需要使用多行文本框标记。
多行文本框标记的语法格式如下：

<textarea name="" cols="" rows="" wrap="off/virtual/physical">...</textarea>

当用户在输入文本区域中输入文本时，只有用户按下 Enter 键时才产生换行
如果希望启动自动换行功能（word wrapping），需要将 wrap 属性设置为 virtual 或 physical

如果需要用户自由输入的同时又给用户一些建议选项，这就需要使用datalist元素用于定义输入框的选项列表，列表通过 datalist内的option元素进行创建。

如果用户不希望从列表中选择某项，也可以自行输入其他内容。datalist元素通常与input元素联合使用来定义input的取值。

在使用datalist标记时，需要通过id属性为其指定一个唯一标识，然后为input元素指定list属性，将该属性值设置为option元素对应的id属性值即可。
例如：

<label>请选择合适的编辑器:</label> 
    <input type="text" id="txt_ide" list="ide" /> 
    <datalist id="ide"> 
        <option value="Notepad++" /> 
        <option value="Sublime Text 2" /> 
        <option value="Visual Studio" /> 
        <option value="VIM" /> 
        <option value="XCode" /> 
    </datalist>

表单主标记把各种表单元素组织成一个整体，其语法如下：

<form action="" method="" enctype=""></form>

action属性表示表单提交后的地址
method属性表示提交方式，可选post和put
enctype表示表单的编码，默认编码值为application/x-www-form-urlencoded
表单中有文件元素时编码应设置为multipart/form-data