学习笔记记录之HTML

最新推荐文章于 2024-07-13 19:38:58 发布

Mini_ymy

最新推荐文章于 2024-07-13 19:38:58 发布

阅读量135

点赞数

文章标签： html 学习前端

本文链接：https://blog.csdn.net/Mini_ymy/article/details/128688823

版权

学习笔记记录-自用

写在前面___一些定义：

1.HTML：超文本标记语言

2.常用浏览器：IE、火狐、谷歌、Safari、Opera

3.浏览器内核（读取网页内容）：Webkit、Blink

4.web标准构成：

结构、表现、行为（三者相分离）

结构写到HTML文件中，表现写到CSS文件中，行为写到JS文件中

5.常用的开发工具：vscode

<!DOCYYPE>文档类型声明标签，表示文档类型是HTML5版本
lang语言：en英文 zh-CN中文
字符集：在<head></head>内，通过<meta>标签charset属性来规定。

charset：GB2315简体中文 BTG5繁体中文 GBK：繁简体中文 UTF-8万国码

<meta charset="UTF-8"/>（不写的话有乱码风险）

正文

一、HTML语法规范

<html></html>双标签 <br/>单标签

包含关系：

并列关系：

二、HTML基本结构标签

<html></html> 根标签（最大的标签）

<head></head> 文档的头部

<title></title> 文档的标题

<body></body> 文档的主体

三、HTML常用标签

标签语义（根据语义标签让页面结构更清晰）

1.标题标签：文字加粗；作为标题，分六级，文字大小依据重要性递减

<h1>第一级标题</h1>
<h2>第二级标题</h2>
<h3>第三级标题</h3>
<h4>第四级标题</h4>
<h5>第五级标题</h5>
<h6>第六级标题</h6>

2.段落标签： <p></p> 每段分别添加

3.换行标签： <br/> 打断，换行。（单标签）

4.文本格式化标签：

加粗	<strong></strong>	<b></b>
倾斜	<em></em>	<i></i>
删除线	<del></del>	<s></s>
下划线	<ins></ins>	<u></u>

5.<div>和<span>布局盒子

<div></div>一行只能放一个
<span></span>一行可放多个

6.图像标签和路径

<img src="tuxiang.jpg"/>

（1）图像标签属性

src（必须写）	指定路径和文件名
alt	图片显示不出来时替换文本
title	鼠标放在文件上提示的文字
width	给图像设定宽度
height	给图像设定高度
border	给图像设定边框

图像标签属性注意点：

属性要放在标签名后面
属性之间不分顺序，但要以空格分开
属性采取键值对格式

（2）图像标签路径（明确目标文件夹和根目录）

相对路径：
相对路径符号
同一级路径
下一级路径 /
上一级路径 ./
绝对路径：一般使用网络上的绝对地址

相对路径符号
同一级路径
下一级路径	/
上一级路径	./

7.超链接标签

<a href="链接">需链接文字</a>

（1）href（跳转目标）属性

外部链接：一般以http：开头
内部链接：内部网站中的跳转
空链接：未完成的链接
下载链接：链接的是.exe或.zip等压缩包形式
锚点链接：快速定位到页面中的某个位置（格式：用#链接，目标中赋id值）

链接点：<a href="#mubiao">这是我的目标</a>
目标：<p id=“mubiao”>这是我的目标</p>

（2）target属性：指定打开方式，在当前页面打开/另外启动窗口打开

默认：-self 新窗口打开：-blank

四、注释和特殊字符

1.注释：以""结束，vscode的快捷键：ctrl+/

（不执行和不现实，给工作人员看）

2.特殊字符

如：空格  大于号&gt 小于号&lt

五、表格标签

1.表格的基本语法

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

2.表头单元格标签:<th>

3.表格属性(写在<table>里）

align	对齐方式， left、center、right
border	边框，1或“”
cellpadding	文字与边框距离
cellspacing	单元格之间距离
width	宽度
height	高度

4.表格结构标签