HTML是构建网站的基础,作为一个刚刚入门前端的新人 ,系统学习HTML知识非常必要。这篇笔记主要分享一下我在青训营学习HTML的一些笔记和心得。
HTML使用标签来定义内容语义和结构。常用的基本标签包括:
<h1>到<h6>:不同级别的标题
<p>:段落
<img>:图片
<a>:链接
<ul>、<ol>:无序列表和有序列表
<table>:表格
不同级别的标题,h1用于最大级标题,h6最小。标题标签可以明确内容的层次结构。
p表示段落,一个段落内容推荐不要过多,否则会影响文档结构的清晰度。
img表示插入图片,通过src属性设置图片地址,alt属性给定替代文本。
a设置超链接,href属性指定链接目标,可以链接到外部页面或内部锚点。
ul or 无序列表和有序列表,配合li标签编制列表内容。列表可以表示并列信息。
标签属性可以定制元素显示样式,a中的href设置链接地址,img中的src指向图片资源,table中的border设置表格边框粗细等。属性通常写在开始标签内。
常见的属性包括:
- id/class:设置元素唯一id和class,用于CSS定位和JavaScript获取元素
- width/height:设置图片、表格等元素尺寸
- alt/title:指定元素替代和提示文本
- align:设置对齐方式
等等
HTML主要负责网页的内容和文档结构,页面的外观样式如颜色、字体、间距等则交给CSS样式表来定义。内容和表现的分离是较好的网页设计原则,可以使文档更易维护。 HTML和CSS分离可以内容和样式分离,可以使文档更加易于维护,变更样式只需调整CSS,不影响内容，可以让开发人员可以分工协作,前端专注内容,设计师专注样式，还可以让HTML文件体积更小,加载更快。将样式单独提取为CSS文件,也有利于网页性能。
贴一下Hello World的HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
Hello World
</body>
</html>
