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包含trtr中包含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才能进行单选。

valueinput的默认值。

checked默认选中项主要用于单选按钮和多选按钮。

maxlengthinput标签的最大长度。

文本框

姓名<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