• JSD-2204-HTML-CSS-Day01

    1.HTML

    • HyperTextMarkupLanguage超文本标记语言
    • 标记语言特点:
    1. <开始标签 属性名="值">标签体</结束标签>
    2.  
    3. <单标签>
    • 作用: 负责搭建页面结构和准备页面内容 ,相当于是盖房子(毛坯房)
    • 学习HTML主要学习的就是有哪些标签,以及标签的使用方式

    1.1文本相关标签

    • 内容标题h1-h6
      • 特点: 独占一行, 字体加粗, 自带上下间距
    • 水平分割线 hr
    • 段落标签p
      • 特点: 独占一行, 自带上下间距
    • 加粗b
    • 斜体i
    • 下划线u
    • 删除线s
    • 换行br
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>文本相关标签</title>
    6. </head>
    7. <body>
    8. 	正常字体
    9. 	<!-- align剧中 -->
    10. 	<h1 align="center">内容标题1</h1>
    11. 	<h2 align="right">内容标题2</h1>
    12. 	<h3>内容标题3</h1>
    13. 	<h4>内容标题4</h1>
    14. 	<h5>内容标题5</h1>
    15. 	<h6>内容标题6</h1>
    16. 	<hr>
    17. 	<p>段落标签1</p>
    18. 	<p>段落标签2</p>
    19. 	<p>段落<br>标签3</p>
    20. 	加粗&nbsp;<b>标签</b><br>
    21. 	斜体&nbsp;<i>标签</i><br>
    22. 	下划线&nbsp;<u>标签</u><br>
    23. 	删除线&nbsp;<s>标签</s><br>
    24. 	<hr>
    25. 	<h1>列表标签</h1>
    26. 	<h2>无序列表</h2>
    27. </body>
    28. </html>

    1.2列表标签

    • 无序列表: ul 和 li
    • 有序列表: ol 和 li
    • 列表嵌套: 有序列表和无序列表可以任意无限嵌套
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>文本相关标签</title>
    6. </head>
    7. <body>
    8. 	<ol><!-- ordered list -->
    9. 		<li>java语言基础
    10. 			<ol>
    11. 				<li>变量</li>
    12. 				<li>数据类型</li>
    13. 				<li>运算符</li>
    14. 			</ol>
    15. 		</li>
    16. 		<li>javaAPI</li>
    17. 		<li>Web前端
    18. 			<ul>
    19. 				<li>html</li>
    20. 				<li>CSS</li>
    21. 				<li>javaScript</li>
    22. 			</ul>
    23. 		</li>
    24. 	</ol>
    25. </body>
    26. </html>

    1.3图片标签img

    • src: 资源路径
      • 相对路径: 访问站内资源时使用
        • 页面和图片在同级目录: 直接写图片名
        • 图片在页面的上级目录: ../图片名
        • 图片在页面的下级目录: 文件夹名/图片名
      • 绝对路径: 访问站外资源路径时使用,又称为图片盗链, 存在找不到图片的风险
    • alt: 图片不能正常显示时显示的文本
    • title: 鼠标在图片上停止移动时显示的文本
    • width/height: 设置图片的宽高, 两种赋值方式:1. 像素 2.上级元素百分比 , 如果只设置宽度 高度会自动等比例缩放.
    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>图片标签</title>
    6. 	</head>
    7. 	<body>
    8. 		<!-- 同级目录 alt当图片不能正常显示时显示的文本 -->
    9. 		<img src="a.jpg" alt="这是两个猫耳少女" width="400" height="200">
    10. 		<!-- 上级目录 -->
    11. 		<img src="../b.jpg" alt="这是个白毛萝莉" width="400" height="200">
    12. 		<!-- 下级目录 -->
    13. 		<img src="img/c.jpg" alt="两个小萝莉" width="400" height="200">
    14. 		<!-- 站外资源路径 -->
    15. 		<img src="https://cdn.tmooc.cn/bsfile//courseImg///5f791c0985cc4a67a5c4dca6627155b0.jpg" alt="" width="400" height="200">
    16. 	</body>
    17. </html>

    1.4超链接

    • href属性, 作用和图片标签的src属性类似,用于配置资源路径
    • a标签包裹文本为文本超链接 包裹图片为图片超链接
    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>超链接</title>
    6. 	</head>
    7. 	<body>
    8. 		<a href="http://www.baidu.com">超链接1百度</a><br>
    9. 		<a href="02简历练习.html">超链接2简历</a><br>
    10. 		<a href="a.jpg">超链接3图片</a><br>
    11. 		
    12. 		<a href="http://www.jd.com"><img src="a.jpg" alt="" width="400"></a>
    13. 	</body>
    14. </html>

    1.5表格table

    • 相关标签: table表格, tr行, td列, th表头,caption表格标题
    • 相关属性: border边框, colspan 跨列, rowspan 跨行
    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>表格标签</title>
    6. 	</head>
    7. 	<body>
    8. 		<table border="1" bgcolor="aqua" width="500" height="200">
    9. 			<tr><!-- tr表示行  td表示列 -->
    10. 			<!-- colspan  跨列 -->
    11. 				<td colspan="2" align="center">1-1</td>
    12. 				
    13. 				<td rowspan="2" align="center">1-3</td>
    14. 				<td rowspan="3" align="center">1-4</td>
    15. 			</tr>
    16. 			<tr>
    17. 				<td>2-1</td>
    18. 				<td>2-2</td>
    19. 				
    20. 				
    21. 			</tr>
    22. 			<tr>
    23. 				<td colspan="3" align="center">3-1</td>
    24. 				
    25. 				
    26. 			</tr>
    27. 			<tr>
    28. 				<td colspan="4" align="center">4-1</td>
    29.  
    30. 			</tr>
    31. 		</table>
    32. 		
    33. 		<h1>跨行\跨列练习</h1>
    34. 		<table border="1" bgcolor="aqua" width="200" height="200">
    35. 			<tr>
    36. 				<td colspan="2" align="center">1-1</td>
    37. 				
    38. 				<td rowspan="2" align="center">1-3</td>
    39. 			</tr>
    40. 			<tr>
    41. 				<td rowspan="2" align="center">2-1</td>
    42. 				<td>2-2</td>
    43. 				
    44. 			</tr>
    45. 			<tr>
    46. 				
    47. 				<td colspan="2" align="center">3-2</td>
    48. 				
    49. 			</tr>
    50. 		</table>
    51. 		<h1>购物车</h1>
    52. 		<table border="1">
    53. 			<!-- caption表格标题 -->
    54. 			<caption>购物车</caption>
    55. 			<tr>
    56. 				<!-- th 表头 -->
    57. 				<th>编号</th>
    58. 				<th>商品名</th>
    59. 				<th>单价</th>
    60. 			</tr>
    61. 			<tr>
    62. 				<td>1</td>
    63. 				<td>华为显示器</td>
    64. 				<td>2350</td>
    65. 			</tr>
    66. 			<tr>
    67. 				<td>2</td>
    68. 				<td>小米洗衣机</td>
    69. 				<td>1350</td>
    70. 			</tr>
    71. 		</table>
    72. 	</body>
    73. </html>

    1.6表单form

    • 作用: 用于获取用户输入的各种信息,并且把信息提交给服务器
    • 学习form表单就是学习有哪些控件
    • 相关代码:
    1. <!--action设置提交地址-->
    2.  
    3. <form action="http://www.baidu.com">
    4.  
    5. <!--maxlength最大字符长度 placeholder占位文本 value设置默认值 readonly只读-->
    6.  
    7. 用户名:<input type="text" name="username" placeholder="请输入用户名"
    8.  
    9. maxlength="5" value="abc" readonly><br>
    10.  
    11. 密码:<input type="password" name="password" placeholder="请输入密码"><br>
    12.  
    13. <!--单选框必须添加value 设置提交的值 否则提交on
    15. checked 设置默认选中 -->
    16.  
    17. 性别:<input type="radio" name="gender" value="m" id="r1">
    18.  
    19. <label for="r1">男</label>
    20.  
    21. <input type="radio" name="gender" checked value="w" id="r2">
    22.  
    23. <label for="r2">女</label><br>
    24.  
    25. 兴趣爱好:<input type="checkbox" name="hobby" value="cy">抽烟
    26.  
    27. <input type="checkbox" name="hobby" checked value="hj">喝酒
    28.  
    29. <input type="checkbox" name="hobby" value="tt">烫头<br>
    30.  
    31. 生日:<input type="date" name="birthday"><br>
    32.  
    33. 靓照:<input type="file" name="pic"><br>
    34.  
    35. 所在地:
    36.  
    37. <select name="city">
    38.  
    39. <!--value用来设置提交的内容, 如果不写value则提交标签体内的内容-->
    40.  
    41. <option value="bj">北京</option>
    42.  
    43. <option value="sh" selected>上海</option>
    44.  
    45. <option>广州</option>
    46.  
    47. </select><br>
    48.  
    49. <input type="reset" value="重置按钮">
    50.  
    51. <input type="submit" value="注册">
    52.  
    53. <input type="button" value="自定义按钮">
    54.  
    55. </form>

    1.7分区标签

    • 作用: 将多个有相关性的标签进行统一管理, 可以理解为一个容器.
    • 常见的分区标签
      • div: 块级分区标签,特点: 独占一行
      • span: 行内分区标签, 特点: 共占一行
    • 如何对页面进行分区: 一般一个页面至少分为3大区(头,体,脚),每个大区里面划分n个小的区域
    • HTML5标准中新增的分区标签: 作用和div一样, 但是提高了代码的可读性
      • header 头
      • main 主要/主体
      • footer 脚
      • nav 导航
      • section 区域
    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>分区标签</title>
    6. 	</head>
    7. 	<body>
    8. 		<!-- div独立占据一行 -->
    9. 		<div>div1</div>
    10. 		<div>div2</div>
    11. 		<div>div3</div>
    12. 		<!-- span共同占据一行 -->
    13. 		<span>span1</span>
    14. 		<span>span2</span>
    15. 		<span>span3</span>
    16. 		<h1>通过div划分三大区域</h1>
    17. 		<div>头</div>
    18. 		<div>体</div>
    19. 		<div>脚</div>
    20. 		<h1>通过html5 新增标签 划分三大区域</h1>
    21. 		<header>头</header>
    22. 		<main>主体</main>
    23. 		<footer>脚</footer>
    24. 	</body>
    25. </html>

    2.CSS

    • Cascading Style Sheet:层叠样式表, 作用: 负责美化页面, 如果html是盖房子,CSS相当于是装修

    2.1如何在html 页面中添加CSS样式代码

    • 三种引入方式:
    • 内联样式: 在标签的style属性中添加样式代码,弊端:不能复用
    • 内部样式: 在head标签里面添加style标签,标签体内写样式代码, 可以复用但是只能当前页面复用.
    • 外部样式: 在单独的css样式文件中写样式代码, 在html页面中通过link标签引入, 可以多页面复用.
    • 工作中外部样式使用的更多 因为可以实现多页面复用,而且可以将html代码和css样式代码分离开便于维护和管理, 但是学习过程中为了便于演示效果内部样式用的更多
    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>CSS引入方式</title>
    6. 		<!-- html注释 -->
    7. 		<style type="text/css">
    8. 			/* css注释 */
    9. 			h2{
    10. 				color: bisque;
    11. 			}
    12. 		</style>
    13. 		<!-- css外部引入样式 -->
    14. 		<!-- rel 关系（引入的是一个样式文件） -->
    15. 		<!-- type 该文件是什么类型的 -->
    16. 		<!-- href 引入文件的路径 -->
    17. 		<link rel="stylesheet" type="text/css" href="my.css"/>
    18. 	</head>
    19. 	<body>
    20. 		<h1 style="color: aquamarine;">内连样式1</h1>
    21. 		<h1 style="color: aquamarine;">内连样式2</h1>
    22. 		<h2>内部样式1</h2>
    23. 		<h2>内部样式2</h2>
    24. 		<h3>外部样式1</h3>
    25. 		<h3>外部样式2</h3>
    26. 	</body>
    27. </html>

    my.css 

    1. h3{
    2. 	color: chartreuse;
    3. }

    2.2选择器

    • 标签名选择器: 匹配到页面中所有同名标签
      • 格式: 标签名{样式代码}
    • id选择器: 当需要选择页面中某一个元素时,给元素添加id,然后通过id选择器选择到元素
      • 格式: #id{样式代码}
    • 类选择器: 如果需要选择多个不相关的元素时, 给多个元素添加相同的class属性, 然后通过类选择器进行选择
      • 格式: .class{样式代码}
    • 分组选择器: 可以将多个选择器合并成一个选择器
      • 格式: 标签名,#id,.class{样式代码}
    • 属性选择器: 通过元素的属性选择元素
      • 格式: 标签名[属性名='值']{样式代码}
    • 任意元素选择器: 匹配页面中所有的元素
      • 格式: *{样式代码}
    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>选择器</title>
    6. 		<style type="text/css">
    7. 			/* id选择器 */
    8. 			#banana{
    9. 				color: yellow;
    10. 			}
    11. 			/* 类选择器 */
    12. 			.c1{
    13. 				color: #7FFF00;
    14. 			}
    15. 			/* 分组选择器 */
    16. 			#banana,.c1{
    17. 				background-color: black;
    18. 			}
    19. 			/* 属性选择器 */
    20. 			input[type='text']{
    21. 				color: orange;
    22. 			}
    23. 			*{
    24. 				border: 1px solid red;
    25. 			}
    26. 		</style>
    27. 	</head>
    28. 	<body>
    29. 		<h3 id="banana">香蕉</h3>
    30. 		<h3>苹果</h3>
    31. 		<h3 class="c1">葡萄</h3>
    32. 		<p>冰箱</p>
    33. 		<p>洗衣机</p>
    34. 		<p class="c1">电视机</p>
    35. 		<input type="text" name="" id="" value="" /><br>
    36. 		<input type="password" name="" id="" value="" />
    37. 	</body>
    38. </html>

    2.3选择器练习题:

    通过内部样式实现以下效果

    1. 把张学友改成绿色
    2. 把刘德华和悟空改成蓝色
    3. 修改取经2人和刘备的背景为黄色
    4. 修改密码框的背景为红色
    5. 给所有元素添加红色的边框

    答案：

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>小练习</title>
    6. 		<style type="text/css">
    7. 			*{
    8. 				border: 1px solid red;
    9. 			}
    10. 			#zxy{
    11. 				color: #7FFF00;
    12. 			}
    13. 			.c1{
    14. 				color: blue;
    15. 			}
    16. 			h1,h2{
    17. 				background-color: yellow;
    18. 			}
    19. 			input[type='password']{
    20. 				background-color: #FF0000;
    21. 			}
    22. 		</style>
    23. 	</head>
    24. 	<body>
    25. 		<p id="zxy">张学友</p>
    26. 		<p class="c1">刘德华</p>
    27. 		<p>郭富城</p>
    28. 		<h1 class="c1">悟空</h1>
    29. 		<h1>八戒</h1>
    30. 		<h2>刘备</h2>
    31. 		<input type="text">
    32. 		<input type="password"/>
    33. 	</body>
    34. </html>

  • 相关阅读:
    javaweb+vue汽车4S店车辆维修管理系统springboot
    MySQL数据库索引以及使用唯一索引实现幂等性
    章节十三：协程实践
    java面试八股文收集2
    使用vmware ESXi安装和复制虚拟机
    ISL1208时钟芯片 Linux下 i2c 设置报警时钟。
    openEuler 22.03 安装及配置Gitlab容器
    MySQL数据库的多种连接方式及工具
    C语言小程序-通讯录（动态内存管理）
    《web课程设计》基于HTML+CSS+JavaScript典的中医药大学网(11个页面)
  • 原文地址：https://blog.csdn.net/TheNewSystrm/article/details/125489992