这篇博客介绍了前端开发的基础知识，包括HTML的结构标准，如标题、段落和文本标签；CSS的样式标准，用于设置网页布局和内容样式；以及JS的行为标准，负责网页交互。内容详细讲解了HTML的标签语法，如标题、段落、文本效果、图片、超链接、列表和输入框等，并提到了CSS的选择器和样式设置方法。
day1-前端基础
index
(1) 网页的技术结构：HTML、CSS、JS(javascript)
- HTML(结构标准) - 提供网页内容（通过不同的标签提供不同的内容）
- CSS(样式标准) - 负责网页内容的样式布局
- JS(行为标准) - 负责控制网页内容变化
(2) HTML - 超文本标记语法
- 一个网页就是一个html，html代码一般写在可以被浏览器直接解析的html文件中
- html基本结构：一个html标签里面包含一个head标签和一个body标签
- html标签 - 代表整个网页
- head标签 - 网页顶部负责显示网页图标和标题的部分（还负责不可见的设置性的内容）
- body标签 - 负责网页内容的显示
- 标签语法：html是通过不同的标签来提供不同的网页内容，标签从结构上来讲分为两种：
- a. 双标签: <标签名 属性名1=属性值1 属性名2=属性值2 …>标签内容</标签名>
- b. 单标签: <标签名 属性名1=属性值1 属性名2=属性值2 …>、 <标签名 属性名1=属性值1 属性名2=属性值2 …/>
说明：
-
a. 标签名和<以及>之间不能有空隙（注意空隙）
-
b. 属性值不管是什么类型的数据都必须使用双引号引起来
-
c. 双标的标签内容可以是任何内容：包括纯文字、也可以是一个或者多个标签或者是文字和标签的混 合
-
d. 标签名不是由程序员自己创建的，而是html提供的
<!-- html版本说明： html表示的就是html5 -->
<!DOCTYPE html>
<!-- 网页基本结构 -->
<html>
<head>
<!-- 设置网页编码方式 -->
<meta charset="utf-8" />
<!-- 设置网页标题 -->
<title>hello world</title>
</head>
<body>
</body>
</html>
1.header中的标签
<!DOCTYPE html>
<html>
<head>
<!-- 1.设置编码方式 -->
<meta charset="utf-8">
<!-- 2.设置网页标题 -->
<title>head中的标签</title>
<!-- 3.设置网页图标 -->
<link rel="icon" type="image/ico" href="img/jd_logo.ico"/>
<!-- <link rel="stylesheet" type="text/css" href=""/> -->
<!-- <style type="text/css">
</style> -->
<!-- <script type="text/javascript">
</script> -->
</head>
<body>
</body>
</html>
2.文本标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 1.标题标签：h1~h6 -->
<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>
</html>
3.图片和超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 1. 图片标签: img
1）src属性：设置图片地址（可以是本地的，也可以是网络的）
2）title属性：设置图片标题（鼠标停留在图片上才会显示）
-->
<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" >
<!-- 2. 超链接: a -->
<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>
4.列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 1. 无序列表: ul-li -->
<ul>
<li>python</li>
<li>java</li>
<li>h5</li>
<li>UI</li>
</ul>
<!-- 2. 有序列表: ol-li -->
<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>
5.input 标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 1. 普通输入框
1）value属性 - 输入框中的内容
2）
-->
<input type="" value="小明" placeholder="请输入姓名"/>
<input type="text" value="" />
<!-- 自带清除按钮 -->
<input type="search" value="" placeholder="搜索电影,电视剧"/>
<input type="password" name="" />
<br><br>
<!-- 2. 单选按钮 -->
<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>
<!-- 3. 复选按钮 -->
<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>
<!-- 4.普通按钮 -->
<input type="button" name="" id="" value="确定" />
<button type="button">取消</button>
<button type="button"><img src="img/kaishi.png" ></button>
<br><br>
<!-- 5.其他功能 -->
<input type="color" name="" id="" value="" />
<input type="file" name="" id="" value="" />
<input type="date">
<input type="datetime-local" name="" id="" value="" />
</body>
</html>
6.div 标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- div标签：
1. 作为普通双标签提供内容
2. 作为一个盒子对网页中的内容进行分块、分组
-->
<div id="">
当日新增治愈出院病例44例，解除医学观察的密切接触者2488人，重症病例较前一日增加5例。
</div>
<div id="">
境外输入现有确诊病例720例（其中重症病例14例），现有疑似病例1例。累计确诊病例7709例，累计治愈出院病例6989例，无死亡病例。
</div>
</body>
</html>
7.css 语法
<!--
css（cascading style sheet, 层叠样式表）是用来给标签添加样式和布局的
1. css语法
选择器{属性1:属性值1; 属性2:属性值2; ...}
说明：
1）选择器 - 选择需要添加样式的标签。（如果是内联样式 选择器{} 需要省略）
2）属性 - 属性名是由css决定的，不同的属性表示不同的样式
常用属性：color - 文字颜色; background-color - 背景颜色； font-size - 字体大小
width - 宽度；height - 高度；border - 边框；...
2. css代码的位置
1）内联样式表：将css代码写在标签的style属性中
2）内部样式表：将css代码写在style标签中
3）外部样式表：将css代码写在css文件中，然后再html中通过link标签导入
-->
<!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>
8.选择器
<!--
选择器的作用: 选中网页中的标签
1. 标签选择器(元素选择器) - 直接将标签名作为选择器，选中所有指定标签
例如：a{} - 选中所有的a标签； p{} - 选中所有的p标签
2. id选择器 - 在id属性值前加#作为一个选择器，选中id属性值为指定值的标签(同一页面中id是唯一的)
例如：#p{} - 选中id属性值为p的标签
3. class选择器(类选择器) - 在class属性值前加.作为一个选择器，选中所有class属性值是指定值的标签
例如：.p{} - 选中class属性值为p的标签
4. 群组选择器 - 将多个选择器用逗号隔开作为一个选择器，选中用逗号隔开的每个选择器选中所有标签
例如：p,#p1,.c1{} - 选中所有的p标签和id是p1的标签和class是c1的标签
5. 后代选择器 - 多个选择器用空格隔开
例如：div p{} - 选中所有div后代的p标签（选中所有div里面的p标签）；div和p之间是后代关系
6. 子代选择器 - 多个选择器用>隔开
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 1. 标签选择器(元素选择器) */
/* p{
color: red;
} */
/* a{
color: red;
} */
/* 2. id选择器 */
/* #p1{
color: #2E8B57;
} */
/* 3. class选择器(类选择器) */
/* .c1{
color: red;
} */
/* 4. 群组选择器 */
/* p,.c1{
color: red;
} */
/* div p{
background-color: yellowgreen;
} */
/* div>p{
background-color: yellowgreen;
}
*/
/* .c2{
color: red;
} */
/* 选中同时拥有class值为c1和c2的标签 */
.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>
752
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
