HTML

最新推荐文章于 2025-09-17 08:30:00 发布

原创最新推荐文章于 2025-09-17 08:30:00 发布 · 560 阅读

CC 4.0 BY-SA版权

HTML（Hyper TextMarkup Language） :超文本标记语言，是一套标记标签（不是编程语言）

 概念：是最基础的网页开发语言
	* Hyper Text Markup Language 超文本标记语言
		* 超文本:
			* 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.
		* 标记语言:
			* 由标签构成的语言。<标签名称> 如 html，xml
			* 标记语言不是编程语言

作用：用标记标签描述网页，把网页内容显示在浏览器中

语法骨架：

<HTML>                   <!--根标签-->
   <head>                <!--文档头部-->
       <title></title>   <!--标题-->
   </head>
   <body>                <!--身体，写内容的地方-->
   </body>
</HTML>

标签的分类

单标签

换行<br> 和段落<p>区别在于行间距和段落间距的区别，行间距很小，段落间距很大。

例如：<br/>       <!--换行标签：强制换行（break）-->
     <hr>        <!--水平线标签：用一些水平线将段落分割开（horizontal）-->
     <img/>      <!--图像标签-->
     <base/>     <!--设置整体链接的打开状态-->
     <input/>    <!--输入-->
     <link/>     <!--外链式嵌入-->

双标签

例如： <title></title>

HTML中的关系（只有两种）

第一种：父子孙（嵌套）

<HTML>                   <!--根标签（父）-->
   <head>                <!--文档头部（子）-->
       <title></title>   <!--标题（孙）-->
   </head>   
</HTML>

第二种：兄弟关系（并列关系）

                
   <head>                <!--文档头部-->
   </head>
   <body>                <!--身体，写内容的地方-->
   </body>

小知识点：

HTML常用的标签

标题标签(六级) ：直观性好

语法：

<hn> 标题文本 </hn>

段落标签（paregraph）

语法：

<p>内容</p>

div（divsion:分割）和span（：跨度，范围）标签:网页布局中的盒子

作用：布局

语法：

<div> </div>   <span></span>

文本格式化标签

图像标签：

<img src="图像URL" />  <!--src是路径属性-->

<img>标记属属性

属性	属性值	描述
src	URL	图像的路径
alt	文本	图像不能显示时的替换文本
tilte	文本	鼠标悬停时显示的内容
width	像素	设置图像的宽度
height	像素	设置图像的高度
bofder	文本	设置图像的边框的宽度

相对路径的学习：

图像文件和HTML在同一个文件夹：输入图像名即可

图像文件在HTML的下一级文件夹，输入文件夹名和文件名之间用 / 隔开（HTML和图像所在的文件夹是同一级）

图像文件位于HTML文件的上一级文件夹，在文件名前加 ../ （图像文件和HTML所在的文件夹在同一级）

绝对路径：

完整的地址（不用）

链接标签：

< a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像</a>

href（Hypertext Reference）:链接目标的URL地址。

target:指定链接页面打开的方式，有两种取值self （替代当前窗体）和blank（新窗口打开）

链接目标不确定用#代表链接地址

创建锚点定位（例如点击我要评论，立即跳转到我要评论的界面。）分两步：

第一：使用"a href="# id名创建文本/a

第二：用id 名标注跳转目标的位置

base标签

 <base/>     <!--设置整体链接的打开状态-->

特殊字符标签：

列表标签

<ol></ol>有序列表 <ul></ul> 无序列表 <dl><dt>(自定义列表) 标签创建无符号类别表，<dd>代替<dt>，创建缩进类别表

<table>标签定义表格：显示数据

tr为行，td为单元格

特殊属性：cellspacing 单元格与单元格之间的距离

cellpadding 单元格内容距离单元边框的距离

rowspan 跨行合并

colspan 夸列合并

表单标签（收集用户信息）：

<input>控件属性如下（重点学习）

Label 标签(用来增加用户体验)：

（绑定一个表单元素，当点击label标签的时候，被绑定的表单元素就会获得输入焦点）

<label for="male"> Male </label>
<input type="radio" name="sex" id="male" value="male">

textarea控件（文本域）

基本语法如下：

<textarea cols="每行中的字符数" rows="显示的行数">
  文本内容
</textarea>

下拉菜单（select）

<select>
<option>选项1</option>
<option>选项2</option>
</select>

表单域：form 标签被用于表单域

<form action="url地址"  method="提交方式" name="表单名称">
各种表单控件
</form>

action:收集表单信息后，将信息传送给服务器进行处理，action属性用于指定接收并处理表单数据的服务器城区的URL地址

method:设置表单数据的提交方式，取值为get 或post。

name:指定表单的名称，区分同一个页面的多个表单。

关于HTML的学习就先学习到这里，写的有点粗糙，需要多多实践。希望可以帮助大家！

HTML

HTML常用的标签

标题标签(六级) ：直观性好

段落标签（paregraph）

div（divsion:分割） 和span（：跨度，范围）标签:网页布局中的盒子

文本格式化标签

图像标签：

相对路径的学习：

绝对路径：

链接标签：

base标签

特殊字符标签：

列表标签

<table>标签定义表格：显示数据

表单标签（收集用户信息）：

Label 标签(用来增加用户体验)：

textarea控件（文本域）

下拉菜单（select）

表单域：form 标签被用于表单域

div（divsion:分割）和span（：跨度，范围）标签:网页布局中的盒子