一、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键会随机生成一个段落。

常用的转义字符

在段落中如果用到多个空格和一些特殊符号就需要用到转义字符，下表是一些常见的转义字符：

原始字符转义字符
" &quot
& &amp
< &lt
> &gt
连续空格 &nbsp

换行标签

换行标签：<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