1.HTML
- HyperTextMarkupLanguage超文本标记语言
- 标记语言特点:
<开始标签 属性名="值">标签体</结束标签>
<单标签>- 作用: 负责搭建页面结构和准备页面内容 ,相当于是盖房子(毛坯房)
- 学习HTML主要学习的就是有哪些标签,以及标签的使用方式
1.1文本相关标签
- 内容标题h1-h6
- 特点: 独占一行, 字体加粗, 自带上下间距
- 水平分割线 hr
- 段落标签p
- 特点: 独占一行, 自带上下间距
- 加粗b
- 斜体i
- 下划线u
- 删除线s
- 换行br
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本相关标签</title>
</head>
<body>
正常字体
<!-- align剧中 -->
<h1 align="center">内容标题1</h1>
<h2 align="right">内容标题2</h1>
<h3>内容标题3</h1>
<h4>内容标题4</h1>
<h5>内容标题5</h1>
<h6>内容标题6</h1>
<hr>
<p>段落标签1</p>
<p>段落标签2</p>
<p>段落<br>标签3</p>
加粗 <b>标签</b><br>
斜体 <i>标签</i><br>
下划线 <u>标签</u><br>
删除线 <s>标签</s><br>
<hr>
<h1>列表标签</h1>
<h2>无序列表</h2>
</body>
</html>1.2列表标签
- 无序列表: ul 和 li
- 有序列表: ol 和 li
- 列表嵌套: 有序列表和无序列表可以任意无限嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本相关标签</title>
</head>
<body>
<ol><!-- ordered list -->
<li>java语言基础
<ol>
<li>变量</li>
<li>数据类型</li>
<li>运算符</li>
</ol>
</li>
<li>javaAPI</li>
<li>Web前端
<ul>
<li>html</li>
<li>CSS</li>
<li>javaScript</li>
</ul>
</li>
</ol>
</body>
</html>1.3图片标签img
- src: 资源路径
- 相对路径: 访问站内资源时使用
- 页面和图片在同级目录: 直接写图片名
- 图片在页面的上级目录: ../图片名
- 图片在页面的下级目录: 文件夹名/图片名
- 绝对路径: 访问站外资源路径时使用,又称为图片盗链, 存在找不到图片的风险
- 相对路径: 访问站内资源时使用
- alt: 图片不能正常显示时显示的文本
- title: 鼠标在图片上停止移动时显示的文本
- width/height: 设置图片的宽高, 两种赋值方式:1. 像素 2.上级元素百分比 , 如果只设置宽度 高度会自动等比例缩放.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片标签</title>
</head>
<body>
<!-- 同级目录 alt当图片不能正常显示时显示的文本 -->
<img src="a.jpg" alt="这是两个猫耳少女" width="400" height="200">
<!-- 上级目录 -->
<img src="../b.jpg" alt="这是个白毛萝莉" width="400" height="200">
<!-- 下级目录 -->
<img src="img/c.jpg" alt="两个小萝莉" width="400" height="200">
<!-- 站外资源路径 -->
<img src="https://cdn.tmooc.cn/bsfile//courseImg///5f791c0985cc4a67a5c4dca6627155b0.jpg" alt="" width="400" height="200">
</body>
</html>
1.4超链接
- href属性, 作用和图片标签的src属性类似,用于配置资源路径
- a标签包裹文本为文本超链接 包裹图片为图片超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超链接</title>
</head>
<body>
<a href="http://www.baidu.com">超链接1百度</a><br>
<a href="02简历练习.html">超链接2简历</a><br>
<a href="a.jpg">超链接3图片</a><br>
<a href="http://www.jd.com"><img src="a.jpg" alt="" width="400"></a>
</body>
</html>
1.5表格table
- 相关标签: table表格, tr行, td列, th表头,caption表格标题
- 相关属性: border边框, colspan 跨列, rowspan 跨行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格标签</title>
</head>
<body>
<table border="1" bgcolor="aqua" width="500" height="200">
<tr><!-- tr表示行 td表示列 -->
<!-- colspan 跨列 -->
<td colspan="2" align="center">1-1</td>
<td rowspan="2" align="center">1-3</td>
<td rowspan="3" align="center">1-4</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
</tr>
<tr>
<td colspan="3" align="center">3-1</td>
</tr>
<tr>
<td colspan="4" align="center">4-1</td>
</tr>
</table>
<h1>跨行\跨列练习</h1>
<table border="1" bgcolor="aqua" width="200" height="200">
<tr>
<td colspan="2" align="center">1-1</td>
<td rowspan="2" align="center">1-3</td>
</tr>
<tr>
<td rowspan="2" align="center">2-1</td>
<td>2-2</td>
</tr>
<tr>
<td colspan="2" align="center">3-2</td>
</tr>
</table>
<h1>购物车</h1>
<table border="1">
<!-- caption表格标题 -->
<caption>购物车</caption>
<tr>
<!-- th 表头 -->
<th>编号</th>
<th>商品名</th>
<th>单价</th>
</tr>
<tr>
<td>1</td>
<td>华为显示器</td>
<td>2350</td>
</tr>
<tr>
<td>2</td>
<td>小米洗衣机</td>
<td>1350</td>
</tr>
</table>
</body>
</html>
1.6表单form
- 作用: 用于获取用户输入的各种信息,并且把信息提交给服务器
- 学习form表单就是学习有哪些控件
- 相关代码:
<!--action设置提交地址-->
<form action="http://www.baidu.com">
<!--maxlength最大字符长度 placeholder占位文本 value设置默认值 readonly只读-->
用户名:<input type="text" name="username" placeholder="请输入用户名"
maxlength="5" value="abc" readonly><br>
密码:<input type="password" name="password" placeholder="请输入密码"><br>
<!--单选框必须添加value 设置提交的值 否则提交on
checked 设置默认选中 -->
性别:<input type="radio" name="gender" value="m" id="r1">
<label for="r1">男</label>
<input type="radio" name="gender" checked value="w" id="r2">
<label for="r2">女</label><br>
兴趣爱好:<input type="checkbox" name="hobby" value="cy">抽烟
<input type="checkbox" name="hobby" checked value="hj">喝酒
<input type="checkbox" name="hobby" value="tt">烫头<br>
生日:<input type="date" name="birthday"><br>
靓照:<input type="file" name="pic"><br>
所在地:
<select name="city">
<!--value用来设置提交的内容, 如果不写value则提交标签体内的内容-->
<option value="bj">北京</option>
<option value="sh" selected>上海</option>
<option>广州</option>
</select><br>
<input type="reset" value="重置按钮">
<input type="submit" value="注册">
<input type="button" value="自定义按钮">
</form>1.7分区标签
- 作用: 将多个有相关性的标签进行统一管理, 可以理解为一个容器.
- 常见的分区标签
- div: 块级分区标签,特点: 独占一行
- span: 行内分区标签, 特点: 共占一行
- 如何对页面进行分区: 一般一个页面至少分为3大区(头,体,脚),每个大区里面划分n个小的区域
- HTML5标准中新增的分区标签: 作用和div一样, 但是提高了代码的可读性
- header 头
- main 主要/主体
- footer 脚
- nav 导航
- section 区域
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>分区标签</title>
</head>
<body>
<!-- div独立占据一行 -->
<div>div1</div>
<div>div2</div>
<div>div3</div>
<!-- span共同占据一行 -->
<span>span1</span>
<span>span2</span>
<span>span3</span>
<h1>通过div划分三大区域</h1>
<div>头</div>
<div>体</div>
<div>脚</div>
<h1>通过html5 新增标签 划分三大区域</h1>
<header>头</header>
<main>主体</main>
<footer>脚</footer>
</body>
</html>
2.CSS
- Cascading Style Sheet:层叠样式表, 作用: 负责美化页面, 如果html是盖房子,CSS相当于是装修
2.1如何在html 页面中添加CSS样式代码
- 三种引入方式:
- 内联样式: 在标签的style属性中添加样式代码,弊端:不能复用
- 内部样式: 在head标签里面添加style标签,标签体内写样式代码, 可以复用但是只能当前页面复用.
- 外部样式: 在单独的css样式文件中写样式代码, 在html页面中通过link标签引入, 可以多页面复用.
- 工作中外部样式使用的更多 因为可以实现多页面复用,而且可以将html代码和css样式代码分离开便于维护和管理, 但是学习过程中为了便于演示效果内部样式用的更多
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS引入方式</title>
<!-- html注释 -->
<style type="text/css">
/* css注释 */
h2{
color: bisque;
}
</style>
<!-- css外部引入样式 -->
<!-- rel 关系（引入的是一个样式文件） -->
<!-- type 该文件是什么类型的 -->
<!-- href 引入文件的路径 -->
<link rel="stylesheet" type="text/css" href="my.css"/>
</head>
<body>
<h1 style="color: aquamarine;">内连样式1</h1>
<h1 style="color: aquamarine;">内连样式2</h1>
<h2>内部样式1</h2>
<h2>内部样式2</h2>
<h3>外部样式1</h3>
<h3>外部样式2</h3>
</body>
</html>
my.css
h3{
color: chartreuse;
}2.2选择器
- 标签名选择器: 匹配到页面中所有同名标签
- 格式: 标签名{样式代码}
- id选择器: 当需要选择页面中某一个元素时,给元素添加id,然后通过id选择器选择到元素
- 格式: #id{样式代码}
- 类选择器: 如果需要选择多个不相关的元素时, 给多个元素添加相同的class属性, 然后通过类选择器进行选择
- 格式: .class{样式代码}
- 分组选择器: 可以将多个选择器合并成一个选择器
- 格式: 标签名,#id,.class{样式代码}
- 属性选择器: 通过元素的属性选择元素
- 格式: 标签名[属性名='值']{样式代码}
- 任意元素选择器: 匹配页面中所有的元素
- 格式: *{样式代码}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择器</title>
<style type="text/css">
/* id选择器 */
#banana{
color: yellow;
}
/* 类选择器 */
.c1{
color: #7FFF00;
}
/* 分组选择器 */
#banana,.c1{
background-color: black;
}
/* 属性选择器 */
input[type='text']{
color: orange;
}
*{
border: 1px solid red;
}
</style>
</head>
<body>
<h3 id="banana">香蕉</h3>
<h3>苹果</h3>
<h3 class="c1">葡萄</h3>
<p>冰箱</p>
<p>洗衣机</p>
<p class="c1">电视机</p>
<input type="text" name="" id="" value="" /><br>
<input type="password" name="" id="" value="" />
</body>
</html>
2.3选择器练习题:
通过内部样式实现以下效果
- 把张学友改成绿色
- 把刘德华和悟空改成蓝色
- 修改取经2人和刘备的背景为黄色
- 修改密码框的背景为红色
- 给所有元素添加红色的边框
答案：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小练习</title>
<style type="text/css">
*{
border: 1px solid red;
}
#zxy{
color: #7FFF00;
}
.c1{
color: blue;
}
h1,h2{
background-color: yellow;
}
input[type='password']{
background-color: #FF0000;
}
</style>
</head>
<body>
<p id="zxy">张学友</p>
<p class="c1">刘德华</p>
<p>郭富城</p>
<h1 class="c1">悟空</h1>
<h1>八戒</h1>
<h2>刘备</h2>
<input type="text">
<input type="password"/>
</body>
</html>
302
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
