HTML基础

最新推荐文章于 2023-03-06 17:15:50 发布

mxz_l

最新推荐文章于 2023-03-06 17:15:50 发布

阅读量135

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/mxz_l/article/details/125132332

版权

1.什么是HTML

HTML(hyper text markup language)，超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接起来成为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。

超文本是一种组织信息的方式，它通过超链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。

标记性/描述性：用特定标签描述内容

编程语言的分类:

描述性/解释型语言：html，xml

编译型语言：c，c++，java，c#

2.HTML的作用

编写网页，开发网站

3.开发工具

（1）记事本工具

建记事本文件-->写html代码-->修改记事本文件的扩展名，将txt改为html-->用浏览器打开

（2）editpluds

打开editplus工具-->编写页面内容-->保存网页，文件编码选择utf-8-->使用浏览器打开网页

（3）hbuilder

下载-->新建项目-->新建html页面-->运行页面

（4）vscode等等

4.HTML网页基本结构

标签：

单标签：<标签名/>

双标签：<标签名>内容</标签名>

网页基本结构：

<html>         <!--根标签，网页上所有的定义都要放在根标签中-->
    <head>     <!--头部标签，定义网页的头部，用于对网页文档进行配置，可写网页标题，引入css，js文    
               件-->
               <!--定义网页内容的字符编码，定义搜索引擎的相关内容，且其中内容不会在浏览器窗口中 
               直接呈现-->
               
        <title></title>   <!--标题标签,网页文档标题-->
    </head>
    <body>   <!--身体标签，网页中要呈现在浏览器主窗口的内容-->

    </body>
</html>

5.HTML常用标签

5.1 标签格式

使用<> 包起来

两类: 单标签/双标签

<标签名>标签体</标签名> 双标签

<标签名 /> 单标签

标签必须闭合，标签名字字母都用小写
必须正确的嵌套

5.2 常用标签

（1）h1-h6 内容标题标签，从h1-h6内容逐渐变小，不存在其他标题

（2）段落标签<p></p>：段落标签存在段间距，换行标签<br/>：换行，无端间距，分割线标签<hr/>：显示出一条水平线

（3）图像标签<img/>

<img src="图片来源(图片的路径地址)" alt="提示" width="宽度" height="高度" align="对齐方式"/>
src: 图片来源(相对路径或绝对路径)
相对路径：从当前位置出发到目标文件的位置
绝对路径：从根目录/盘符开始到目标文件位置
./代表当前目录，可以不写
../代表返回上一级目录
alt:图片无法显示时的提示信息
width:宽度
height:高度
align:设置对齐方式，设置文字环绕效果

（4）列表标签

注意的问题: ul,ol的二级节点必须是li ，不能是其他元素。li中可以嵌套其他内容，也可再次嵌套列表。

无序列表：列表项之间没有特定次序，默认显示为每列表项前有实心圆点

<ul>
 <li></li>
 <li></li>
 <li></li>
</ul>

有序列表：列表项有先后次序，每个列表项前会显示序号

<ol>
 <li></li>
 <li></li>
 <li></li>
</ol>

自定义列表

<dl>
 <dt></dt>  <!--列表标题-->
 <dd></dd>  <!--列表数据-->
 <dt></dt>
 <dd></dd>
</dl>

(5)标签<a></a>

href:链接的目标页面

target:指定页面打开的窗口

1)跳转页面

<!-- 跳转网络地址 -->  
 <a href="http://www.baidu.com">百度</a>  
 <!-- 本地网页 -->  
 <a href="123.html">123.html</a>

2）锚点：使用命名锚点可以快速的链接到同一个网页或指定网页中的某个位置

锚点的实现:
  方式一:
    使用a标签的name属性定义锚点:<a name="锚点名字">内容</a>
    跳转到锚点: <a href="#锚点名字">内容</a>

  方式二：
    使用任意标签的id属性定义锚点: <h1 id="锚点名字">内容</h1>
    跳转到锚点: <a href="#锚点名字">内容</a>

（6）文本标签

<font size="大小" color="颜色" face="字体类型">字体内容</font>
<i></i> 倾斜
<b></b> 加粗
<u></u> 下划线
<sup></sup> 上标
<sub></sub> 下标

（7）音频audio、视频video标签

src：音频路径

autoplay：自动播放，并非所有浏览器都支持

controls：音频添加控制条

src：视频路径

autoplay：自动播放，并非所有浏览器都支持

controls：视频添加控制条

（8）table表格

tr：行，一个tr中嵌套几个td就是几列。每一行的列数都一样，除非单元格合并

td：单元格。内容写到td里。

th:单元格，但是一般用于表头，加粗居中

<table>
 <th></th>
 <tr>
  <td></td>
  <td></td>
  <td></td>
 </tr>
 <tr>
  <td></td>
  <td></td>
  <td></td>
 </tr>
</table>

（9）特殊字符

&lt:小于号（<）

&gt:大于号（>）

&nbsp:空格

&copy:版权（©）

&reg:注册商标（®）

mxz_l

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础

html基础知识
复制链接

扫一扫