当前位置：首页 > article >正文

初始 html

article 2024/11/16 16:54:27

html 文件结构

html 标签是整个 html 文件的根标签(最顶层标签)
head 标签中写页面的属性.
body 标签中写的是页面上显示的内容
title 标签中写的是页面的标题

<html>
    <head>
        <title>这是一个标题</title>
    </head>
    <body>
        
    </body>
</html>

html 的代码显示的结果我们可以通过浏览器观察得到。

标签的层次关系：
head 和 body 是 html 的子标签(html 就是 head 和 body 的父标签)
title 是 head 的子标签。 head 是 title 的父标签.
head 和 body 之间是兄弟关系

html 快速入门

作为后端人员，我们只需要知道即可，这些内容是为了项目做铺垫的。

在 VScode 上敲击一个！然后回车就可以生成一个基本的 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>
    
</body>
</html>

我们可以通过浏览器的开发者模式会代码进行调试。

titile 标签

titile 是给网页命名的

    <title>这是一个标题</title>

在这里插入图片描述

标题标签 h1-h6

标题标签一共有六个，字体大小从大到小排列。

    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

在这里插入图片描述

段落标签 p

在HTML中，段落，换行符，空格都会失效，如果需要分成段落，需要使用专门的标签

p标签描述的段落，前面没有缩进
自动根据浏览器宽度来决定排版。
html 内容首尾处的换行，空格均无效。
在 html 中文字之间输入的多个空格只相当于一个空格。
html 中直接输入换行不会真的换行，而是相当于一个空格。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>这是一个标题</title>
</head>
<body>
    <p>这是一个段落。</p>
    <p>这还是一个段落。</p>
    <p>这又是一个段落。</p>
    <p>这又是一个段落。</p>
</body>
</html>

在这里插入图片描述

换行标签 `<br/>`

br 是 break 的缩写. 表示换行。
br 是⼀个单标签(不需要结束标签)
br 标签不像 p 标签那样带有⼀个很大的空隙
<br/> 是规范写法

    这是⼀个br标签<br/>
    这是⼀个br标签<br/>
    这是⼀个br标签<br/>

在这里插入图片描述

br 标签和 p 标签的区别：
在这里插入图片描述

图片标签 img

img 标签必须带有 src 属性，表示图片的路径

这个路径可以是我们电脑的相对路径或者如果是网络图片那就是网络路径，不推荐使用绝对路径，因为这份代码在别人的电脑上就运行不了了。

还可以设置宽度高度，一般改一个就行，另外⼀个会等比例缩放。否则就会图片失衡
border 是边框，一般通过 CSS 设置

<img src="" width="" height="" border="">

超链接 a

<a href="" target=""></a>

href：必须具备，表示点击后会跳转到哪个页面
target：不是一定要写的，默认是 _selef，如果是 _blank 则用新的页面打开

连接分为三种：
外部链接：跳转到别的网站
内部链接：跳转到本网站的别的页面
空链接：这是当后端还没写好的时候，前端把这个与后端链接的先置为空

    <a href="https://www.baidu.com/index.htm" target="_blank">百度</a>
    <a href="Demo1.html" target="_blank">Demo1.html</a>
    <a href="#">空链接</a>

在这里插入图片描述

表格标签

table 标签：表示整个表格
tr：表示表格的一行
td：表示一个单元格

    <table style="width: 500px; height: 400px;" border="1px red" cellspacing="0">
        <tr>
            <td>cat</td>
            <td>dog</td>
        </tr>
        <tr>
            <td>baitang</td>
            <td>402</td>
        </tr>
        <tr>
            <td>314</td>
            <td>1024</td>
        </tr>
    </table>

在这里插入图片描述

表单属性

表单是让用户输入信息的重要途经。分成两个部分：
表单域：包涵表单元素的区域，重点是 form 标签
表单控件：输入框，提交按钮等等，重点是 input 标签。

form标签

action：表示表单提交时数据发送到哪个URL
method：表示表单提交时使用的 http 方法，通常是 get 和 post

input 标签

各种输入控件，单行文本框，按钮，单选框，复选框
• type(必须有)，取值种类很多，button，checkbox，text，file，image，password，radio 等。
• name: 给 input 起了个名字。尤其是对于单选按钮，具有相同的 name 才能多选⼀。
• value: input 中的默认值.
• checked：默认被选中.(用于单选按钮和多选按钮)

文本框：

<input type="text" size="30" name="username"><br/>

在这里插入图片描述

密码框：

密码：<input type="password" name="password"><br/>

在这里插入图片描述

单选框：

性别：<input type="radio" name="gender">男
 	 <input type="radio" name="gender">女

在这里插入图片描述

注意单选框只有当有相同的name 属性的时候，才能实现单选的效果。

复选框：

        兴趣爱好：
        <input type="checkbox">玩游戏
        <input type="checkbox">打球
        <input type="checkbox">唱歌

在这里插入图片描述

要想实现点击字体也能实现选择，那么就要设置号 id 属性，然后通过 label 标签包裹字体，label 对应 id 值

        兴趣爱好：
        <input type="checkbox" name="hobby" id="1" value="1"><label for="1">玩游戏</label>
        <input type="checkbox" name="hobby" id="2" value="2"><label for="2">打球</label>
        <input type="checkbox" name="hobby" id="3" value="3"><label for="3">唱歌</label>

普通按钮：

<input type="button" value="我是一个按钮">

在这里插入图片描述

提交按钮：

<input type="submit" value="提交">

提交按钮必须放在 form 标签内部，并且提交的数据只会提交 form 标签包裹的数据。

在这里插入图片描述

下拉菜单标签 select

select 标签内部搭配 option 标签，可以做出下拉菜单的效果：
在这里插入图片描述

专业：<select>
    <option>计算机科学与技术</option>
    <option>软件工程</option>
    <option>物联网</option>
    <option>通信工程</option>
    <option>电子信息</option>
</select>

如果你想默认先显示哪个专业，你可以加上selected="selected"

专业：<select>
    <option>计算机科学与技术</option>
    <option>软件工程</option>
    <option>物联网</option>
    <option selected="selected">通信工程</option>
    <option>电子信息</option>
</select>

在这里插入图片描述

文本框标签 textarea

说明你的优点：<textarea rows="10" cols="50"></textarea>

在这里插入图片描述

无语义标签 div 与 span

div 标签独占一行，是一个大盒子
span 不独占一行，是一个小盒子

这两个标签的作用是用于网页的布局。

<div>hello world!</div>
<div>hello world!</div>
<div>hello world!</div>
<span>java </span><span>java </span><span>java </span>

在这里插入图片描述

实践

写出对应的 html 代码
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
</head>
<body>
    <h1>用户注册</h1>
    <table>
        <tr>
            <td>用户名</td>
            <td><input type="text" placeholder="请输入用户名"></td>
        </tr>
        <tr>
            <td>手机号</td>
            <td><input type="text" placeholder="请输入手机号"></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="text" placeholder="请输入密码"></td>
        </tr>
    </table>
    <div>
        <button>注册</button> <span>已有账号？</span> <a href="#">登录</a>
    </div>
</body>
</html>