HTML 初识
段落标签<p>
<!-- 段落标签 -->
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, voluptate iure. Obcaecati explicabo sint ipsum impedit! Dolorum omnis voluptas sint unde sed, ipsa molestiae quo sapiente quos et ad reprehenderit.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia nam assumenda harum voluptate vel minus nesciunt aspernatur, expedita reiciendis officiis exercitationem odit at fugit eos voluptatum nisi voluptatem dolorem labore.
</p> 利用<p></p>可以分段，在其中输入多个空格大概换行都只是相当于输入一个空格。
https://i-blog.csdnimg.cn/direct/836a530fbb424954a8d0fc07dd0a01c2.png
空格符
如果要有多个空格，则须要 利用HTML的空格符：
https://i-blog.csdnimg.cn/direct/5eec37081f7946eabc74bfbb8747fbdf.png
下面是示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>我的第一个HTLM文件</title>
</head>
<body>
<!-- <h1>一级标题</h1>
<h2>二级标题</h1>
<h3>三级标题</h1>
<h4>四级标题</h1>
<h5>五级标题</h1>
<h6>六级标题</h1> -->
<p>
<!-- 段落标签 -->
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, voluptate iure. Obcaecati explicabo sint ipsum impedit! Dolorum omnis voluptas sint unde sed, ipsa molestiae quo sapiente quos et ad reprehenderit.
</p>
<p>
<!-- 非断行空格 -->
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum sapiente fugiat excepturi, qui amet laboriosam necessitatibus, tempore officia ipsa hic numquam asperiores, eaque quae velit doloribus illum modi! Cum, aspernatur.
</p>
<!--   半角空格，宽度为当前字体的一半 -->
 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea iste architecto incidunt. Numquam, earum, autem vero aliquid reprehenderit repudiandae voluptatibus quasi minus repellendus quod provident itaque a iure illum beatae.
<p>
<!--   全角空格，宽度等于当前字体-->
 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat fugiat aliquam delectus veritatis tempore. Laboriosam veniam odit laborum officiis sed est temporibus quas, ducimus alias culpa voluptatibus ad illum libero.
</p>
<p>
<!--  窄空格，宽度小于一个字符 -->
 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam dolor tempore nobis, eius consequatur veniam quasi id? Quae, rerum voluptatibus inventore accusantium tempore sapiente temporibus! Officia autem ducimus error magni.
</p>
</body>
</html> 可以自行比对一下这些空格符号的区别。
https://i-blog.csdnimg.cn/direct/97fbafe1bcd94b30847b803d1633954f.png
换行符
换行符<br/>大概<br>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>第一个HTLM文件</title>
</head>
<body>
<p>
第一行<br/>
第二行<br>
第三行
</p>
</body>
</html> 下面是刷新后的页面表现：
https://i-blog.csdnimg.cn/direct/cc77e74985944905b13b040dad2ab91f.png
图片标签
<img src="" alt="" width="" height="">
img：标签。src、alt：标签的属性，width、teight：宽度和高度，只设置一个会高宽等比例缩放
src可以填本机的图片的绝对路径，也能复制网上的图片链接。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>第一个HTLM文件</title>
</head>
<body>
<img src="https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg!r650" alt="这是一个图片">
</body>
</html> 运行效果可以自行试试。
超链接：a
外部链接
<a href = "https://www.baidu.com/index.php?tn=75144485_1_dg&ch=9">百度</a>
href：表示点击后会跳转到哪个页面，
target：打开方式，默认_self，如果是_blank，则用新标签页打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>第一个HTLM文件</title>
</head>
<body>
<a href = "https://www.baidu.com/index.php?tn=75144485_1_dg&ch=9" target="_blank">百度</a>
</body>
</html> href内填的是网页的连接地点，target是转跳方式，在这里_blank是以新页面打开超链接。
内部链接
<a href="test1.html" target="_blank">test1</a><br>
test1.html是本机上的一个html文件，我们也可以通过指定本机的绝对路径大概是相对路径进行转跳。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>第一个HTLM文件</title>
</head>
<body>
<a href="test1.html"target="_blank">test1</a><br>
</body>
</html> 下载文件
<a href="1.rar">下载文件</a>
href链接如果是个压缩包，点击链接可以下载对应路径下已经已创建的压缩文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>第一个HTLM文件</title>
</head>
<body>
<a href="1.rar">下载文件</a>
</body>
</html> 表格标签
table标签：表示表格
tr：表示表格的一行
tb：表示一个单元格
thead：表格的头部区域
tbody：表格的主题区域
table包含tr、tr包含tb
table的参数：style可以设置表格的长宽，border设置线的粗细和颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>第一个HTLM文件</title>
</head>
<body>
<table style="width: 500px;height: 400;" border="1px black">
<tr>
<td colspan="2">a</td>
<!-- <td>b</td> -->
</tr>
<tr>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>e</td>
<td>f</td>
</tr>
<tr>
<td>g</td>
<td>h</td>
</tr>
<tr>
<td>i</td>
<td>j</td>
</tr>
</table>
</body>
</html> 生成的单元格长这样：
https://i-blog.csdnimg.cn/direct/f6e43ca28cdf4fc1aaff700c25e0dce2.png
如果不想要边框，我们可以在table接着添加其他的参数，如：cellspacing = "0"可以去掉空缺线
<table style="width: 500px; height: 400;" border="1px black" cellspacing = "0">
单元格合并
<tr>
<td colspan="2">a</td>
<!-- <td>b</td> -->
</tr>
td标签里添加colspan = ""与rowspan=""标签可以选择合并单元格行列：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>第一个HTLM文件</title>
</head>
<body>
<table style="width: 500px;height: 400;" border="1px black" cellspacing = "0">
<tr>
<td colspan="2">a</td>
<!-- <td>b</td> -->
</tr>
<tr>
<td>c</td>
<td rowspan="3">d</td>
</tr>
<tr>
<td>e</td>
<!-- <td>f</td> -->
</tr>
<tr>
<td>g</td>
<!-- <td>h</td> -->
</tr>
<tr>
<td>i</td>
<td>j</td>
</tr>
</table>
</body>
</html> https://i-blog.csdnimg.cn/direct/7eb49845a58a4b0998aec0ddec70aec4.png
表单标签
1：表单域
包含表单元素的区域.重点是form标签
2：表单控件
输⼊框,提交按钮等.重点是input标签
form 标签
<form action="test.html">
... [form
的内容
]
</form> 描述了要把数据按照什么⽅式,提交到哪个⻚⾯中
input 标签
各种输⼊控件,单⾏⽂本框,按钮,单选框,复选框。
type(必须有),取值种类许多,button,checkbox,text,file,image,password,radio等.。
name:给input起了个名字.尤其是对于单选按钮,具有相同的name才能多选⼀。
value:input中的默认值，转达给后端判断前端的选择。
checked:默认被选中.(⽤于单选按钮和多选按钮)。
selected：默认被选中值。
placeholder：在输入框里表现的字体。
用户名(文本框)text
<input type="text" size="30" placeholder="请输入用户名"> size：最大字数
密码 password
<input type="password" size="30" placeholder="请输入密码"> 单选按钮 radio
<input type="radio" name = "gender"id = "gender1"> <label for ="gender1">男</label>
<input type="radio" name = "gender"id = "gender2"> <label for ="gender2">女</label>
<input type="radio" name = "gender"id = "gender3"> <label for ="gender3">保密</label><br>
lable标签可以点击其中的内容选定按钮；单选框之间必须具备相同的name属性,才能实现多选⼀效果
复选框checkbox
<input type="checkbox" name="hobby" id="" value="1">篮球
<input type="checkbox" name="hobby" id="" value="2">足球
<input type="checkbox" name="hobby" id="" value="3">羽毛球
<input type="checkbox" name="hobby" id="" value="4">排球
<input type="checkbox" name="hobby" id="" value="5">篮乒乓球<br> 按钮方法
<button>这是button标签，按钮1</button>
<input type="button" name="" id="" value="按钮2">
<input type="submit" value="按钮3，提交，搭配form标签使用"> 下拉标签Subject
专业：<select name="" id="">
<option name="Subject" value="1">大数据</option>
<option name="Subject"value="2"selected>软件工程</option>
<option name="Subject" value="3">物联网</option>
<option name="Subject" value="4">人工智能</option> selected:默认选项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单练习</title>
</head>
<body>
<form action="test1.html" method="get"><!--action提交给谁，method以什么方式提交（传参） -->
用户名(文本框) <input type="text" size="30"><br>
密码（密码框）<input type="password" size="30"><br>
单选按钮 <input type="radio" name = "gender"id = "gender1" value="1"> <label for ="gender1">男</label>
<input type="radio" name = "gender"id = "gender2" value="2"> <label for ="gender2">女</label>
<input type="radio" name = "gender"id = "gender3" value="3"> <label for ="gender3">保密</label><br>
复选框<input type="checkbox" name="hobby" id="" value="1">篮球
<input type="checkbox" name="hobby" id="" value="2">足球
<input type="checkbox" name="hobby" id="" value="3">羽毛球
<input type="checkbox" name="hobby" id="" value="4">排球
<input type="checkbox" name="hobby" id="" value="5">篮乒乓球<br>
<!-- 下拉标签 -->
专业：<select name="" id="">
<option name="Subject" value="1" >大数据</option>
<option name="Subject"value="2"selected>软件工程</option>
<option name="Subject" value="3">物联网</option>
<option name="Subject" value="4">人工智能</option><br>
</select>
<!-- 文本域 -->
个人简介：<textarea rows="10" cols="50"></textarea>
<!-- <button>这是button标签（按钮第一种写法，可以搭配form标签使用）</button>
<input type="button" name="" id="" value="按钮第二种方法"> -->
<input type="submit" value="第三种按钮，提交，搭配form标签使用">
</form>
</body>
</html> 下面是打开后的样子 ：https://i-blog.csdnimg.cn/direct/c06c1fef489f482c96704eb6e6ab616b.png
无语义标签div&span
div 标签,division 的缩写,寄义是分割 span标签,寄义是跨度。
就是两个盒⼦.⽤于⽹⻚结构。
div是独占⼀⾏的,是⼀个⼤盒⼦，span不独占⼀⾏，是⼀个⼩盒⼦。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>一个div</div>
<div>一个div</div>
<div>一个div</div>
<span>一个span</span>
<span>一个span</span>
<span>一个span</span>
</body>
</html> https://i-blog.csdnimg.cn/direct/38045eefc6144437a7f73d1a05cefa86.png
实战：创建一个登录页面
由于我们并不须要真的转达给后端，所以在这做个壳子就行了。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>用户注册</title></head><body> <h1>用户注册</h1> <table> <tr> <td>用户名</td> <td> <input type="text"placeholder="请输入用户名"> </td> </tr> <tr> <td>手机号</td> <td> <input type="text" size="30" placeholder="请输入手机号"> </td> </tr> <tr> <td>密码</td> <td> <input type="password" size="30" placeholder="请输入密码"> </td> </tr> </table> <div> <button>注册</button><span>已有账号？</span><a href="#">登录</a> </div> </body></html>
https://i-blog.csdnimg.cn/direct/c43299d164f24ab9acd59043e0c01d74.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]