给漂亮女友写网页表白前先来学学HTML基础语法知识

文章目录

给漂亮女友写网页表白前先来学学HTML基础语法知识

HTML、CSS、JavaScript之间的关系

HTML：组织内容和结构

CSS：对内容进行美化

JS：响应用户的交互

HTML只能做静态网页

css是做动态的

网站是网页的集合

网页是HTML文件，通过浏览器来阅读，由图片、链接、文字、声音、视频等元素组成

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2Bz5ZkUH-1647413546846)(C:\Users\zhaohaobing\AppData\Roaming\Typora\typora-user-images\image-20210714173912790.png)]$

1、基本语法规范

标签包含在<>里，一般是成对出现，相关操作标识在前标签里
例如：

<html>//开始标签
</html>//结束标签，前面加/

单标签：（很少）

<br />

2、标签关系

//head与里面title、body的标签是包含关系，title和body是并列关系

3、标签语言

<!DOCTYPE html><!--定义文档语言-->
<html lang="zh-CN"><!--定义网站语言，en英文，zh-CN中文-->
<head>
    <meta charset="UTF-8"><!--charset字符集，UTF-8包含了全世界所有字符，这行不写就会出现乱码情况-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我利用vscode创建的第一个页面</title>
</head>
<body>
    <h1>一级标题</h1><!--head，标题独占一行-->
    <h6>六级标题</h6>
    <p>段落标签，这里面是一段</p><!--paragraph-->
    这是个单标签<br/>后面强制换行<!--break-->
    <div>布局标签盒子，占整一行</div><!--盒子里可以放文字图片等--><!--division分配分开-->
    <span>布局标签盒子，后别有一个空格，一行可以放好多</span><!--span跨度-->
    <img src="图像"/><!--单标签，src是属性用于指定图像文件的路径和文件名，要和网页一个文件夹-->
    <img src="图像" 
    alt="当文字显示不出来的时候用这段文字显示" 
    title="当鼠标放到图片上的时候的提示文本" 
    width="500"
    height="500" 
    border="15"
    /><!--width宽度，height高度，border边框厚度，各属性中间要用空格隔开-->
</body>
</html>

4、VSCODE使用

1、创建完以后要先保存文件，改成.html文件

2、“！”创建骨架

3、文件-选择文件夹（管理文件）

4、注释，可用ctrl+/快捷键

5、知识点

目录文件夹与根目录文件夹：一个文件夹叫目录文件夹，这个文件夹里面的交根目录

6、图片路径

相对路径：（相对于html文件所在的位置）

同一级：直接写图片名字

<img src="照片.png"/>

下一级路径：

<img src="文件目录下的照片文件夹/照片.png"/>

上一级路径：

<img src="../照片.png">（../是翻到上一级）

绝对路径：

<img src="绝对路径">（很少使用）

7、超链接

<a href="跳转目标" target="目标窗口弹出方式">文字或图片（图片以<img src="图片.png">形式存在）（这就具有了超链接）</a>
<!--anchor-->锚

目标窗口弹出方式：

_self ：代替本页面（默认）

_blank ：新页面打卡

链接分类：

1.外部链接：

<a href="https://www.baidu.com/">百度</a>

2.内部链接：

<a href ="文件名.html">首页</a>

3.空链接：

<a href="#">空链接</a>

4.下载链接：href指向文件或压缩包

<a href="压缩包名字">下载</a>
<!--上面是同一级情况下，上下级关系参考图片方式>

5.锚点链接（链接到本页面的某个位置）

<a href="#名字1">文字或图片</a>

<h3 id="名字1">文字</h3>
<!--给要跳转的部分加一个链接>

8、特殊字符

<body>
    讲&nbsp;&nbsp;&nbsp;究
</body>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gPkXpMIu-1647413546848)(C:\Users\zhaohaobing\AppData\Roaming\Typora\typora-user-images\image-20210715215155232.png)]$

9、表格标签

<!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>Document</title>
</head>
<body>
    <table><!--table是表格标签，thead表格标头区域，tbody表格主体区域，th表头单元格（加粗居中），tr是行，td是列-->
        <thead>
            <tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
        </thead>
        <tbody>
            <tr><td>罗纳尔多</td> <td>男</td> <td>36</td></tr>
            <tr><td>罗纳尔多</td> <td>男</td> <td>36</td></tr>
            <tr><td>罗纳尔多</td> <td>男</td> <td>36</td></tr>
        </tbody>
    </table>
</body>
</html>

10、列表标签

（1）无序列表

<!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>Document</title>
</head>
<body>
    <h4>您喜欢吃的食物？</h4>
    <ui><!--无序列表,ul里面只能放li，li可以放任何标签相当于一个容器-->
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鱼罐头</li>
    </ui>
</body>
</html>

（2）自定义列表

例：

在这里插入图片描述

<!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>Document</title>
</head>
<body>
    <dl><!--都封装在dl里，dl里只能包含dt和dd，dt是大哥，dd是小弟-->>
        <dt>关注我们</dt>
        <dd>新浪微博</dd>
        <dd>官方微信</dd>
    </dl>
</body>
</html>

11、表单标签

作用：注册页面，收集用户信息

在这里插入图片描述

<!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>Document</title>
</head>
<body>
    <form action="提交给哪个页面处理" method="提交方式（get或post）" name="表单名称">
        用户名：<input type="text" name="username" value="请输入用户名"> <br><!--text是文本框，用户可以输入任何文字-->
        密码：<input type="password"> <br>
        性别：男 <input type="radio" name="sex"> 女 <input type="radio" name="sex"> <br> <!--radio单选按钮，小圆圈，多选一-->
        爱好：吃饭 <input type="checkbox" name="hobby"> 睡觉 <input type="checkbox" name="hobby"> 打豆豆 <input type="checkbox" name="hobby"> <br> <!--多选框，小方框-->
        <input type="submit" value="免费注册"><br><!--提交按钮-->
        <input type="reset" value="重置"><br><!--重置按钮-->
        <input type="button" value="获取验证码"><br><!--普通按钮-->
        上传头像：<input type="file" ><br>
    </form>
</body>
</html>

type 给其附上不同属性，会展示不同属性的值（text，password，radio，checkbox）

name 区分不同的表单元素，相同name是一个表单的

value是打开以后显示默认的文字，也是name的值

checked默认选中状态，用于单选按钮和复选按钮 checked=“cheched”

label 标签，绑定一个表单元素，当点击内部文本时光标自动跳转

<label for="text">用户名：</label><input type="text" id="text">

下拉标签：

       籍贯：
        <select>
            <option>北京</option>
            <option>上海</option>
            <option>深圳</option>
        </select>

文本域表单元素：

        今日反馈：
        <textarea>
            
        </textarea>

12、vscode创建标题基础页面模板

<!DOCTYPE html><!--定义文档语言-->
<html lang="zh-CN"><!--定义网站语言，en英文，zh-CN中文-->
<head>
    <meta charset="UTF-8"><!--charset字符集，UTF-8包含了全世界所有字符，这行不写就会出现乱码情况-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我利用vscode创建的第一个页面</title>
</head>
<body>
    <h1>一级标题</h1><!--head，标题独占一行-->
    <h6>六级标题</h6>
    <p>段落标签，这里面是一段</p><!--paragraph-->
    这是个单标签<br/>后面强制换行<!--break-->
    <div>布局标签盒子，占整一行</div><!--盒子里可以放文字图片等--><!--division分配分开-->
    <span>布局标签盒子，后别有一个空格，一行可以放好多</span><!--span跨度-->
    <img src="图像"/><!--单标签，src是属性用于指定图像文件的路径和文件名，要和网页一个文件夹-->
    <img src="图像" 
    alt="当文字显示不出来的时候用这段文字显示" 
    title="当鼠标放到图片上的时候的提示文本" 
    width="500"
    height="500" 
    border="15"
    /><!--width宽度，height高度，border边框厚度，各属性中间要用空格隔开-->
</body>
</html>

12、vscode创建登录基础页面模板

<!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>Document</title>
</head>
<body>
    <form action="提交给哪个页面处理" method="提交方式（get或post）" name="表单名称">
        用户名：<input type="text" name="username" value="请输入用户名"> <br><!--text是文本框，用户可以输入任何文字-->
        密码：<input type="password"> <br>
        性别：<input type="radio" name="sex" id="man"> <label for="man">男</label>  <input type="radio" name="sex" id="woman"> <label for="woman">女</label> <br> <!--radio单选按钮，小圆圈，多选一-->
        爱好：吃饭 <input type="checkbox" name="hobby"> 睡觉 <input type="checkbox" name="hobby"> 打豆豆 <input type="checkbox" name="hobby"> <br> <!--多选框，小方框-->
        <input type="submit" value="免费注册"><br><!--提交按钮-->
        <input type="reset" value="重置"><br><!--重置按钮-->
        <input type="button" value="获取验证码"><br><!--普通按钮-->
        上传头像：<input type="file" ><br>
        <label for="text">用户名：</label><input type="text" id="text">
       籍贯：
        <select>
            <option>北京</option>
            <option>上海</option>
            <option>深圳</option>
        </select>
        今日反馈：
        <textarea>
            
        </textarea>
    </form>
</body>
</html>