HTML5

最新推荐文章于 2024-04-08 19:31:30 发布

1day.40

最新推荐文章于 2024-04-08 19:31:30 发布

阅读量159

点赞数 4

文章标签： html5 html css

本文链接：https://blog.csdn.net/weixin_71089247/article/details/126789812

版权

本文详细介绍了HTML5的基础知识，包括HTML5的定义、与CSS的关系、标签语法、head和body标签的使用。重点讲解了语义化标签如段落、span、标题和div，以及实现换行、空格、水平分割线和列表的效果。此外，还阐述了超链接和表格的基本用法，是学习HTML5入门的良好参考资料。

摘要由CSDN通过智能技术生成

HTML5

HTML5的介绍

1.HTML5的定义

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

2.HTML和CSS的关系

1.css是来修饰html样式的，html本身是有一些默认的样式的，但如果你想改变html的默认样式，你就需要借助css
例如:
<h1>Hello World!</h1>

这是一个非常普通的html标签
让我们看看经过css修饰过的html标签

h1{
           color:pink;
           border:2px solid blue;
       }

很明显经过css的修饰之后，字的颜色发生了变化，同增加了一个边框

3.标签语法

1.标签由英文的尖括号<和>括起来，html中的标签一般都是成双成对的出现，分开始标签和结束标签，结束标签比开始标签多了一个/。
例如：
<span></span>
<p></p>
2.标签与标签之间是可以嵌套的，但前后顺序必须一致
例如：

<div><p>这是一组嵌套的标签</p></div>

3.HTML的标签是不需要区分大小写的<H2>和<h2>是一样的

4.head标签

<!DOCTYPE html>
<html>
<head>
        <meta charset="UTF-8">
        <title>认识head标签</title>
        <style></style>
</head>
</html>

文档的头部描述了文档的各种属性和信息，包括文档的二标题等等，绝大多数文档头部包含的数据都不会真正的作为内容显示给读者
1.语法：**<head> </head>
2.head标签通常里面嵌套着<style>、<title>等标签使用

5.body标签

需要展示在网页上的内容需要放在body标签当中
例子：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>了不起的盖茨比</title>
</head>

<body>
    <!-- 标题标签 -->
    <h1>了不起的盖茨比</h1>
    <!-- 段落标签 -->
    <p>1922年的春天，一个想要成名名叫尼克•卡拉威（托比•马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的<span>美国梦</span>，他搬入纽约附近一海湾居住。</p>
    <!-- 段落标签 -->
    <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>
</body>

</html>

网页中就会显示出<body>标签中的内容

HTML5语义化标签

1.段落标签

语法：<p>段落文本</p>
一段文字一个<p>标签，如果你有多段文字，那么就需要多个<p>标签

2.`<span>`标签

语法：<span>文本</span>

<span>标签是没有语义的，他的作用就是为设置单独的样式

3.标题标签

文章的标题用<hx>标签来制作
标题标签一共有6种h1,h2,h3,h4,h5,h6分别为一级到六级标签
例子：

<body>
   <h1>一级标签</h1>
   <h2>一级标签</h2>
   <h3>一级标签</h3>
   <h4>一级标签</h4>
   <h5>一级标签</h5>
   <h6>一级标签</h6>
</body>

4.`<div>`标签

在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个<div>标签的作用就相当于一个容器。

语法：<div>......</div>

逻辑部分
什么是逻辑部分？它是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分。如下图所示：图中用红色边框标出的部分就是一个逻辑部分，就可以使用<div>标签作为容器。

HTML5效果、列表标签

1.换行效果

语法：
xthml1.o写法：
<br />
html4.01写法：
<br>
注意：在html代码种输入回车和空格都是没有做用的，在html中想回车换行必须输入<br>

2.空格效果

语法：
&nbsp
在html代码中输入空格是不起作用的，想要输入空格，必须使用&nbsp,一个&nbsp代表一个空格

3.水平分割线

语法：
xhtml1.0写法：
<hr>
html4.01写法：
<hr />
注意：<hr />标签和<br />标签一样，都是一个空标签，所以只有开始标签，没有结束标签

4.列表标签

1）无序列表
语法：

<ul>
  <li>第一条消息</li>
  <li>第二条消息</li>
  <li>第三条消息</li>
  <li>....../li>
</ul>

ul-li是没有前后顺序的一个列表标签

2）有序列表
语法：

<ol>
  <li>第一条消息</li>
  <li>第二条消息</li>
  <li>第三条消息</li>
  <li>......</li>
</ol>

HTML一些常用的标签

1.超链接标签

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

属性	作用
href	用于指定链接目标的url地址，（必须属性）当标签应用href属性时，它就具有了超链接的功能
target	用于指定链接页面的打开方式，其中_self为默认值当前窗口打开，_blank为在新窗口打开。

1.外部链接

<a href="http://www.baidu.com"> 百度 </a>
//外部链接的href属性要以：http:// 开头

2.内部链接

网站内部页面之间的相互链接，直接链接内部页面名称即可。
内部链接的href属性不需要以：http:// 开头

3.下载链接

如果href里面地址是一个文件或压缩包，会下载这个文件。

eg:<a href = "xxx.zip">需要下载的链接</a>

4.空链接

如果当没有确定链接目标时，即可使用空链接

<a href="#"> 空链接 </a>

5.网页元素链接

在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。

6.锚点链接

点击设定的链接，可以快速的定位到页面中的某个位置

2.表格标签

表格主要是用于显示、展示数据，可以让数据展示的规整，可读性好。
语法：
1.<table></table>是用于定义表格的标签。
2.<tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中。
3.<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
4.字母td指表格数据（table data），即数据单元格的内容。

<table>
    <tr>
        <td>
            <table>是表格，<tr>是行，<td>是单元格！！！
        </td>
    </tr>
</table>

表格属性

属性名	属性值	描述
align	left、center、right	规定表格相对周围元素的对齐方式
border	1或“”	规定表格单元是否拥有边框默认为“” 表示没有边框
cellpadding	像素值	规定单元边缘与其内容的边缘，默认为1像素
cellspacing	像素值	规定单元格之间的空白，默认为2像素
width	像素值或百分比	规定表格的宽度