实习⽇志day01基础html标签及css 1.html
1.1html结构
<!DOCTYPE html>
<!-- HBuilder不会⾃动保存，需要ctrl+S -->
<html>
<!-- head ⽹页头部:⼀般会引⼊css,js，直接写⼀些样式 -->
<!-- 标注⽅法：ctrl+/ -->
<head>
<!-- utf-8 ⽹页编码格式 -->
<meta charset="utf-8" />
<!-- ⽹页标题 -->
<title>妍华</title>
</head>
<!-- body ⽹页主体 -->
<body>
</body>
</html>
1.2调取框架
调取框架：英⽂状态且html内⽆任何代码的情况下下输⼊！后再点击tab键
1.3基础html标签
标题标签
<h1>1 ⼀个⽹页之中只能拥有⼀个h1标签</h1>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>
段落标签：p标签 每打完⼀段⽂字就会⾃动就⾏换⾏
<p>我是段落标签</p>
⾏内元素：span标签 属于⾏内元素，不会⾃动进⾏换⾏
<span>⾏内元素</span>
超链接
<a href="pt.1000phone/livingRoom?classroomId=1090&courseId=325">我是外部链接</a> <a href="one.html">我是内部链接</a>
按钮标签
<button type="button">确定按钮</button>
⽂本标签分为 单标签/双标签
⽂本框标签
<input type="text" placeholder="⼿机号/邮箱号/QQ"/>
placeholder 提⽰⽂字
密码⽂本框
<input type="password" name="" placeholder="请输⼊密码"/>
按钮
<input type="button" value="按钮"/>
⽇期框
css鼠标点击样式
<input type="date" />
滑块
<input type="range" />
复选框
<input type="checkbox" />黄焖鸡<br>
<input type="checkbox" />酸菜鱼<br>
<input type="checkbox" />啤酒鸭<br>
时间框
<input type="time" />
导⼊图⽚：src是引⽤图⽚路径的意思<img src="img/_PAY03%7BJ8A364(NT%254K7MZ2.jpg" >视频标签 ：视频标签必须要加视频播放器 controls
<video src="img/MP4.mp4" controls="controls" ></video>图⽚，视频都可通过设置来设置⼤⼩，只设置宽度或者⾼度能让其锁定⾳乐标签： ⾳乐标签必须要加⾳频播放器 controls
<audio src="img/YELLOW.mp3" controls="controls"></audio>
有序标签：前⾯带数字的就是有序列表
<ol>
<li>乘风破浪的们</li>
<li>张⾬绮</li>
<li>万茜</li>
</ol>
⽆序列表
<ul>
<li>⼩⽶</li>
<li>华为</li>
<li>OPPO</li>
</ul>
2.CSS
2.1选择器
1.标签选择器 - 选择到标签进⾏样式添加
标签选择器常⽤于清除样式，或者⽤于⽐较少的标签来使⽤ ，想要添加属性必须要在标签的后⾯添加⼤括号
2.id选择器 - 调⽤⽅法是前⾯添加#来进⾏调⽤
id是唯⼀性 只能调⽤⼀次 ⽤作js计算时进⾏调⽤
3.类型选择器 - 调⽤⽅法需要class命名然后在写样式的时候前⾯加.命名添加样式
4.派⽣选择器/后代选择器 (⽗级/⼦类)选择
优先级关系 id>class>标签名
div盒⼦模型
div是⼀个三⽆标签 没有⾼度，没有宽度，没有颜⾊
<title>选择器</title>
<style>
/* 1.标签选择器 - 选择到标签进⾏样式添加 */
/* 标签选择器常⽤于清除样式，或者⽤于⽐较少的标签来使⽤ */
/* 想要添加属性必须要在标签的后⾯添加⼤括号 */
div{
width: 200px;
height: 200px;
background: plum;
}
/* 2.id选择器 - 调⽤⽅法是前⾯添加#来进⾏调⽤ */
/* id是唯⼀性只能调⽤⼀次⽤作js计算时进⾏调⽤ */
#box{
background: red;
}
/* 3.类型选择器 - 调⽤⽅法需要class命名然后在写样式的时候前⾯加.命名添加样式 */
.one{
background: yellow;
}
/* 4.派⽣选择器/后代选择器 (⽗级/⼦类)选择 */
#box .one{
width: 100px;
height: 100px;
background: blue;
}
/* 优先级关系 id>class>标签名 */
</style>
</head>
<body>
<a href="index.html">淡黄的长裙，蓬松的头发</a>
<!-- div=盒⼦模型 -->
<!-- div是⼀个三⽆标签没有⾼度，没有宽度，没有颜⾊ -->
<div>盒⼦1</div>
<div id="box">盒⼦2</div>
<div class="one">盒⼦3</div>
<div id="box">盒⼦4
<div class="one">盒⼦5</div>
</div>
</body>
2.2添加样式
添加样式的三种⽅式
1.在标签后⽅ style 添加
2.在 head ⾥⾯ style 添加
在项⽬提交测试的时候项⽬发⽣变化，需要调整那么会采⽤前两种的⽅式调整，让别的页⾯不受影响3.链接形式
<link rel="stylesheet" type="text/css" href="../css/style.css"/>
css⽂件要和html链接起来
link来进⾏链接加在head⾥⾯
2.3css基本样式

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。