从0开始开发一个简单web界面的学习笔记(HTML类)

文章目录

• 什么是 HTML 页面
• vscode 开放工具搭建
• 第一个 HTML 页面编写
• vscode 如何快速生成代码框架
• html 标签——注释、标题、段落、换行标签
• 格式化标签
• img 标签(src 属性 01)
• img 属性 02(alt、title、width/height、border)
• a 标签 href 属性
• a 标签 target 属性
• 表格标签 01 基本属性
• 表格标签 02 表格头部 + 表格主体 + 单元格合并
• 列表标签 无序列表
• 列表标签 有序列表 + 自定义列表
• 表单域
• input 文本框
• input 密码框
• input 单选框
• input 复选框、普通按钮
• input 提交清空上传文件
• lable 标签、select 标签、textarea 标签
• 无语义标签 div、span
• 特殊字符

---

什么是 HTML 页面

HTML 叫做超文本标记语言
把它拆分一下拆成：
超文本：（意味着页面支持文本、声音、图片、视频、表格、链接）
标记：（在页面上展示数据就需要标签啦，这些标签就组成了一个个的标记）

HTML 页面是运行在浏览器上面的

vscode 开放工具搭建

1. 点击去下载 vscode
2. 去下插件

第一个 HTML 页面编写

双标签：标签有开始有结束

单标签：只有一个标签

html：html 文件根标签
head：编写页面相关的属性
title：页面的标题
body：页面的内容展示信息

相当于是 DOM 树，所有的标签都是 html 的子标签，head和 body 是兄弟标签，head和 title 是父子标签。每一个标签相当于是一个对象，程序员可以通过这些代码拿到这些对象，拿到之后就可以对这些对象进行增删查改。

关于 DOM 树可以查看这篇文章：什么是 DOM? 你了解 DOM 树吗？

vscode 如何快速生成代码框架

快速生成代码框架
按 ! + 回车

生成结果：

html 标签——注释、标题、段落、换行标签

注释标签，能被用户看到

标题标签：h1-h6
有六个，从 h1-h6 数字越大，字体越小

h1>标题 1 h1>
h2>标题 1 h2>

段落标签：

p>段落标签p>

如果你直接按回车，它会解析成空格，展示在页面上。

换行标签：换行标签换行后，行间隙比段落标签间隙小

br/>

是规范写法，不建议写成

格式化标签

在工作中，一般都是以 CSS 来实现的，但是 HTML 也可以实现同样的效果

加粗标签

strong>加粗标签strong>
或者
b>加粗标签b>

倾斜

em>倾斜标签em>
或者
i>倾斜标签i>

删除线

del>删除线del>
或者
s>删除线s>

下划线

ins>下划线ins>
或者
u>下划线u>

每一个效果的第一种写法除了它本身的效果，还起到强调的效果，强调可以让文本被爬虫获取到。

img 标签(src 属性 01)

img 标签必须搭配着 src 来使用
src 是用来指定图片路径的(绝对路径 / 相对路径)

img src="图片路径">

绝对路径：直接写图片路径 或者 网络上的图片资源
相对路径：./xxx.png 或者 ./img/xxx.png 或者 …/xxx.png

img 属性 02(alt、title、width/height、border)

alt属性：替换文本，当文本不能正确显示的时候，会显示一个替换的文字。alt后面的文案，只有当图片加载出错的时候才会展示，如果图片加载成功，这个文案就不会显示

img src="图片路径 " alt=" 替换文字">

title属性：当你的鼠标移动到图片上时，显示文字

img src="图片路径 " title=" 描述">

示例：

width/height：控制图片宽度高度，宽度和高度一般改一个就行，另外一个会等比例缩放。

img src="图片路径 " height=" 高度 " width=" 宽度">

例如：

img src="图片路径" height="100px">

px：像素，这一张图片上的亮点，像素越大，图片越大

border：边框，参数是宽度的像素，但一般用 CSS 来设定

img src="图片路径" border="10px">

效果展示：这张图片附近的黑框框就是边框

img 后面 可以写多个属性，通过空格或者换行来分隔，属性的先后顺序不影响页面展示。

a 标签 href 属性

超链接标签：a
它包括两个属性

1. href：必须具备，表示点击后会跳转到那个界面
2. target：打开方式。默认是_self（点击后改变当前页面），如果是_blank 则用新的标签页打开。

href属性使用

1. 通过文字跳转到对应的界面

   a href="跳转界面的路径">
       页面上展示的内容
   a>
   

   效果图：点击后跳转到对应的界面
   

2. 跳转到当前页面(刷新页面)

   a href="#">跳转到当前页面(相当于刷新页面)a>
   

   效果图：点击后仍在当前界面
   

3. 通过图片跳转到对应的界面

   a href="跳转界面的路径">
       img src="图片路径" >
   a>
   

   效果图：点击后就会跳转到对应的界面
   

a 标签 target 属性

target：打开方式。默认是 _self（点击后改变当前页面），如果是_blank 则用新的标签页打开(另起一个页面)。

    a href="要跳转到的网址" 
    	target="这里可以写 _self 或者 _blank">
        	跳转
    a>

表格标签 01 基本属性

表格标签基本使用 01 –table

table标签：表示整个表格
tr：表示表格的一行
td：表示一个单元格
th：表示表头单元格，会居中加粗

table 包含 tr，tr 包含 td 或者th

表格标签有一些属性，可以用于设置大小边框等，但是一般使用 CSS 方式来设置。这些属性都要放到 table 标签中

• align 是表格相对于周围元素的对齐方式。align=“center”（不是内部元素的对齐方式）
• border表示边框，1 表示有边框（数字越大，边框越粗），”” 表示没边框
• cellpadding：内容距离边框的距离，默认 1 像素
• cellspacing：单元格之间的距离，默认为 2 像素
• width / height：设置尺寸

注意这几个属性，vscode 都提示不出来

示例：

    
    table align="left" border="1" cellpadding="50"
           cellspacing="0" width="500" height="200">
           
        
        tr>
            td>姓名td>
            td>性别td>
            td>年龄td>
        tr>
        
        tr>
            td>张三td>
            td>男td>
            td>32td>
        tr>
        
        tr>
            td>李四td>
            td>男td>
            td>24td>
        tr>
    table>

效果图：

表格标签 02 表格头部 + 表格主体 + 单元格合并

thead：表格的头部区域（注意和 th 区分，范围是比 th 要大的）
tbody：表格得到主体区域

thead 里面的内容 居中 + 加粗 展示。
我们通常把表头相关信息放在 thead 里，而表格内容相关信息放在 tbody 里

示例：

    table border="1" width="500"
     height="200" cellspacing="0"
      cellpadding="50"
      align="left">
        
        thead>
            tr>
                th>姓名th>
                th>性别th>
                th>年龄th>
            tr>
        thead>
        tbody>
            
            tr>
                td>姓名td>
                td>性别td>
                td>年龄td>
            tr>
            
            tr>
                td>张三td>
                td>男td>
                td>32td>
            tr>
            
            tr>
                td>李四td>
                td>男td>
                td>24td>
            tr>
        tbody>
    table>

效果

表格合并

rowspan：合并行

td rowspan = "要合并的单元格个数"> 内容 td>

示例：合并两个 ” 男 ” 表格

    table border="1" width="500"
     height="200" cellspacing="0"
      cellpadding="50"
      align="left">
        
        thead>
            tr>
                th>姓名th>
                th>性别th>
                th>年龄th>
            tr>
        thead>
        tbody>
            
            tr>
                td>张三td>
                td rowspan="2">男td>
                td>32td>
            tr>
            
            tr>
                td>李四td>
                
                td>24td>
            tr>
            
            tr>
                td>小红td>
                td>女td>
                td>18td>
            tr>
        tbody>
    table>

效果图：

colspan：合并列

td colspan= "要合并的单元格个数"> 内容 td>

示例：合并 ” 小红 ” 和 ” 女 ” 这两格

            
            tr>
                td colspan="2">小红 / 女td>
                
                td>18td>
            tr>

效果图：

列表标签 无序列表

无序列表 [重要]ul 和li标签

	ul>
        li> 内容 li>
    ul>

可以使用快捷键快速生成 li 标签

示例：

    h1>这是无序列表h1>
    
    ul type="disc">
        li>这是内容 1 li>
        li>这是内容 2 li>
        li>这是内容 3 li>
    ul>
    ul type="square">
        li>这是内容 1 li>
        li>这是内容 2 li>
        li>这是内容 3 li>
    ul>
    ul type="circle">
        li>这是内容 1 li>
        li>这是内容 2 li>
        li>这是内容 3 li>
    ul>

效果：

列表标签 有序列表 + 自定义列表

有序列表[用的不多]ol li

    ol>
        li> 内容 li>
    ol>

示例：

h1>这是有序列表h1>
    ol>
        li> li>
    ol>
    
    ol type="a">
        li>这是内容 1 li>
        li>这是内容 2 li>
        li>这是内容 3 li>
    ol>
    ol type="A">
        li>这是内容 1 li>
        li>这是内容 2 li>
        li>这是内容 3 li>
    ol>
    ol type="i">
        li>这是内容 1 li>
        li>这是内容 2 li>
        li>这是内容 3 li>
    ol>
    ol type="I">
        li>这是内容 1 li>
        li>这是内容 2 li>
        li>这是内容 3 li>
    ol>
    ol type="1">
        li>这是内容 1 li>
        li>这是内容 2 li>
        li>这是内容 3 li>
    ol>

效果图：

start 属性可以控制序号从几开始

    ol start="序号">
        li>内容li>
    ol>

示例：

    ol start="5">
        li>这是内容li>
        li>这是内容li>
        li>这是内容li>
    ol>

效果图:

自定义列表

    dl>
        dt> 自定义列表显示内容
            dd>自定义列表内容dd>
        dt>
    dl>

示例：

    h1>这是自定义列表h1>
    dl>
        dt> 自定义列表显示内容
            dd>自定义列表内容 1 dd>
            dd>自定义列表内容 2 dd>
            dd>自定义列表内容 3 dd>
        dt>
    dl>

效果：

表单域

表单标签
用表单标签来完成服务器的一次交互

表单标签分为两个部分：

• 表单域：包含表单元素的区域，重点是 form 标签
• 表单控件：输入框，提交按钮等，重点是 input 标签

表单域

form action="服务器地址">form>

input 文本框

表单控件：输入框，提交按钮等，重点是 input 标签

input作用：让用户用来输入的。

input中有一个 type 属性，我们对 type 取不同的值，可以控制 input 的类型

    form action="服务器地址">
        姓名 input type="类型">
    form>

文本框 (type 取text)
示例:

    form action="服务器地址">
        姓名 input type="text">
    form>

效果：

可以看到他是单行输入。

input 密码框

密码框 (type 取password)

    form action="服务器地址">
        密码 input type="password">
    form>

效果图：

input 单选框

    input type="radio"> 男
    input type="radio"> 女

效果：

但是这不是单选框，男和女都能选

解决方案：
加 name 属性，如果 name 后面的值相同，那就只能选一个了~
示例：

    input type="radio" name="gender"> 男
    input type="radio" name="gender"> 女

效果：

如果我想要它默认选择女，该怎么实现呢？
我们可以借助 checked 属性
示例：

    input type="radio" name="gender"> 男
    input type="radio" name="gender" checked="checked"> 女

效果图：

如果你写成这样：

   input type="radio" name="gender" checked="checked"> 男
   input type="radio" name="gender" checked="checked"> 女

那么网页一打开他是默认选了男，还是选了女呢？
这就要看你的浏览器了~~

input 复选框、普通按钮

input 复选框：

input type="checkbox">

示例：

    input type="checkbox">吃饭
    input type="checkbox">睡觉
    input type="checkbox">打游戏

效果：

普通按钮：

    input type="button">

效果：

在按钮里写字：

    input type="button" value="这是一个平平无奇的按钮">

效果：

按钮通常需要搭配 JS 来使用。

input 提交清空上传文件

提交按钮通常用来提交用户在前端填写的数据，把数据提交到服务器上。需要搭配 form 使用

    form action="">
        input type="submit">
    form>

效果图：

示例：

    form action="">
        姓名：input type="text" name="name">
        input type="submit">
    form>

效果：

如果我在表中填写错误，想要清空，该咋办呢？
可以使用reset

示例：

    form action="">
        姓名：input type="text" name="name">
        input type="submit">
        input type="reset">
    form>

效果：

提交文件：

    form action="">
        input type="file">
    form>

效果：点击后开始选择文件

lable 标签、select 标签、textarea 标签

lable标签
通过 label 标签，可以将输入框、复选框、单选按钮等表单控件与它们的标签关联起来，从而提供更好的表单使用体验。当用户单击 label 标签时，会触发关联的表单控件，方便用户选择或输入数据。

示例：

    label for="male">男label>
    input type="radio" name="sex" id="male">
    label for="female">女label>
    input type="radio" name="sex" id="female">

name的作用是控制让两个选项只能有一个选中
for 的作用是将它包裹的内容与那一个元素进行关联，通过 id 来关联起来

效果：点击文字“男”或者“女”即可选择。

select标签

select>select>

效果：

select 标签通常搭配 option 来使用
示例：

    select name="" id="">
        option value=""> -- 请选择年份 -- option>
        option value=""> --2005-- option>
        option value=""> --2006-- option>
        option value=""> --2007-- option>
    select>

效果：

一打开网页，选项框里默认是第一个选项，如果要修改，可以使用 selected
示例：

    select name="" id="">
        option value=""> -- 请选择年份 -- option>
        option value="" selected="selected"> --2005-- option>
        option value=""> --2006-- option>
        option value=""> --2007-- option>
    select>

效果：现在默认是选择 2005 了~

textarea 标签

    textarea name="" id="">textarea>

效果：

我们可以通过 cols 和rows来控制它的大小
示例：

    textarea name="" id="" cols="20" rows="20">textarea>

效果：

在实际的开发中可以通过 CSS 来达到这样的效果

无语义标签 div、span

div标签，division 的缩写，含义是分割
span 标签，含义是跨度

就是两个盒子，用于网页布局

• div是单独占一行的，是一个大盒子
• span不单独占一行，是一个小盒子

div标签
示例：

    div>
        
        div>吃饭div>
        div>睡觉div>
        div>玩div>
        
        
        div>
            span>吃饭span>
            span>睡觉span>
            span>玩span>
        div>
    div>

效果：

特殊字符

有些特殊的字符在 html 文件中是不能直接表示的，例如：
空格： 
小于号：<
大于号：>
按位与：&

html 标签就是用 表示的因此内容里存在，就会发生混淆。

示例：

    p>
        这里有四个空格       开始写
    p>
    p>>&p>

效果：

---

本文到这里就结束啦~