掌握HTML, 从零开始的网页设计

前端三剑客是哪几个呢?

答: HTMl, CSS, JavaScript. 这哥仨并称前端三剑客

没有好坏之分, 因为写前端代码三种语言都要使用, 各自侧重点不同

HTML更偏向底层, 搭建出基础框架, CSS则是对这个框架进行美化, JavaScript则是让页面动起来,更加形象, 这个图就非常形象的说明了三者的区别

HTML

HTML: 全名超文本标记语言

没啥好说的, 接下来我们来看一下他的语法吧

head标签和body标签

head标签和body标签是兄弟关系

head标签里面一般包括这个网页的标题, URL, 或者关键字, 其他设备可以根据关键字访问到

body标签一般表示网页的具体内容是什么

标题标签

一级标题语法: <h1>标题内容</h1>

二级标题语法: <h2>标题内容</h2>

尖括号里的数字越大, 标题越小

段落标签

语法: <p>段落内容</p2>

根据习惯, 我们平常在段落前会空两格, 而html中键盘上敲的空格并不会算到句子里

因此我们需要通过转义字符来表示空格

空格表示

语法: &nbsp

含义: 表示不断开的空格, 只在句子里面生效, 在头部和尾部不会生效

换行标签

语法: <br/>

注意哦, 这次斜杠在后面

我们来看看<br/>和段落的换行的区别

图片标签

语法: <img src = "图片链接或者路径">

src属性是文件路径, 这个路径可以是相对路径也可以是绝对路径, 网络路径也是可以的

设置长宽和边框, 位置

我们以刚才的美女图片为例子

图片的大小或者图片有无边框,以及具体位置也是可以设置的

由于设置位置属于CSS的内容, 我们待会再说

设置长宽

语法: height = "长度"

语法: width = "宽度"

设置边框

语法: boder ="值px"

基本单位: px(像素)

含义: 值px, 表示边框的大小

超链接标签

语法: <a href = "链接">链接地址</a>

表格标签

表格标签里有很多元素, 因此里面的关键字也很多

**table标签:**表示整个表格

**tr标签:**表示表格中的一行

**td标签:**表示单元格(简单理解为一列也是可以的)

**th标签:**文字加粗并居中对齐

**thread:**表格的头部区域

**tbody:**表格主体区域

**align:**设置表格的位置, div 元素的 align 属性

**cellpadding:**设置内容距离边框的距离, 默认为1像素

**cellspacing:**设置单元格距离之间的像素, 默认为2像素

这样远远不够, 我们将姓名学号性别加粗, 同时把内容之间的边框去掉, 也将表格居中对齐

将cellspacing设置成0的样子

不仅如此, 我们也可以设置表格的宽度和高度

表单标签

表单是让用户输入信息的途径

浏览器的搜索框, 用户可以输入关键字搜索内容

form标签

form标签的作用是划分表单区域

form标签最重要的就是action 属性, 表示将输入的内容提交的指定页面中

input标签

input 标签: 用户输入信息的地方

由于输入的信息可以有很多种类型, 因此input标签也提供不同类型的输入方式

这里我们以文本类型为例

input标签常见的属性还有name和id

name: 用户输入数据的名称, 相当于变量名, 后端可以通过这个名字拿到用户输入的数据

id: 这个id是唯一的, 他的作用就是用来选中id所指的区域, 然后对这块前端区域进行操作

就像P图一样, 先选择要P的位置,然后才能开始P

为什么不使用name呢?因为name可能会重复, 选中时可能会选择到多个区域

radio类型: 单选属性, 用户根据按钮进行选择, 这个按钮一般是单选的

原因: 因为设置两个单选, 每个单选都可以选择, 它们没有任何关系

解决方法也很简单, 让两个单选属性的name相同即可, 这样就实现了二选一

lable标签: 将数据的值和表单中的选项连接起来, 这个标签能很好的改善用户体验

比如上面的选择按钮

具体做法

input标签的id属性和lable标签的for属性的值都相同, 这样就将值和选项绑定在一起了

密码类型password

复选框checkebox

作用: 选项多选, 使用时经常搭配lable

提交类型submit

作用: 将数据提交到指定页面

前面那种提交方式非常的抽象, 输入完点enter才能提交, 有时候没输完就提交, 用户体验会非常差

优化方法: 设置一个提交按钮

按钮类型button

作用: 按钮

和submit的区别:submit是具有提交性质的按钮, 而button只是一个按钮, 并没有添加功能

文件类型file

作用: 打开磁盘, 选择文件

下拉菜单

关键字: select

文本域textarea

作用: 允许用户输入长内容

无语义标签(最重要的标签)

无语义标签有两个: div和span

div: 块级元素, 会占用一整行并生成换行符号,相当于一个大盒子

span: 行内元素 , 只会占用内容本身的宽度, 结尾没有换行符, 相当于一个小盒子

div和span就像大小盒子,可以嵌套, 我们所看到的所有界面, 除了输入, 几乎都可以通过div和span标签实现

div和span的嵌套

练习: 用户注册界面

我们来实现以下的用户注册界面

页面几乎所有东西都可以通过div和span实现

我们将页面元素分成三个大盒子

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <h1>用户注册</h1>
    </div>


    <div>
        <span>用户名<input type="text" placeholder="请输入用户名"></span><br>
        <span>手机号<input type="text" placeholder="请输入手机号"></span><br>
        <span>密&nbsp;&nbsp;&nbsp;&nbsp;码<input type="password" placeholder="请输入密码"></span>
    </div>


    <div>
        <span><input type="button" value="提交"></span>
        <span>已有账号?</span>
        <span><a href="#">登录</a></span>
    </div>

</body>
</html>

美图分享

✨🎆谢谢你的阅读和耐心！祝愿你在编程的道路上取得更多的成功与喜悦！"🎆✨🎄

⭐️点赞收藏加关注，学习知识不迷路⭐️

🎉✔️💪🎉✔️💪🎉✔️💪🎉✔️💪🎉

👍😏⛳️点赞☀️收藏⭐️关注😏👍

🙆‍♂️🙆‍♂️🙆‍♂️🙆‍♂️🙆‍♂️🙆‍♂️🙆‍♂️🙆‍♂️🙆‍♂️🙆‍♂️🙆‍♂️🙆‍♂️🙆‍♂️