Web前端——HTML5（视频学习第二期）-CSDN博客

本文链接：https://blog.csdn.net/KYX_2023/article/details/102586745

视频学习，请多包含！
在这里插入图片描述

一、HTML5元素

HTML元素语法：
元素内容是开始标签与结束标签之间的内容
空元素在开始标签中进行关闭
大多数HTML元素可拥有属性

二、HTML5属性

属性一般以键值对形式出现
如：href=“www.baidu.com”
常用标签属性：
＜h1＞：align ——对齐方式（居左、中、右）默认居左显示

<h1 align="left/center/right">欢迎来到SHOW空间</h1>

＜body＞：bgcolor——背景颜色

<body bgcolor="#008b8b">

＜a＞：target——规定在何处打开链接
其中，target=“_blank” 表示在浏览器新页面打开链接；
target=“_self” 表示在当前页面打开链接
target=“_parent” 表示将链接载入父窗口
target=“_top” 表示在整个浏览器窗口打开链接

<a href="index01.html" target="_blank/_self/_parent/_top">跳转链接</a>

通用属性：
class:规定元素的类名
id：规定元素的唯一ID
style：规定顶元素的样式
title：规定元素的额外信息

三、HTML5格式化

<b>				定义粗体文本
<i>				定义斜体字
<big>				定义大号字
<small>			定义小号字
<em>				定义着重文字
<strong>			定义加重语气
<sub>				定义下标字
<sup>				定义上标字
<ins>				定义插入字
<del>				定义删除字
<!-- …… -->		注释
<hr/>				水平线

四、HTML5样式

标签：＜style＞样式定义
＜link＞资源利用
属性：rel=“stylesheet” 外部样式表
type=“text/css” 引入文档类型
margin-left：边距
三种样式表插入方法：
外部样式表

<link rel =“stylesheet” type=“text/css” href=“myCss.css”>
		资源				  类型			  位置

内部样式表：放在头文件
内联样式表

五、HTML链接

链接数据：文本链接、图片链接
属性：
href属性：指向另一个文档链接
name属性：创建文档内的链接
img标签属性
alt：替换文本属性
width：宽
height：高（px后缀名）

六、HTML表格

<table>					定义表格
<caption>				定义表格标题
<th>					定义表格的表头(会自动加粗)
<tr>					定义表格的行
<td>					定义表格的单元格
<thead>					定义表格的页眉
<tbody>					定义表格的主体
<tfoot>					定义表格的页脚
<col>					定义表格的列属性

七、HTML列表

有序列表：
标签：＜ol＞，＜li＞
属性：A，a，I，i，start
无序列表
标签：＜ul＞，＜li＞
属性：disc（实心圆），circle（空心圆），square（方块）
3.自定义列表
标签：＜dl＞——定义列表
＜dt＞——列表项
＜dd＞——词的意义描述

八、HTML块

HTML块元素
块元素在显示时，通常会以新行开始。如，＜h1＞＜p＞＜ul＞
HTML内联元素
内联元素通常不会以新行开始。如，＜b＞＜a＞＜img＞
HTML＜div＞元素
＜div＞元素也被称为块元素，其主要是组合HTML元素的容器
HTML＜span＞元素
＜span＞元素是内联元素，可作为文本的容器

九、HTML布局

使用＜div＞元素布局，＜div＞允许将一组元素集中到一起
使用＜table＞元素布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html基础</title>
</head>
<!--table元素布局-->
<body marginheight="0px">
   <table width="100%" height="950px" style="background-color: azure">
       <tr>
           <td colspan="2" width="100%" height="20%" style="background-color: darkcyan"></td>
       </tr>
       <tr>
           <td width="30%" height="30%" style="background-color: blueviolet"></td>
           <td width="70%" height="30%" style="background-color: darkolivegreen"></td>
       </tr>
       <tr>
           <td width="100%" height="20%" colspan="2" style="background-color: coral"></td>
       </tr>
   </table>
</body>
</html>