html标签与属性
html标签
注释
web的注释符号是： 快捷键ctrl+/
标题标签h&段落标签p
<!DOCTYPE html>
<html lang="en">
<head><!--head的开始标签-->
<meta charset="UTF-8"><!--meta是属性，写在开始标签内部，用来进一步描述标签的内容-->
<title>Title</title> <!--title标签用于显示网页的标题-->
</head><!--head的结束标签-->
<body><!--网页的内容写在body标签里-->
<!--标题标签-->
<!--标题标签一共有6级，数字越大，字号越小-->
<h1>hello world</h1>
<h2>hello world</h2>
<h3>hello world</h3>
<h4>hello world</h4>
<h5>hello world</h5>
<h6>hello world</h6>
<!--如图1-->
<h1>这是我的第一篇文章</h1>
<!--段落标签-->
<p>这是我的第一句话</p>
<p>这是我的第二句话</p>
<!--如图2-->
</body>
</html>
图1
图2
列表标签ul/ol/dl
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--无序列表-->
<!--列表标签ul 列表元素li-->
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>鸭梨</li>
</ul>
<!--一般ul里不放标题标签如h1-->
<!--有序列表-->
<!--列表标签ol 列表元素li-->
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>鸭梨</li>
</ol>
</body>
</html>
带有项目和描述的描述列表
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
<!--题外话：dd默认的margin-left为40px-->
</dl>
超链接标签a
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--超链接标签-->
<!--href属性：可以跳转到指定的地址或路径-->
<a href="https://www.baidu.com">跳转到baidu</a>
</body>
</html>
点击后会跳转到百度
图片标签img
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="https://www.baidu.com">跳转到baidu</a>
<!--图片标签-->
<!--src属性里的是图片的路径 如果加载失败会执行alt属性里的内容-->
<img src="" alt="图片加载失败...">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="https://www.baidu.com">跳转到baidu</a>
<!--如果图片在同级目录下，src里可以直接写图片名-->
<img src="keli.jpg" alt="图片加载失败...">
</body>
</html>
无语义标签
div
div一般是用来划分区域的，当代码多了，为了便于阅读用div来分类，跟注释一样没有实际效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<h1>hello world</h1>
<h2>hello world</h2>
<h3>hello world</h3>
<h4>hello world</h4>
<h5>hello world</h5>
<h6>hello world</h6>
<h1>这是我的第一篇文章</h1>
<p>这是我的第一句话</p>
<p>这是我的第二句话</p>
</div>
<div>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>鸭梨</li>
</ul>
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>鸭梨</li>
</ol>
<a href="https://www.baidu.com">跳转到baidu</a>
</div>
</body>
</html>
span
span也是用来划分区域的，只不过跟div划分整体（单个或者多个标签）的区域不同，span是用来划分单个标签里的区域，更注重细节
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<h1>这是我的第一篇文章</h1>
<!--想要对第一句话做些操作，如加粗变红色，第一步就是先把这四个字划分到一个区域中，故用到span-->
<p>这是我的<span>第一句话</span></p>
<p>这是我的第二句话</p>
</div>
</body>
</html>
html属性
src
src属性可以指定路径，如img标签中的图片路径
id
id属性可以给标签做个标记，以此来区分谁是谁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 id="title1">这是我的第一篇文章</h1>
<h1 id="title2">hello world</h1>
</body>
</html>
class
class属性可以给标签分类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--给p分成了hot和cool两类-->
<p class="hot">红</p>
<p class="hot">黄</p>
<p class="cool">篮</p>
<p class="cool">绿</p>
</body>
</html>
