HTML学习笔记第一天

河铃旅鹿

于 2024-07-26 20:50:03 发布

阅读量468

点赞数 1

文章标签： html 学习笔记

本文链接：https://blog.csdn.net/Word_seeker/article/details/140724181

版权

style标签

在HTML中，style标签用于定义文档的样式信息，它可以包含CSS（层叠样式表）规则，这些规则定义了如何渲染HTML文档中的元素。具体来说，写在

样式定义

定义HTML元素的样式，包括字体、颜色、大小、边距、背景等，从而控制元素的外观和布局。

页面布局

通过CSS规则，可以实现响应式布局、栅格系统、网格布局等，使页面在不同设备和屏幕尺寸上显示良好。

交互效果

利用CSS的过渡（transition）、动画（animation）、变换（transform）等属性，实现元素的交互效果，如鼠标悬停时的动画效果、按钮点击后的状态变化等。

打印样式

通过CSS的@media print规则，可以定义打印时的样式，控制打印内容的布局、颜色和隐藏不需要打印的元素。

字体控制

设置文本的字体、大小和间距，以及特定字体的备选列表。

元素状态样式

使用伪类（如:hover、:active、:focus）和伪元素（如::before、::after），定义元素在不同状态下的样式表现。

跨浏览器兼容性

通过CSS规则，可以针对不同的浏览器（如Chrome、Firefox、Safari等）和不同的设备（如移动设备、平板电脑）定义不同的样式，以保证页面在各种环境下的良好表现。

html注释格式：
<!- - 注释内容 - ->
为了高亮显示，以下代码依旧使用 // 注释

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>页面标题</title>
		<style>
			table,td{
				border:1px solid deeppink;//表格边框宽度和颜色
				border-collapse: collapse;//表格线合并
			}
			td{
				width:70px;//表格宽度
				text-align: center;//表格中内容居中
				padding:10px;
			}
		</style>
	</head>
	<body> 
		h1-h6，共六级标题
		<h1>凉州词</h1>
		<h2>凉州词</h2>
		<!-- 段落  p -->
		<p>葡萄美酒夜光杯,欲饮琵琶马上催</p>
		<p>醉卧沙场君莫笑,古来征战几人回</p>
		<!-- img 的alt  图片加载失败后显示的文本 -->
		<img src="./image/easyimg.png" alt="失败了" />
		
		//超链接
		<a href="https://www.baidu.com">连接到百度</a>
		<a href="easy.html">
			<img src="./image/easyimg.png" alt="失败了" />
		</a>
		<table>
			<tr>
				<td>编号</td>
				<td>姓名</td>
				<td>成绩</td>
			</tr>
			<tr>
				<td>1001</td>
				<td>张三</td>
				<td>100</td>
			</tr>
		</table>
		<table>
			<tr>
				<td>1-1</td>
				<td colspan="2">1-2</td>//左右合并单元格
				<!-- <td>1-3</td> -->
				<td>1-4</td>
			</tr>
			<tr>
				<td rowspan="2">2-1</td>//上下合并单元格
				<td>2-2</td>
				<td>2-3</td>
				<td>2-4</td>
			</tr>
			<tr>
				<!-- <td>3-1</td> -->
				<td>3-2</td>
				<td rowspan="2" colspan="2">3-3</td>//上下左右同时合并单元格
				<!-- <td>3-4</td> -->
			</tr>
			<tr>
				<td>4-1</td>
				<td>4-2</td>
				<!-- <td>4-3</td>
				<td>4-4</td> -->
			</tr>
		</table>
		
		//列表
		//ol有序列表,有序号
		<ol>
			<li>苹果</li>
			<li>香蕉</li>
			<li>橘子</li>
		</ol>
		//ul有序列表,无序号
		<ul>
			<li>苹果</li>
			<li>香蕉</li>
			<li>橘子</li>
		</ul>
	</body>
</html>

上述代码中的第二个超链接如下：
a href=“easy.html”
img src=“./image/easyimg.png” alt=“失败了”
点击后会跳转到以下代码所写的页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<img src="./image/easyimg.png" alt="失败了" />
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="提交表单的地址" method="提交的方式 get/post">
			//表单中的组件
			<input type="text" name="username" value="张三"/>
			//密码框
			<input type="password" name="userpass">
			
			<input type="text" readonly value="20060804006" name="code">
			//隐藏域
			<input type="hidden" value="1001" name="id">
			<div>
			//单选框
			<input   type="radio" value="M" name="sex" id="sexman"/><label for="sexman">男</label>
			<input checked  type="radio" value="W" name="sex" id="sexwoman"/><label for="sexwoman">女</label>
			</div>
			//复选框
			<div>
				<input checked type="checkbox" name="hobby" id="sing" value="sing"><label for='sing'>唱</label>
				<input disabled type="checkbox" name="hobby" id="dance" value="dance"><label for='dance'>跳</label>
				<input checked type="checkbox" name="hobby" id="rap" value="rap"><label for='rap'>RAP</label>
			</div>
			<div>
				//下拉框
				<label for="province">省份</label>
				<select name="province" id="province">
					<option >山东省</option>
					<option value="AHS">安徽省</option>
					<option value="SXS">陕西省</option>
					<option value="YNS" selected>云南省</option>
					<option value="XJ">新疆</option>
				</select>
			</div>
			<div>
				//文本域  多行文本框   两个标签中的内容就是它的值  注意不要回车
				<textarea></textarea>
			</div>
			<button type="submit">提交按钮</button>
			<button type="button">普通按钮</button>
			<button type="reset">重置按钮</button>
			<input type="button" value="普通按钮Input">
			<input type="submit" value="提交按钮Input">
			<input type="reset" value="重置按钮Input">
		</form>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 内部样式 */
			/* 选择器 */
			/* ID选择器 */
			#boxa{
				height:100px;
				width:100px;
				background-color: lightblue;
				
				//字体颜色
				color:green;
				font-size: 30px;
				text-align: center;
				//单行文本垂直居中 行高等于容器的高度
				line-height:100px ;
				//字体加粗
				font-weight: bold;
			}
			
			//标签选择器  元素选择器
			div{
				height:100px;
				width:100px;
			}
			//类选择器  class='gbred'
			.bgred{
				background-color: red;
				display: none;
			}
		</style>
	</head>
	<body>
		//内联样式
		<div style="width:100px;height:100px;background-color: pink;"></div>
		<div id="boxa"> 你好</div>
		<div class='bgred'></div>
		<div class='bgred'></div>
	</body>
</html>

河铃旅鹿

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML学习笔记第一天

在HTML中，style标签用于定义文档的样式信息，它可以包含CSS（层叠样式表）规则，这些规则定义了如何渲染HTML文档中的元素。具体来说，写在定义HTML元素的样式，包括字体、颜色、大小、边距、背景等，从而控制元素的外观和布局。通过CSS规则，可以实现响应式布局、栅格系统、网格布局等，使页面在不同设备和屏幕尺寸上显示良好。利用CSS的过渡（transition）、动画（animation）、变换（transform）等属性，实现元素的交互效果，如鼠标悬停时的动画效果、按钮点击后的状态变化等。通过CSS的
复制链接

扫一扫