前端学习笔记01--HTML快速了解-CSDN博客

本文链接：https://blog.csdn.net/qq_40670344/article/details/115718244

HTML

前端三剑客：HTML--结构、CSS--修饰、JS--行为(java script)

W3C--万维网联盟：制定前端的技术标准 HTML5--ES6标准

HyperText Markup Language ：超文本标记 语言 --超链接、文本、标签==组织页面中的内容

1.1 HTTP/HTTPS

HTTP--基于请求/响应的、无状态的、安全的、超文本传输协议。

HTTPS--加密的超文本传输协议。

1.2 HTML简介

1.2.1 标记语言

XML--自定义标记语言--可自定义标记

HTML--超文本标记语言--标记已定义，具有特殊功能。超--指超链接。

1.2.2 标签分类

按照写法：

双标签：有头有尾 <标签名></标签名> 可以嵌套其他标签

单标签：头即是尾 <标签名/>

显示方式：

块级元素：一个元素独占一行。从上往下排列。

行级元素：从左向右排列，一行显示不了，才会换行。

可以相互转化，通过设置CSS的display属性。

1.2.3 标签属性

1.2.4 样式

网页的样式一般使用CSS文件定义

1.3 常用标签

1.3.1 文章段落

标题 h1-h6

段落 p

换行 br

水平分隔线 hr

1.3.2 字体

--通过CSS控制

字体 font

加粗 b

强调文本 strong em

斜体 i

下标 sub

上标 sup

1.3.3 超链接

a 页面跳转

a 用作锚点

1）href="#id" //填写跳转位置的id属性

2）href="#name" //填写跳转位置的name属性

1.3.4 图片、视频

img

<video src="视频地址" controls="controls"> controls播放视频显示可控制的进度条

1.3.5 html基本结构

1.3.6 列表

1）有序列表

<ol>

</ol>

2）无序列表--并列内容

<ul>

</ul>

3）自定义列表

<dl>

</dl>

1.3.7 表格

<table>

<thead>列标题</thead> 与 <thbody>表格体<thbody/> --可以省略

colspan="number" 、 rowspan="number" ------列、行合并，number--合并的列、行数

<tr> tr--一行

<tr>

<tr> tr--一行

<tr>

<table>

1.3.8 表单

post:将表单数据作为一个数据块进行整体提交--对提交的数据量无大小限制,速度慢
get:默认值,将表单数据追加在URL后提交--对提交的数据量有最大限制,速度快

<label>需要显示的内容</lable> == input的属性：placeholder

</form>

1.3.9 CSS布局标签

1.4 实例

<!DOCTYPE html>  <!--文档声明-->
<!-- html是html文件的根标记(元素)，有且只有一个根标记 -->
<html>
	<head>
		<meta charset="utf-8" />
		<title>第一个页面</title>
		<!-- style 定义页面样式 -->
		<style>
			.font_red{
				color:red;
				font-size: 24px;
			}
		</style>
	</head>
	<body>
		这是一个页面
		
		<h1>段落与换行</h1>
		<!-- 段落，占一行，标签p -->
		<p style="background-color: #FF0000;">第一段落</p>
		<p>第二段落</p>
		<!-- 换行，标签<br/>--斜杠在后面==空标记 -->
		<p>自动换行<br/>自动换行<br/></p>
		
		<h1>文本属性</h1>
		<!-- ctrl+/ 注释行，包括代码；ctrl+shift+/：单行注释，不注释代码 -->
		<!-- 标签属性，alt+/ 查看标签属性、自动填充等
		id：给元素编号，一般要求在一个页面中id的值不重复，应是唯一的
		style--key:value 如：color:red
		class:在元素中调用已经定义好的样式-->
		<center class="font_red">
		春晓<br/>唐·孟浩然<br/>
		春眠不觉晓<br/>处处闻啼鸟<br/>夜来风雨声<br/>花落知多少<br/>
		</center>
		<h1>标题类型：</h1>
		<h1>h1标题</h1>
		<h2>h2标题</h2>
		<h3>h3标题</h3>
		<h4>h4标题</h4>
		<h5>h5标题</h5>
		<h6>h6标题</h6>
		
		<h1>HTML中的空格问题</h1>
		<!-- HTML中书写多个连续的空格，但是浏览器会当作一个空格进行渲染 -->
		<!-- 如果想在页面中显示多个连续空格，需要使用转义字符&nbsp -->
		HTML中的空格：&nbsp;&nbsp;&nbsp;前面有三个空格。
		<hr/>  <!-- 水平线-->
		
		
		<a href="" name="info1">锚点：锚点定义处</a>
		
		<h1>文本格式化</h1>
		这是普通文本<br>
		<b>这是加粗文本，加粗标签b</b>
		<i>这是斜体文本，斜体标签i</i>
		下标sub  O<sub>2</sub>
		
		<h1>超链接</h1>
		<a href="https://www.baidu.com" >百度,在原页面打开</a> 
		<br>
		<a href="https://www.baidu.com" target="_blank">百度,在新页面打开</a> 
		<h3>锚点</h3> 
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		<a href="#info1">回到锚点</a>
		
		<h1>图片</h1>
		<img src="img/20210321.jpg" >
		设置图片宽、高，如果只设置一个值，则按照宽高比进行缩放<br>
		<img src="img/20210321.jpg" width="1000px",height="800px">
		
		<h1>视频</h1>
		<video src="img/12345.mp4" controls="controls"> 
		<!-- controls="controls"--视频添加播放控制按钮 -->
		</video>
		
		<h1>表格</h1>
		<table border="1" width="60%" style="text-align: center;"> 
		<!--border="1"--宽度为1，占60%的页面宽度，text-align: center--居中-->
			<!-- tr--表示一列 -->
			<!-- th--表示标题 -->
			<!-- td--表示数据 -->
			<tr>
				<th>学号</th><th>学生姓名</th><th>班级信息</th><th>操作</th>
				</tr>
			<tr>
				<td>A001</td>
				<td>张三</td>
				<td>A班</td>
				<td><a href="">删除</a>
				<a href="">修改</a></td>
				</tr>
			<tr>
				<td>A002</td>
				<td>李四</td>
				<td>B班</td>
				<td><a href="">删除</a>
				<a href="">修改</a></td>
				</tr>
		</table>
		<h3>表格-合并行、合并列</h3>
		<table border="" width="60%" style="text-align: center;">
			<tr>
				<td colspan="2">AAA BBB</td> <!-- colspan="2"--2行合并-->
				<!-- <td>BBB</td> -->
				<td rowspan="2">CCC CCC</td> <!-- rowspan="2"--2列合并-->
				</tr>
			<tr>
				<td>AAA</td>
				<td>BBB</td>
				<!-- <td>CCC</td> -->
				</tr>
		</table>
		
		<h1>表单</h1>
		<form action="" method="post">
			<!-- action--定义表单提交的URL -->
			<!-- method: post | get
			 post:将表单数据作为一个数据块进行整体提交--对提交的数据量无大小限制,速度慢
			 get:默认值,将表单数据追加在URL后提交--对提交的数据量有最大限制,速度快
			 
			 readonly="readonly" --只读,不能修改,随表单提交
			 disabled="disabled" --禁用,不能修改,不被提交
			 size--输入框大小
			 maxlength--允许输入的字符数
			 -->
			班级编号：<input type="text" name="classID1" value="A001" readonly="readonly"/><br>
			班级编号：<input type="text" name="classID2" value="A001" disabled="disabled"/><br>
			班级名称：<input type="text" size="10" maxlength="3"/><br>
			<!-- button-按钮，无动作
			reset-按钮+重置动作(将表单重置成初始化状态-可能有默认值，而不是清空表单) 
			submit-按钮+提交动作
			-->
			<input type="button" value="按钮" />
			<input type="reset" value="重置" />
			<input type="submit" value="提交" />
		</form>
		<h3>表单:Input演示</h3>
		<form action="" method="post">
			注册页面<br>
			<!-- input type
			hidden--隐藏域
			text--默认值,文本
			password--隐藏输入,密码
			radio--单选框
			checkbox--多选框
			file--文件
			
			h5特有,如果在版本较老的浏览器上,则一律按照text处理 
			email--邮箱
			number--数字
			date--日期选择器
			color--颜色选择器
			 -->
			<input type="hidden" name="隐藏域" value="values" />
			用户名称:<input type="text" /> <br><br>
			用户密码:<input type="password" /> <br><br>
			用户性别:<input type="radio" name="userSex" />男 
					 <input type="radio" name="userSex" />女 <br><br>
			用户爱好:<input type="checkbox"  />读书
					<input type="checkbox"  />运动
					<input type="checkbox"  />旅游 <br><br>
			用户头像:<input type="file" /> <br><br>
			
			<!-- select--多层选择 -->
			用户地址:<select>
						<option>北京</option>
						<option>上海</option>
						<option>山东</option>
					</select> 
					<select>
							<option>济南</option>
							<option>青岛</option>
					</select>
					<select>
							<option>市南</option>
							<option>市北</option>
							<option>崂山</option>
					</select>
					<br><br>
			<!-- textarea--大文本域 -->
			用户简介:<br>
			<textarea rows="5" cols="50">
				
			</textarea>
			<br><br>
			<!-- h5特有,如果在版本较老的浏览器上,则一律按照text处理 -->
			用户邮箱:<input type="email"  /> <br><br>
			用户年龄:<input type="number" /> <br><br>
			用户生日:<input type="date" /> <br><br>
			爱好颜色:<input type="color" /> <br><br>
		</form>
		
		<h1>Div 和 Span</h1>
		<!-- 
		行级元素(块级元素): 占一行
			p div h1~h6
		内联元素: 不占一行
			span,input,select
		 -->
		<div >aaa</div>
		<div >bbb</div>
		<div >ccc</div>
		
		<span>AAA</span>
		<span>BBB</span>
		<span>CCC</span>
		
		<h1>列表</h1>
		<h3>无序列表: 无序号</h3>
		<ul>
			<li>AAA</li>
			<li>BBB</li>
			<li>CCC</li>
		</ul>
		<h3>有序列表: 有序号</h3> 
		<ol type="a">
			<!-- type 默认数字 -->
			<li>AAA</li>
			<li>BBB</li>
			<li>CCC</li>
		</ol>
	</body>
</html>