目录
一、HTML基础知识
二、HTML常见标签
注释标签
标题标签
段落标签
常用的转义字符
换行标签
格式化标签
图片标签
超链接标签
表格标签
列表标签
input标签
文本框
密码框
单选框
复选框
普通按钮
选择文件
下拉标签
多行文本输入
无语义标签
div
span
三、综合案例
1、简单的相亲页面注册
2、相亲的简历信息
一、HTML基础知识
HTML代码由大量的标签组成。
HTML文件的基本结构:
<html>
<head>
<title>页面标题</title>
</head>
<body>
页面内容
</body>
</html>
在这个基本结构中也会体现出标签的层次关系:
- 父子关系:html是head和body的父标签,head是title的父标签。
- 兄弟关系:head和body是兄弟关系。
对于HTML代码文件可以在记事本进行编写,只要确保后缀名是.html,然后双击就会文件就会在浏览器中进行页面展示,HTML也可以在IDEA等开发工具中编写,输入!+tab就会自动生成HTML文件的基本框架。
二、HTML常见标签
注释标签
注释标签:
<!-- 注释 -->
可以选中注释内容,使用快捷点crtl+/来进行注释或者取消注释。
标题标签
标题标签:
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
注意:
- HTML拥有六级标签,标签字体逐渐变小。
- 标题标签会自动换行,不需要在其后加上换行符。
段落标签
段落标签:<p> 段落内容 </p>
注意:
在段落中手动不管输入多少个空格,在运行显示的时候只有一个空格。
在段落中手动输入一个换行,只是相当于空格,并不会真的换行。
HTML的段落中无法设置首行缩进,需要用CSS来完善。
输入lorem之后再加tab键会随机生成一个段落。
常用的转义字符
在段落中如果用到多个空格和一些特殊符号就需要用到转义字符,下表是一些常见的转义字符:
原始字符 转义字符 " " & & < < > > 连续空格  
换行标签
换行标签:<br/>
换行标签是一个单标签,不存在结束标签。
格式化标签
格式化标签:
- 加粗:<strong> 加粗 <strong> 或 <b> 加粗 </b>
- 倾斜:<em> 倾斜 </em> 或 <i> 倾斜</i>
- 删除线:<del> 删除线 </del> 或 <s> 删除线 </s>
- 下划线:<ins> 下划线 </ins> 或 <b> 下划线 </b>
图片标签
图片标签:
<img src="图片地址" alt="替换文本" title="提示文本" width= " px" height=" px" border=" px">
注意:
- 图片标签中必须带有src属性,其他可以省略,并且各属性的顺序随意。
- src中可以是绝对地址或相对地址。
- 替换文本指的是图片加载失败了就会显示出来,如果图片加载成功就不会显示。
- title提示文本是当你把鼠标放到图片上时就会出现。
- width、height、border是用于设置图片宽度、高度和边框,单位是px(像素)。
超链接标签
超链接标签:
<a href="网站地址" target="打开方式"> 超链接 </a>
注意:
- href是超链接文件中必须具备的,指定要跳转到那个页面。href可以直接输入网址,也可以另一个HTML文件,还可以是一个文件名表示下载链接。
- target指的是打开的方式,有_self表示在原标签页打开,还有_blank会用新的标签页打开。
- href等于"#",表示是一个空链接。
- 超链接不一定只是文字,也可以是图片等,例如双击图片就会跳转页面。
表格标签
表格标签有:
- table:表示整个表格。
- tr:表示表格的一行。
- td:表示一个单元格。
- th:表示表头单元格,默认会居中加粗。
table包含tr,tr中包含td或th。
table标签中也有多个属性:
- align:表格相对于周围元素的对齐方式。
- border:表示边框宽度。
- cellpadding:内容距离边框的距离,默认是1px。
- cellspacing:单元格之间的距离,默认是2px。
- width:设置表格宽度。
- height:设置表格的宽度。
列表标签
列表标签可以使页面布局更加美观。
列表标签有:
无序列表:<ul>
<li>列表1</li>
<li>列表2</li>
……
</ul>
有序列表:
<ol>
<li>列表1</li>
<li>列表2</li>
……
</ol>
自定义列表:
<dl>
<dt>小标题</dt>
<dd>列表1</dd>
<dd>列表2</dd>
……
</dl>
input标签
input标签包含各种输入控件,有单行文本框、按钮、单选框和复选框。
input标签的属性有:
type(类型标签,必须包含):可以是text、button、checkbox等。
name:给input起名字,例如对于单选按钮,具有相同的name才能进行单选。
value:input的默认值。
checked:默认选中项,主要用于单选按钮和多选按钮。
maxlength:input标签的最大长度。
文本框
姓名<input type="text">
效果:
密码框
密码<input type="password">
效果:
单选框
简易版本:点击按钮才能选中,单击文字无效。
性别<input type="radio" name="gender"> 男 <input type="radio" name="gender"> 女
升级版本:单击文字也代表选中,需要搭配label标签来进行使用,默认性别选择男。
性别<input type="radio" name="gender" id="male" checked="checked"> <label for="male">男</label> <input type="radio" name="gender" id="female"> <label for="female">女</label>效果:
注意:
- 单选框中每个选项的name必须相同。
- label标签的作用是点击文字也能选中,但是label标签的for属性内容要与单选框中的id进行对应。
复选框
兴趣爱好<input type="checkbox"> 打篮球 <input type="checkbox"> 羽毛球 <input type="checkbox"> 刷抖音 <input type="checkbox"> 躺平复选框也可以搭配label标签和指定默认选项搭配使用。
效果:
普通按钮
普通按钮<input type="button" value="普通按钮">
效果:
这里点击之后是不会出现任何相应的,后续需要搭配Js来使用。
选择文件
选择文件<input type="file" value="上传文件">效果:
下拉标签
出生地<select> <option>西安</option> <option>上海</option> <option>北京</option> </select>效果:
多行文本输入
备注<textarea rows="5" cols="30"></textarea>效果:
无语义标签
div
div标签独占一行,是一个大盒子。
span
span标签不独占一行,是一个小盒子。
三、综合案例
1、简单的相亲页面注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dating</title>
</head>
<body>
<h1>千里姻缘一线牵</h1>
<img src="dating.jpg" width="500px" height="300px">
<table cellspacing="0" width="300px">
<tr>
<td>姓名 <input type="text"></td>
</tr>
<tr>
<td>性别 <input type="radio" name="sex" id="male">
<label for="male"><img src="male.png" width="10px" height="10px">男</label>
<input type="radio" name="sex" id="female">
<label for="female"><img src="female.png" width="15px" height="15px">女</label>
</td>
</tr>
<tr>
<td>
出生年份 <select>
<option>--请选择年份--</option>
<option>1996</option>
<option>1997</option>
<option>1998</option>
<option>1999</option>
<option>2000</option>
<option>2001</option>
</select>
</td>
</tr>
<tr>
<td>
出生地 <select>
<option>--请选择--</option>
<option>上海</option>
<option>西安</option>
<option>北京</option>
<option>兰州</option>
<option>新疆</option>
<option>杭州</option>
</select>
</td>
</tr>
<tr>
<td>
兴趣爱好 <input type="checkbox"> 打篮球 <input type="checkbox"> 羽毛球
<input type="checkbox"> 刷抖音
</td>
</tr>
<tr>
<td>备注 <textarea cols="20px" rows="3px"></textarea></td>
</tr>
<tr>
<td> <input type="button" value="注册"> </td>
</tr>
</table>
</body>
</html>
效果展示:dating
2、相亲的简历信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Resume</title>
</head>
<body>
<h1>个人基本信息</h1>
<h2>姓名:张子晨</h2>
<img src="hansome.png">
<h3>个人基本信息</h3>
<ul>
<li>身高:185cm</li>
<li>体重:75kg</li>
<li>户籍:陕西省西安市</li>
</ul>
<p>微信:23901311k</p>
<p>抖音主页:<a href="https://www.douyin.com/user/MS4wLjABAAAAQq5YKdWvTtJRyC9l7pelfwrbFpPos_-SzwMZ_Z5BRTD_IVTrv0APr-41xxV4AB5Z">美少年</a> </p>
<h3>个人优势</h3>
<ol>
<li>脾气好</li>
<li>家庭条件优越</li>
<li>阳光幽默</li>
<li>钟情</li>
</ol>
<p><strong>心动不如行动,希望早日找到心仪的另一半</strong></p>
</body>
</html>
效果展示:resume