HTML学习笔记（一）——基础标签及常用编辑器技巧
HTML
初识html
什么是html？
- html是超文本标记语言（hyper text markup language）
html5的基本结构
<!DOCTYPE html>
<!--DOCTYPE 即文本类型，说明这是一个标准的HTML5文档-->
<!--<html></html>标签是文档的根标签-->
<!-- 标签有双标签和单标签 -->
<html>
<head>
<!-- head用于对网页的说明 ，不会显示在网页中-->
<meta charset=utf-8 /> <!--告诉浏览器改网页的编码为utf-8的格式-->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>document</title>
</head>
<body>
<!--body中为页面的内容，是网页显示的部分-->
</body>
</html>
html常用标签
标题标签(h1——h6)
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
段落标签(p)
<p>这是一段文章</p>
图片标签(img)
<img src="url" alt="鼠标悬浮显示的文字">
列表标签
无序列表(ul,li)
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
有序列表(ol)
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>
有序与无序仅仅只是默认的css样式不通
链接标签(a)
<!--页面外跳转-->
<a href="http://www.baidu.com" target="_blank" rel="noopener noreferrer">百度一下</a>
<!-- target=“_blank”设置从空白页打开 -->
<!--页面内跳转-->
<a href="#content"></a>
容器标签(div)
<div></div>
表单标签
<form action="" method="GET">
<input type="password" name="password" id="">
<input type="text" name="text" id="">
<input type="submit" value="提交">
</form>
<form action="https://www.baidu.com/s" target="_blank" method="GET">
<input type="text" name="wd" placeholder="请输入内容">
<input type="submit" value="提交">
</form>
编辑器技巧(vscode或hbuilderX)
<!-- div*3 -->
<div></div>
<div></div>
<div></div>
<!-- div{content$}*3 -->
<div>content1</div>
<div>content2</div>
<div>content3</div>
<!-- ul>li{list$}*3 -->
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
