HTML5 语法基础标签表格标签

最新推荐文章于 2022-04-16 20:14:42 发布

把星星偷给你

最新推荐文章于 2022-04-16 20:14:42 发布

阅读量561

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/weixin_49089045/article/details/108418410

版权

HTML5基础知识

1.HTML

超文本标记语言

2.浏览器

浏览器	内核
Chrome	Blink
IE	Trident
firefox	Gecko
Safari	Webkit

3.web标准

由W3C组织和其他标准化组织制定的一系列标准的集合。

Web标准的构成

标准	说明
结构	用于对网页元素进行整理和分类，主要学HTML
表现	用于设置网页元素的板式，颜色，大小等外观样式，主要是CSS
行为	指网页模型的定义及交互的编写，主要是JavaScript

HTML语法规范

双标签 < html> < /html>

单标签 `<br/>`

包含关系

 < head >
      <title> </title>

 < /head>

并列关系

< head ></head>
< body ></body>

HTML基本结构标签

<html>
   <head>
       <title>我的第一个页面</title>
   </head>
   <body>
      你我之间，黑马洗脸，月薪过万，一飞冲天
   </body>
</html>

1.文档类型声明标签

<!DOCTYPE html>

位于文档中最前面的位置，处于标签之前
- 不是一个HTML标签，他就是文档类型声明标签

2.lang语言种类

用来定义文档显示的语言

en为英语
- zh-CN 为中文

3.字符集

在标签内，可通过标签的charset属性来规定HTML文档应该使用哪种字符编码

<meta charset="UTF-8"/>
- UTF-8被称为万国码

HTML常用标签

1.标题标签

```
<h1>-<h6>
<h1>我是一级标签</h1>
```

2.段落和换行标签

`<p>我是一个段落标签</p>`

<br />

换行标签
单标签

3.文本格式化标签

语义	标签
加粗	`<strong></strong>`
倾斜	`<em></em>`
删除线	`<del></del>`
下划线	`<ins></ins>`

4.< div >和< span >标签

是没有语义的，他们就是一个盒子，用来装内容

<div>这是头部</div>
<span>今日价格</span>

< div >标签用来布局，但一行只能放一个< div >,大盒子
< span >用来布局，一行可以多个< span >。小盒子

5.图像标签和路径
1.图像标签
<img src="图像URL" />

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，图像不能显示的文字
title	文本	提示文本，鼠标放到图像上，显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

注意点

可以拥有多个属性，必须写在标签后面
属性之间不分先后顺序，用空格分开
属性采取键值对的格式，即key=""

2.路径
目录文件夹和根目录：
目录文件夹：普通文件夹，放相关素材
根目录：打开目录文件夹的第一层就是根目录

1.相对路径

图片相对于HTML页面的位置

相对路径分类符号说明
同一级如< img src=“baidu.gif” />
下一级 / < img src=“images/baidu.gif /”>
上一级 …/ < img src="…/baidu.gif /">

相对路径分类	符号	说明
同一级		如< img src=“baidu.gif” />
下一级	/	< img src=“images/baidu.gif /”>
上一级	…/	< img src="…/baidu.gif /">

2.绝对路径

6.超链接标签
1.链接的语法格式
<a herf="跳转目标" target="目标窗口的弹出方式"> 文本或图像</a>

属性	作用
href	用于指定链接目标的url地址
target	指定链接页面的打开方式，其中_self为默认值,__blank为在新窗口中打开方式

2.链接分类：

外部链接
内部链接
- 网站内部页面之间的链接，直接链接内部页面名称，例如< a href=“index.html”>首页
空链接
<a href="#">名称</a>
下载链接
网页元素链接
锚点链接
- 当我们点击链接，可以快速定位到页面中的某个位置
  - 在链接文本href属性中，设置属性值为#名字的形式，如<a href="#two">第2集</a>
  - 找到目标位置标签，里面添加一个id属性=刚才的名字，如<h3 id="two">第2集介绍</h3>

HTML中的注释和特殊字符

< !--注释语句-->
快捷键：ctrl + /

特殊字符

特殊符号	描述	字符代码
	空格	& nbsp;
<	小于	& lt;
>	大于	& gt;
&	和号	& amp;
¥	人民币	& yen;
®	注册商标	& reg;
℃	摄氏度	& deg;
±	正负号	& plusmn;
×	乘号	& times;
÷	除号	& divide;
²	平方	& sup2;
³	立方	& sup3;

表格标签

1.基本语法

<table>
   <tr>
     <td>单元格内文字</td>
     ...
   </tr>
  ...
</table>

<table></table>定义表格标签
<tr></tr>定义表格中的行
<td></td>定义表中的单元格，必须嵌套在标签中

2 . 表头单元格标签

<th>
位于表格第一行，会加粗居中显示

3.表格属性

属性名	属性值	描述
align	left,center,right	定义表格相对周围元素的对齐方式
border	1或""	是否需要边框，""默认没有边框
cellpadding	像素值	单元边沿与其内容之间的空白，默认1像素
cellspacing	像素值	单元格之间的空白，默认2像素
width	像素值或百分比	表格的宽度