HTML学习笔记----华为WEB前端全栈成长计划（一阶段）
发布时间：2024-12-20 18:01
一、HTML概述
HyperText MarkUp Language “超文本标记语言”
不区分大小写
标签 <>
①标签一般成对存在，也可以单独存在
②标签可以嵌套
③标签连同它里面的内容构成元素
④标签内部可以带有多个属性，属性与值之间用“=”连接，属性先后顺序无关
二、HTML5文件结构
<!DOCTYPE html> //文档类型：符合HTML5标准
<html lang="en"> //lang属性：语言形式
<head> 、- //头部：浏览器、搜索引擎所需信息
<meta charset="UTF-8"> //meta:元数据
//charset属性：字符集，字符编码方式
<title> </title>
</head>
<body> //主体：网页中包含的具体信息
</body>
</html>
HTML编辑方式：
1、记事本
①新建文件夹
②新建文本文档，写入HTML文本结构
③修改文本文档后缀 （.html)后保存运行
2、Sublime Text3 emmet插件
3、WebStorm (工程级别)
三、HTML基本标签
1、标题
(一个页面建议只有一个h1)
…
2、标签 段落内容
&nshop 空行
预留格式 （保留空格和换行）
组合行内元素，以便通过CSS样式来格式化
注释 (可跨行)
文字或图片超链接
eg：
<a href="news.html">新闻</a> // 链接到本站点的其他网页
<a href="http://www.baidu.com">百度</a> //链接到其他站点，需要带有协议部分（http）！！
<a herf="#">板块二</a> //虚拟超链接
JPG：有损压缩，色彩丰富透明
GIF：简单动画、背景透明
PNG：无损压缩、透明、交错、动画
eg：
<img src="C:/site/logo.gif" /> //绝对路径
<img src="logo.gif" /> //相对路径
align:代表样式
列表项
表格
<table border="1"> border:边框属性
<tr>
<th>表头</th>
<th>表头</th>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
</table>
表单元素
action：表示收集来的数据交由哪一个页面来处理(Web系统后端)
文本框密码框提交按钮 (value：按钮中的文字信息)重置按钮单选框复选框
（value：表示要提交到后端的数据 name：表示当前这一下项它的名字 checked：表示该选项被默认选中）
7.下拉列表框
<select>
<option>选项1</option>
<option selected="selected" >选项2</option>
</select>
selected:默认被选中的那一项
Web语义化
内容 强调（斜体）
内容 重点强调（加粗）
自定义列表
<dl> //列表
<dt>HTML</dt> //列表项
<dd>超文本标记语言</dd> //描述
<dt>CSS</dt>
<dd>层叠样式表</dd>
</dl>