HTML基础

 HTML常用的标签

 标题标签

<h1>标题一共六级选</h1>
<h2>文字加粗一行显</h2>
<h3>由大到小依次减</h3>
<h4>从重到轻随之变</h4>
<h5>语法规范书写后</h5>
<h6>具体效果刷新见</h6>

段落标签和换行标签

<p>这是一个段落标签</p>

<p>这是一个段落<br/>标签</p>

文本格式化标签

		<b>加粗文本：学而不思则罔，思而不学则殆</b><br>
		<em>定义强调文本：学而不思则罔，思而不学则殆</em><br>
		<i>定义斜体文本：学而不思则罔，思而不学则殆</i><br>
		<big>定义大号字体文本：学而不思则罔，思而不学则殆</big><br>
		<small>定义小号字体文本：学而不思则罔，思而不学则殆</small><br>
		<strong>定义粗体文本：学而不思则罔，思而不学则殆</strong><br>
		<ins>定义插入文本：学而不思则罔，思而不学则殆</ins><br>
		<del>定义删除文本：学而不思则罔，思而不学则殆</del><br>
		<!--<sub>定义下表文本</sub>   <sup>定义上标文本</sup><br>-->
		<p>A<sub>2</sub>+B<sup>3</sup></p>
		

<div> 和 <span> 标签

<div> 和 <span>没有语义，它们就是一个盒子，用来装内容的

<div>我是一个div标签，我一个人独占一行</div>
<div>我是一个div标签，我一个人独占一行</div>

<span>百度</span>
<span>搜狐</span>
<span>新浪</span>

图像标签

<img src="图像URL" >
		

src是<img>标签的必须属性,它用于指定图像文件的路径和文件名 

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，图像不能显示文字
title	文本	提示文本，鼠标放到图像上，显示文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

<img src="img/刘德华.jpg" alt="刘德华" title="刘德华" width="500" border="15">

超链接标签

外部链接

<a href="https://www.baidu.com" target="_self">百度一下</a>
<a href="https://www.baidu.com" target="_blank">百度一下</a>

target 打开窗口的方式默认的值是_self 当前窗口打开页面，_blank新窗口打开页面

内部链接

网站内部页面之间的相互链接

<a href="index.html">首页</a>
		

空连接

<a href="#">空链接</a>

下载链接

下载链接：地址链接的是 文件 .exe 或者是zip 等压缩包形式

<a href="img.zip">下载文件</a>

网页元素的链接

图片添加链接

<a href="http://www.baidu.com"><img src="img/刘德华.jpg" ></a>

瞄点链接

<a href="#live">个人生活</a>
<p>....</p><br>
<h3 id="live">个人生活</h3>
<p>....</p><br>
<a href="#top">回到顶部</a>

注释

快捷键 CTRL+ L

特殊字符

HTML 原代码	显示结果	描述
&lt；	<	小于号或显示标记
&gt；	>	大于号或显示标记
&amp；	&	可用于显示其它特殊字符
&quot；	“	引号
&reg；	®	已注册
&trade；	™	商标
&ensp；		半个空白位
&emsp；		一个空白位
&nbsp；		不断行的空白

表格

表格标签

<table>
    <tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
	<tr><td>刘德华</td> <td>男</td> <td>56</td></tr>
	<tr><td>梁朝伟</td> <td>男</td> <td>59</td></tr>
	<tr><td>张学友</td> <td>男</td> <td>57</td></tr>
</table>

table是用于定义表格的标签； tr标签用于定义表格中的行，必须嵌套在table中；th标签是表格的表头部分，会加粗居中显示；td用于定义表格中的单元格，必须嵌套在tr标签中。

表格的属性

align：规定表格相对周围元素的对齐方式，left, center, right

border：规定表格是否拥有边框,默认没有边框

cellspacing：规定单元格之间的空白，默认2像素

cellpadding：规定单元边沿与其内容之间的空白，默认1像素

width：宽

height：高

<table align="center" border="1" cellspacing="0" cellpadding="20" width="500" height="250">			
	<tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
	<tr><td>刘德华</td> <td>男</td> <td>56</td></tr>
	<tr><td>梁朝伟</td> <td>男</td> <td>59</td></tr>
	<tr><td>张学友</td> <td>男</td> <td>57</td></tr>
</table>
		

表格结构标签

thead：用于定义表格的头部

tbody：用于定义表格的主体

<table >
	<thead>
		<tr>
			<th>Header</th>
            <th>Header</th>
		</tr>
	</thead>
		

	
	<tbody>
		<tr>
			<td>Data</td>
            <td>Data</td>
		</tr>
	</tbody>
			
</table>
		
		

合并单元格

跨行合并：rowspan = "合并单元格的个数"

跨列合并：colspan = "合并单元格的个数"

<table border="1" cellspacing="0"  width="500" height="250">
	<tr>
		<td></td>
		<td colspan="2"></td>
	</tr>
			
	<tr>
		<td rowspan="2"></td>
		<td></td>
		<td></td>
	</tr>

	<tr>		
		<td></td>
		<td></td>
	</tr>
</table>

表格综合案例

####https://blog.csdn.net/Queen741740155/article/details/136889997?spm=1001.2014.3001.5501

列表

无序列表

<ul>
	<li>刘德华</li>
	<li>黎明</li>
	<li>张学友</li>
	<li>郭富城</li>
</ul>
		

ul标签中只能嵌套li标签，li标签中可以嵌套任何标签。

有序列表

<ol>
	<li>刘德华</li>
	<li>黎明</li>
	<li>张学友</li>
	<li>郭富城</li>
</ol>

自定义列表

<dl>
	<dt>关注我们</dt>
			
	<dd>新浪微博</dd>
	<dd>官方微信</dd>
	<dd>联系电话</dd>
</dl>

表单标签

表单域

<form action="url地址" method="提交方式" name="表单域名称">
	各种表单元素控件
</form>
		

表单控件

1.input输入表单元素

<input type="属性值" name="" id="" value="" />

type属性值

<form>
	<!-- text 文本框 用户可以在里面输入任何文字 -->
	用户名：<input type="text" name="username" value="请输入用户名" maxlength="6"> <br>
	<!-- password 密码框 用户看不见输入的密码 -->
	密码：<input type="password" name="password"> <br>
	<!-- radio 是单选按钮 可以多选一 -->
	<!-- name 是表单元素名字 这里性别按钮必须有相同的名字name 才可以实现多选一 -->
	<!-- 单选按钮和复选框可以设置checked属性，当页面打开时就可以默认选中这个按钮 -->
	性别：男<input type="radio" name="sex" value="男" checked="checked"> 女<input type="radio" name="sex" value="女"><br>
	<!-- checkbox 复选框 可以实现多选一 -->
	爱好：吃饭<input type="checkbox" name="hoppy">睡觉<input type="checkbox" name="hoppy"> 打游戏<input type="checkbox" name="hoppy"><br>
			
	<!-- 点击了提交按钮，可以把 表单域form 里面的表单元素 里面的值 提交给后台服务器 -->
	<input type="submit" value="免费注册" /><br>
	<!-- 重置按钮可以还原表单元素初始的默认状态 -->
	<input type="reset" value="重置" /><br>

    <!-- 普通按钮 button 后期结合js搭配使用 -->
	<input type="button" value="获取短信验证码"/><br>
			
	<!-- 文件域 使用场景 上传文件使用 -->
	<input type="file"  />
</form>
		

input其他属性值

<input type="" name="" id="" value="" checked="" maxlength="">

<!-- 单选按钮和复选框可以设置checked属性，当页面打开时就可以默认选中这个按钮 -->
	性别：男<input type="radio" name="sex" value="男" checked="checked"> 女<input type="radio" name="sex" value="女"><br>

2.select下拉表单元素

<form action="" method="">
			籍贯：<select>
				<option value =""></option>
				<option value ="">山东</option>
				<option value ="">安徽</option>
				<option value ="">浙江</option>
				<option value ="">江苏</option>
				<option value ="">北京</option>
				<option value ="">上海</option>
				 <!-- selected="selected"默认显示   "其他" -->
				<option value ="" selected="selected">其他</option>
				
			</select>
			
		</form>
		

3.textarea文本域元素

textarea标签是用于定义多行文本输入的控件

<form >
			<!-- 3行，一行50个字符 -->
			今日反馈：<textarea rows="3" cols="50">提示信息：</textarea>
		</form>

4.label标签

label标签用于绑定一个表单元素，label标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验

<form>
			<label for="text">用户名：</label><input type="text" name="" id="text" value="" />
		</form>

for = ""           id = "" 

综合案列

####