自学前端基础,同步一下自己的笔记,以便日后复习
憨羊学习参照的是zh和w3,若有纰漏,欢迎指出!

《常见标签》

<!DOCTYPE html>
<!-- doc:document 文档;type:类型;html:hyper text markup language超文本标记语言
注释的快捷键:ctrl+/
 -->
<html>
	<head>
		<meta charset="utf-8">  
		<!-- 单标记的“/”可带可不带
		meta(标签):元;charset(属性):字符集;utf-8(属性值):是针对uniode的一种可变长度字符编码 
		属性和属性值通过“=”链接-->
		<title>常见标签</title>
		<!-- 双标记(常规标记)结尾需要“/” -->
	</head>
	
	<body>
		<!-- 文本标题 h1-h6 -->
		<h1>一号标题</h1>
		<h2>二号标题</h2>
		<h3>三号标题</h3>
		<h4>四号标题</h4>
		<h5>五号标题</h5>
		<h6>六号标题</h6>
		
		<!-- 段落 p -->
		<p>文本段落</p>
		
		<!-- 加粗 -->
		<b>加粗</b>
		<strong>我也加粗的</strong>
		
		<!-- 倾斜 -->
		<i>我是倾斜的</i>
		<em>我也是倾斜的</em>
		
		<!-- 超链接 实现点击跳转的效果 -->
		<a href="https://www.tjcu.edu.cn/">天津商业大学官网</a>
		
		<!-- 图片 -->
		<img src="图片名称"/>
	</body>
</html>

001相对路径

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相对路径</title>
	</head>
	<body>
		<!-- 相对路径:以引用文件所在位置为参考基础而建立的目标路径 -->
		<!-- A.同级:目标文件和当前文件是同级 
		书写:目标文件的名字.扩展名 -->
		 <img src="aaa.jpg"/>
		 
		 <!-- B.下级:目标文件位于当前文件的下级 
		 书写:目标文件所在文件夹名字/目标文件.扩展名 
		 "/"是展开下一级 -->
		 <img src="images/杨.jpg">
		 
		 <!-- C.上级:目标文件位于当前文件的上级 
		 书写;../目标文件的名字.扩展名 
		 "../"表示返回上一级 -->
		 <img src="../qqq.jpg" />
	</body>
</html>

002绝对路径

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相对路径</title>
	</head>
	<body>
		 <!-- 绝对路径:指的某个目录或网站的绝对位置,可直达want的位置 -->
		 <!-- A.某目录的直达位置
		  书写:D:\前端开发\004\logo.jpg-->
		  <img src="F:\图片\di.jpg">
		  <!-- 无法显示 -->
		  
		  <!-- B.某完整的网页具体位置
		  书写:http://1000phone.com/img/qf_logo.jpg -->
		  <img src="https://s.cn.bing.net/th?id=OIP-C.YK82ERPLS3QDwtk23LtY3QHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.25&pid=3.1&rm=2">
	</body>
</html>

这里憨羊显示不出绝对路径下A.某目录的直达位置,还在找原因中…

《图片及超链接》

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片及超链接</title>
	</head>
	<body>
		<!-- 
		<img src="路径"/>
		<img src="路径" title="鼠标悬停上去后的提示信息"/>
		<img src="路径" alt="图片不显示之后的提示信息"/>
		<img src="路径" width="设置图片宽度,默认单位是像素"/>
		<img src="路径" height="设置图片高度,默认单位是像素"/> 
		
		<a href="#" 表示空链接>
		<a href="路径" title="鼠标悬停上去后显示的提示" >输入要显示的文字</a>
		<a href="路径" target="_self 实现一个默认窗口的打开"></a>
		<a href="路径" target="_blank 新窗口打开" ></a>
		-->
		<a href="https://www.w3school.com.cn/html/html_images.asp" 
		title="w3school">点我跳转</a>
	</body>
</html>

《列表》

001无序列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 无序列表 -->
		<ul>
		<li>Coffee</li>
		<li>Milk</li>
		</ul><br>
		
		<ul type="disc"> <!-- disc为实心圆(默认值),circle为空心圆,square为方块,none为无任何修饰-->
		<li>Coffee</li>
		<li>Milk</li>
		</ul>
		
	</body>
</html>

002有序列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
<!-- 有序列表 -->
		<ol>
		<li>Coffee</li>
		<li>Milk</li>
		</ol>
		
		<ol type="1"> <!-- A:大写字母序列  a:小写字母序列 i:小写罗马数字序列  I:大写罗马数字序列-->
		<li>Coffee</li>
		<li>Milk</li>
		</ol>
		
		<ol type="a" start="3"> <!-- 定义开始位置,该位置填写数字-->
		<li>Coffee</li>
		<li>Milk</li>
		</ol>
	</body>
</html>

003自定义列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 自定义列表 -->
		<!-- 以 <dl> 标签开始。
		每个自定义列表项以 <dt> 开始,可以插入图片,一般只可以使用一次。
		每个自定义列表项的定义以 <dd> 开始 
		默认无符号样式 后期可通过css添加-->
		<dl>
		<dt>Coffee</dt>
		<dd>Black hot drink</dd>
		<dt>Milk</dt>
		<dd>White cold drink</dd>
		</dl>
	</body>
</html>

《div & span等标签》

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head> 
	<body>
		<!-- 可以通过 <div> 和 <span> 将 HTML 元素组合起来 -->
		<!-- div:是块级元素,浏览器会在其前后显示折行,定义文档中的分区或节 
		如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性 -->
		<div>区域或模块划分</div>
		
		<!-- span:内联元素,用作文本容器,小部分独立内容
		 当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性-->
		 
		 <!-- 上标 -->
		 2<sup>3</sup>
		 <!-- 下标 -->
		 O<sub>2<sub>
		 
		 <!--删除线-->
		 <del></del>
		 
		 <!-- 特殊字符(符号) -->
	</body>
</html>

详细的html符号点击这里🎁

《表单》

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单</title>
	</head>
	<body>
		<!-- 创建一个表单 -->
		
		<!-- action 属性定义在提交表单时执行的动作。设置数据传递之后给谁?
		<form action="action_page.php"> 
		-->
		
		<!-- method 属性规定在提交表单时所用的 HTTP 方法(GET 或 POST):
		<form action="action_page.php" method="get">
		如果表单提交是被动的(比如搜索引擎查询),并且没有敏感信息。使用get时,表单数据在页面地址栏中是可见的
		或:
		<form action="action_page.php" method="post"> 
		如果表单正在更新数据,或者包含敏感信息(例如密码)。post的安全性更好,因为在页面地址栏中被提交的数据是不可见的
		-->
		
		<form>
			<!-- 表单控件 -->
			<!-- 输入框 -->
			<!-- input属性:
			type:类型 
			name:主要是为了提交的时候计算机知道提交的用户是谁,但不显示
			value:值,显示内容
			placeholder:设置提示信息-->
			<input type="text" name="te" placeholder="请输入用户名"/>      <!-- 文本框-->
			<input type="password" name="ae"/>  <!-- 密码框 -->
			<input type="submit" name="ye" value="登录"/>    <!-- 提交按钮框-->
			
			<br>
		    <!-- 其他表单控件 -->
			<button>提交按钮</button>
			
			<br>
			<!-- radio:单选按钮 -->
			性别 
			男<input type="radio" name="sex" value=""/><input type="radio" name="sex" value=""/>
			<!-- 单选按钮中name必须添加且同组的属性值必须一样,不同组的属性值不一样 -->
			
			<br>
			<!-- checkbox:多选按钮 -->
			爱好
			武术<input type="checkbox" name="like" value="武术"/>
			跆拳道<input type="checkbox" name="like" value="跆拳道"/>
			拳击<input type="checkbox" name="like" value="拳击"/>
			<!-- value在选择中的作用是定义与输入相关联的值 -->
			
			<br>
			<!--checked:已选,默认 -->
			省市
			北京市<input type="radio" name="pro" value="贵州省"/>
			贵州省<input type="radio" name="pro" value="贵州省" checked="checked"/>
			
			<br>
			<!-- select:下拉菜单 --> 
			<!-- 若需要默认则<option selected="selected">北京</option> -->
			<select>
				<option>北京</option>
				<option>贵州</option>
				<option>重庆</option>
				<option>海南</option>
				<!-- 若要在结束标签后加内容则 <option>北京<option/>弗洛伦萨 -->
			</select>
			
			<br><br/></br>  <!-- 三种都可以用 -->
			<!-- textarea:文本框 -->
			<textarea name="message" rows="10" cols="30">
			The cat was playing in the garden.</textarea>
			<br><br>
			  <input type="submit">
		</form>	
	</body>
</html>

form属性的列表🎁
html表单属性🎁
html输入类型(及限制)🎁

value的作用体现如下图:
value的作用体现

《表格》

表格相关属性
(图源:zh-qfjy)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格</title>
	</head>
	<body>
		<table border="1" width="100" height="400">
			<!-- 创建表格 边框像素为1,还可以改边框bordercolor或背景颜色bgcolor-->
			<tr>
				<th>列1</th> <!-- 表格的表头使用 <th> 标签进行定义。大多数浏览器会把表头显示为粗体居中的文本:-->
				<th>列2</th>
			</tr>
			<tr>
				<!-- tr:表示行-->
				<td>1</td> <!-- td:表示单元格-->
				<td>2</td>
			</tr>
			<tr>
				<td>3</td>
				<td>4</td>
			</tr>
		</table>

		<br>
		<!-- 合并列 colspan="需合并的列数"-->
		<table border="1" width="400" height="400" cellspacing="10" cellpadding="30">
			<tr valign="bottom">
				<!-- 垂直对齐:valign="bottom"不能给table-->
				<td colspan="2">7</td> <!-- 把合并的另一个删掉-->
				<!-- <td>8</td> -->
			</tr>
			<tr>
				<td>5</td>
				<td>6</td>
			</tr>
		</table>

		<br>
		<!-- 合并行 rowspan="需合并的行数"  -->
		<!-- 合并行和列 先合并哪个都可以-->
		<table border="1" width="400" height="400">
			<tr>
				<td rowspan="3">9</td>
				<td>2</td>
				<td>w</td>
			</tr>
			<tr>
				<!--1 <td>1</td> -->
				<!-- 此时需要把被合并的不需要的行删掉-->
				<td colspan="2" rowspan="2">8</td>
				<!--2 <td>a</td> -->
			</tr>
			<tr>
				<!--1 <td>5</td> -->
				<!--3 <td colspan="2">4</td> -->
				<!--2 <td>g</td> -->
				<!-- 123为先后删掉的顺序 但最后一个<tr>不可以删 -->
			</tr>
		</table>

	</body>
</html>

html表格🎁