黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程（HTML）

透明质酸钠

已于 2022-02-12 00:13:45 修改

阅读量1.9k

点赞数 4

文章标签： html5 css3 html

于 2021-09-27 19:36:38 首次发布

本文链接：https://blog.csdn.net/m0_51448653/article/details/120510456

版权

一、基础班学习路线

在这里插入图片描述

二、HTML5基础

1.网页的相关概念

什么是网页

网站是网页的集合
网页是网站中的一页，通常是HTML格式的文件，网页是构成网站的基本元素，常见以**.htm或.html**后缀结尾的文件

什么是HTML

HTML指的是超文本标记语言，它是用来描述网页的语言
HTML不是一种编程语言，而是一种标记语言。标记语言是一套标记标签。

2.DOCTYPE和lang以及字符集的作用

文档类型声明标签

$<! D O C T Y P E >$ 文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页
<!DOCTYPE html> 表示当前页面采取的是html5版本来显示网页

lang语言种类

用来定义当前文档显示的语言
<html lang="en">
1.en定义语言为英语
2.zh-CN定义语言为中文

字符集

字符集是多个字符的集合
在 < head>标签内，可以通过 < meta>标签的charset属性来规定html文档应该使用哪种字符编码
<meta charset="UTF-8">
UTF-8也被称为万国码

3.标题标签

<h1> 我是一级标题 </h1>

在这里插入图片描述

4.段落标签和换行标签

$$ 标签用于定义段落，它可以将整个网页分为若干个段落
 我是一个段落标签 
特点：
1.文本在一个段落中会根据浏览器窗口大小自动换行
2.段落和段落之间保有空隙

在这里插入图片描述
效果为：

应改为：
在这里插入图片描述

一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签 $$
break
特点：
1. 是个单标签
2. 标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距（见下图）

在这里插入图片描述
或者

就会显示为：

5.文本格式化标签

在网页中，有时需要为文字设置粗体、斜体或者下划线等效果，以特殊方式显示

6.div和span标签

< div>和是没有语义的，它们就是一个盒子，用来装内容的
division 分区，分割；span跨度，跨距
div标签用来布局，但是一行只能放一个div，大盒子
span标签用来布局，一行上可以放多个span，小盒子

在这里插入图片描述
显示为：

7.图像标签

$$ 标签用于定义html页面中的图像
image
<img src="图像URL" / >
src是img标签的必须属性，它指定图像文件的路径和路径名
高度和宽度一般情况下修改一个就可以，会等比例缩放
路径之相对路径：
路径之绝对路径：

在这里插入图片描述

相对路径中是/，绝对路径中是、，不过完整的网络地址里的“复制图片地址”中又是/
绝对路径使用较少

8.链接标签

a标签用于定义超链接，作用是从一个页面链接到另一个页面
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>
anchor锚

链接的分类

在这里插入图片描述

锚点链接：

9.注释和特殊字符

注释：

在这里插入图片描述

特殊字符：

10.表格标签

表格主要作用：
表格的基本语法：

表头单元格标签

在这里插入图片描述

表格相关属性

在这里插入图片描述

表格结构标签

th是表头单元格，thead是表头区域一整块

合并单元格

在这里插入图片描述

11.列表标签

在这里插入图片描述

无序列表（重点）

在这里插入图片描述

有序列表

在这里插入图片描述

自定义列表

在这里插入图片描述

列表总结

在这里插入图片描述

12.表单标签

在这里插入图片描述

表单的组成：

表单域

在这里插入图片描述

表单控件（表单元素）

在这里插入图片描述

input表单元素

type属性文本框和密码框：
type属性单选按钮和复选按钮
name和value属性

在这里插入图片描述

checked和maxlength属性
type属性提交和重置按钮
type属性普通按钮和文件域

label标签

在这里插入图片描述

select下拉表单

在这里插入图片描述

textarea文本域标签

在这里插入图片描述

案例-注册页面

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zhuce</title>
</head>
<body>
    <h4>青春不常在，抓紧谈恋爱</h4>
    <table>
        <tr>
            <td>
                性别
            </td>
            <td>
                <input type="radio" id="nan" name="sex"> <label for="nan">男</label>
                <input type="radio" id="nv" name="sex"> <label for="nv">女</label>
            </td>
        </tr>
        <tr>
            <td>
                生日
            </td>
            <td>
                <select name="" id="">
                    <option value="">--请选择年--</option>
                    <option value="">1999</option>
                    <option value="">2000</option>
                    <option value="">2001</option>
                </select>
                <select name="" id="">
                    <option value="">--请选择月--</option>
                    <option value="">1</option>
                    <option value="">2</option>
                    <option value="">3</option>
                </select>  
                <select name="" id="">
                    <option value="">--请选择日--</option>
                    <option value="">1</option>
                    <option value="">2</option>
                    <option value="">3</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                所在地区
            </td>
            <td>
                <input type="text" value="北京思密达">
            </td>
        </tr>
        <tr>
            <td>
                婚姻状况
            </td>
            <td>
                <input type="radio" name="marry" id="hun"> 未婚
                <input type="radio" name="marry" id="li"> 离婚
                <input type="radio" name="marry" id="yi"> 已婚
            </td>
        </tr>
        <tr>
            <td>
                学历
            </td>
            <td>
                <input type="text" value="幼儿园">
            </td>
        </tr>
        <tr>
            <td>
                喜欢的类型
            </td>
            <td>
                <input type="checkbox" name="like"> 妩媚的
                <input type="checkbox" name="like"> 可爱的
                <input type="checkbox" name="like"> 小鲜肉
                <input type="checkbox" name="like" checked="checked"> 都喜欢
            </td>
        </tr>
        <tr>
            <td>
                自我介绍
            </td>
            <td>
                <textarea name="" id="" cols="30" rows="10">自我介绍</textarea>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="submit" value="免费注册">
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="checkbox" name="" id="" checked="checked">我同意注册条款和会员加入标准
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <a href="#">我是会员，立即登录</a>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <h3>我承诺</h3>
                <ul>
                    <li>年满十八岁</li>
                    <li>抱着严肃的态度</li>
                    <li>真诚寻找另一半</li>
                </ul>
            </td>
        </tr>
    </table>
</body>
</html>