前端基础知识
index
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hello world</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>================1. 标题标签=================</h1>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!-- 2.段落标签: p -->
<h1>================2. 段落标签=================</h1>
<p>8月10日凌晨5点,《乡村爱情变奏曲》导演周英男发长文悼念因车祸去世的于月仙,一共3200余字,读来令人泪奔。</p>
<p>周英男表示,到了凌晨两点多,他仍然无法入睡,翻看和于月仙的聊天记录,回忆昔日点点滴滴,他甚至已经忘记自己是第几次落泪了。</p>
<p>早在6日,周英男的姑妈因癌症去世,8日刚刚出殡,9日中午他醒来后,就收到朋友发来的消息,最初甚至还以为是噩梦。直到下午接到师父刘流的电话,才不得不面对事实。</p>
<p>数据</p>
<p>分析</p>
<!-- 3.普通的文本标签(行内文本标签): font、span、label -->
<h1>================3. 行内文本标签=================</h1>
<span>发布时间: 08-10</span>
<span>06:25</span> <br><br><br>
<span>娱乐领域创作者</span>
<!-- 4.文字效果相关标签和符号
加粗:b、strong
倾斜:i、em
换行:br (在代码中直接按回车换行无效)
空格:   (不是标签是符号)
-->
<h1>================4. 文字效果相关标签和符号=================</h1>
<b>当日新增治愈出院病例44例,解除医学观察的密切接触者2488人,重症病例较前一日增加5例。</b>
<p> 截至8月9日24时,据31个省(自治区、直辖市)和<b>新疆</b>生产建设兵团报告,<br>
  现有确诊病例1702例(其中重症病例54例),<br>
累计治愈出院病例<i>87631</i>例,累计死亡病例<em>4636</em>例,<br>
累计报告确诊病例93969例,现有疑似病例2例。<br>
累计追踪到密切<strong>接触者</strong>1131521人,<br>
尚在医学观察的密切接触者49980人。</p>
</body>
文本标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>================1. 标题标签=================</h1>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<h1>================2. 段落标签=================</h1>
<p>8月10日凌晨5点,《乡村爱情变奏曲》导演周英男发长文悼念因车祸去世的于月仙,一共3200余字,读来令人泪奔。</p>
<p>周英男表示,到了凌晨两点多,他仍然无法入睡,翻看和于月仙的聊天记录,回忆昔日点点滴滴,他甚至已经忘记自己是第几次落泪了。</p>
<p>早在6日,周英男的姑妈因癌症去世,8日刚刚出殡,9日中午他醒来后,就收到朋友发来的消息,最初甚至还以为是噩梦。直到下午接到师父刘流的电话,才不得不面对事实。</p>
<p>数据</p>
<p>分析</p>
<h1>================3. 行内文本标签=================</h1>
<span>发布时间: 08-10</span>
<span>06:25</span> <br><br><br>
<span>娱乐领域创作者</span>
<h1>================4. 文字效果相关标签和符号=================</h1>
<b>当日新增治愈出院病例44例,解除医学观察的密切接触者2488人,重症病例较前一日增加5例。</b>
<p> 截至8月9日24时,据31个省(自治区、直辖市)和<b>新疆</b>生产建设兵团报告,<br>
  现有确诊病例1702例(其中重症病例54例),<br>
累计治愈出院病例<i>87631</i>例,累计死亡病例<em>4636</em>例,<br>
累计报告确诊病例93969例,现有疑似病例2例。<br>
累计追踪到密切<strong>接触者</strong>1131521人,<br>
尚在医学观察的密切接触者49980人。</p>
</body>
</html>
图片和超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>--------------1. 图片标签----------------</h1>
<img src="img/luffy4.jpg" title="路飞">
<img title="宝儿姐" src="https://img2.baidu.com/it/u=1810171082,1266198879&fm=26&fmt=auto&gp=0.jpg" >
<h1>--------------2. 超链接----------------</h1>
<a href="https://www.baidu.com">百度</a>
<a href="https://www.jd.com">
<img src="img/baidu.ico" >
</a>
<a href="https://www.jd.com">
<div id="">
<img src="img/baidu.ico" alt="">
<p>一段文字</p>
</div>
</a>
</body>
</html>
列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li>python</li>
<li>java</li>
<li>h5</li>
<li>UI</li>
</ul>
<ol>
<li>
<img src="./img/baidu.ico" >
python
</li>
<li>
<img src="img/luffy4.jpg" >
java
</li>
<li>
<a href="https://www.baidu.com">h5</a>
</li>
<li>
UI
</li>
</ol>
</body>
</html>
input
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="" value="小明" placeholder="请输入姓名"/>
<input type="text" value="" />
<input type="search" value="" placeholder="搜索电影,电视剧"/>
<input type="password" name="" />
<br><br>
<input type="radio" name="sex" id="s1" value="" /><label for="s1">男</label>
<input type="radio" name="sex" id="s2" value="" /><label for="s2">女</label>
<br><br>
<input type="checkbox" name="ins" id="i1" value="" /><label for="i1">篮球</label>
<input type="checkbox" name="ins" id="i2" value="" /><label for="i2">乒乓球</label>
<input type="checkbox" name="ins" id="i3" value="" /><label for="i3">羽毛球</label>
<br><br>
<input type="button" name="" id="" value="确定" />
<button type="button">取消</button>
<button type="button"><img src="img/kaishi.png" ></button>
<br><br>
<input type="color" name="" id="" value="" />
<input type="file" name="" id="" value="" />
<input type="date">
<input type="datetime-local" name="" id="" value="" />
</body>
</html>
div
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="">
当日新增治愈出院病例44例,解除医学观察的密切接触者2488人,重症病例较前一日增加5例。
</div>
<div id="">
境外输入现有确诊病例720例(其中重症病例14例),现有疑似病例1例。累计确诊病例7709例,累计治愈出院病例6989例,无死亡病例。
</div>
</body>
</html>
css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<p style="color: cornflowerblue; font-size: 25px;">我是段落1</p>
<style type="text/css">
span{
color: seagreen;
border: 1px solid deeppink;
}
</style>
<span>我是span1</span>
<a href="https://www.baidu.com">百度</a>
</body>
</html>
选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.c1.c2{
color: red;
}
</style>
</head>
<body>
<h1>我是标题1</h1>
<div>
<p class="c1 c3 c2">我是段落1</p>
<a href="" class="c2">我超链接1</a>
<p id="p1">我是段落2</p>
<span>
<p>我是段落5</p>
</span>
<div id="">
<span class="c1">
我是span1
</span>
<p>我是段落3</p>
<a href="">我是超链接2</a>
</div>
<a class="c1" href="">我是超链接3</a>
</div>
<p>我是段落4</p>
</body>
</html>