Web学习笔记3 - 技术栈

HTML概述

1、HTML

HTML,称为超文本标记语言,与编程语言不同，标记语言使用一个个标签去规定浏览器如何呈现内容。HTML的标签由两种类型，双标签和单标签

双标签格式为：<标签名>中间包裹的内容</标签名>，其中内容前的标签叫做开始标签，内容后的标签叫做结束标签

单标签格式为：<标签名>

标签之间的关系分为两种：

嵌套关系：内容包含内容的关系

并列关系：内容与内容之间并列

2、HTML模板

目前大多数的网页，都是在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>Document</title>
</head>
<body><!--网页主体-->>
    
</body>
</html>

该模板在vscode中输入！并按下回车+TAB键自动生成

其中

<!DOCTYPE html>：代表使用HTML5

<head>：网页头部，给浏览器读取，用于写CSS代码，中间存放<title>,为网页标题

<body>：网页主体，给用户展示的主体部分

：用于在HTML中添加注释，注释不会被浏览器读取，VScode可以用ctrl+/快速添加注释

3、常用标签

标题标签(双标签)：

HTML中使用h1-h6代表六级标题，标题标签中间的内容加粗并换行

html 复制代码

<h1>标题1</h1>

段落标签（双标签）：

段落标签书写段落文字，使用p来表示一个段落，段落之间自动换行并保持行间距

html 复制代码

            <h3>一段段落</h3>
                <p>你好你好你好你好你好</p>
                <p>你好你好你好你好你好</p>

换行标签和水平线标签（单标签）：

换行标签：<br>，用于强制换行

水平线标签：<hr>，用于在浏览器中画一条分割线

html 复制代码

            <h3>一段段落</h3>
                <p>你好你好你好你好你好</p>
                <hr>
                <p>你好你好你好<br>你好你好</p>

文本格式化标签：

文本格式化标签用于给网页里的文本做加粗、倾斜、删除线和下划线操作，其中

加粗：<strong>/<b>

倾斜：<em>/<i>

下划线：<ins>/<u>

删除线：<del>/<s>

html 复制代码

            <h3>一段段落</h3>
                <p><strong>你好</strong>你好<ins>你好</ins><em>你好</em><del>你好</del></p>

图像标签：

用于在网页里放置图片，图像标签为：<img src='图像路径/URL'[alt:若图像无法正常显示替换的文本 title:鼠标指针放在图片上的提示文字 width：图片宽度 height:图片高度]>

超链接标签：

超链接标签用于页面之间的跳转，超链接标签为<a herf="需要跳转的URL [target=_blank:若有该条说明在新窗口打开链接]">互动的内容，可以是文本、图片<\a>

若在开发初期不确定需要跳转的URL，可以用"#"代替

音频标签：

用于在网页中插入音频或视频，音频标签为：<audio src="音频的路径/URL" 其他属性></audio>

其他属性有：

controls:显示音频的控制面板

loop：若有则音频循环播放

autoplay：自动播放音频，浏览器一般禁止自动播放，只允许静音状态下自动播放

muted：若有则视频默认静音播放

4、列表

列表是指在页面中需要整齐排列的一组文字，列表分为无序列表、有序列表和定义列表

无序列表：

是排列整齐且内容无序的区域，使用ul嵌套li来完成，ul代表无序列表，li代表列表条目,ul标签里只能包含li标签,li标签可以包裹其他标签

<ul>

......

</ul>

html 复制代码

    <ul>
        <li>你好</li>
        <li>hello</li>
        <li>nihao</li>
        <li><a href="https://www.baidu.com/" target="_blank">跳转到百度</a></li>
    </ul>

有序列表：

是排列整齐且内容有序带数字编号的区域，使用ol嵌套li来完成，ol标签内只能包含li

html 复制代码

    <ol>
        <li>首先</li>
        <li>其次</li>
        <li>最后</li>
    </ol>

定义列表：

定义列表显示标题+列表的有序区域，例如网页尾部的关于内容，定义列表使用dl嵌套dt和dd，dt表示列表标题，dd表示列表内容，dl只能包含dt和dd，dd和dt可以包裹其他标签

5、表格

表格标签用于在网页中绘制表，标签是table嵌套tr,tr嵌套td/th

table代表整个表格

tr代表行

th代表表头

td代表单元格

表格默认无边框线，需要加边框线要用border属性

html 复制代码

    <table border="1">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>分数</th>
            <th>排名</th>
        </tr>
        <tr>
           <td>张三</td>
           <td>18</td>
           <td>100</td>
           <td>1</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>19</td>
            <td>99</td>
            <td>2</td>
        </tr> 
        <tr>
            <td>王五</td>
            <td>20</td>
            <td>98</td>
            <td>3</td>
        </tr> 
    </table>

合并单元格

若是跨行合并，保留最上边的单元格，在最上边的单元格添加rowspan属性；若是跨列合并，保留最左端的单元格值，添加colspan属性，添加属性后跟数字，代表需要合并的格数

html 复制代码

<table border="1">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>分数</th>
            <th>排名</th>
        </tr>
        <tr>
           <td>张三</td>
           <td rowspan="2">18</td>
           <td>100</td>
           <td>1</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>99</td>
            <td>2</td>
        </tr> 
        <tr>
            <td>王五</td>
            <td>20</td>
            <td>99</td>
            <td>3</td>
        </tr> 
        <tr>
            <td>备注</td>
            <td colspan="3">优秀</td>
        </tr> 
    </table>

7、表单

表单用于在web中收集信息

input标签：

需要用户输入或者选择信息使用input标签：

其中type决定输入信息的方式，当type值为：

text:文本框，用于输入单行文本，显示输入文本

password：密码框，用于输入密码，隐藏输入文本

radio：单选框

checkbox：多选框

file：上传文件

文本框和密码框还有属性placeholder，用于显示提示信息

radio还有属性name和checked

name:控件分组，实现单选，一组只能选一个

checked：默认选中

file还有属性multiple，浏览器默认只能上传一个文件，而加了multiple属性可以实现多个文件上传

html 复制代码

   用户名：<input type="text" placeholder="请输入用户名">
    <br><br>
    密码：<input type="password" placeholder="六位以上字母+数字">
    <br><br>
    性别：男<input type="radio" name="gender">女<input type="radio" name="gender">
    <br><br>
    爱好：打篮球<input type="checkbox">踢足球<input type="checkbox">游泳<input type="checkbox">
    <br><br>
    一寸照片：<input type="file">

下拉菜单：

下拉菜单标签使用select嵌套option，select是菜单整体，option是选项，option中可以添加selected属性，代表默认选中

文本域：

文本域用于输入多行文本，标签<textarea>提示文字</textarea>

文本域默认可以随意拖拽大小，这个功能一般会用CSS禁用

label:

用于给标签提供说明文字，也可以增大表单的空间范围

label有两种写法，第一种是标签包裹内容，不包裹控件，在label设置for属性值和表单控件的id属性值相同；第二种是使用lable包裹住文字和控件

按钮：

按钮可以做提交表单、重置和结合JS使用功能

标签为<button type=" ">说明文字</button>，其中属性值type:

submit:提交（不写type该功能为默认）

reset:(重置按钮，清空表单)

button：（普通按钮，默认无功能，结合JS使用）

按钮的功能实现需要配合另外一个标签form使用

form标签为<form action=" ">表单区域</form>

其中action为提交表单的地址

html 复制代码

    <form action="">
    用户名：<input type="text" placeholder="请输入用户名">
    <br><br>
    密码：<input type="password" placeholder="六位以上字母+数字">
    <br><br>
    
    <label for="man">男</label>
    <input type="radio" name="gender" id="man">
    <label>女<input type="radio" name="gender"></label>
    <br><br>
    爱好：打篮球<input type="checkbox">踢足球<input type="checkbox">游泳<input type="checkbox">
    <br><br>
    城市：<select>
        <option selected>北京</option>
        <option>上海</option>
        <option>重庆</option>
        <option>深圳</option>
        <option>广州</option>
    </select>
    <br><br>
    <textarea placeholder="请发表评论"></textarea>
    <br><br>
    一寸照片：<input type="file">
    <br><br><br>
    <button type="submit">提交</button>
    <button type="reset">重置</button>
    <button type="button">按钮</button>
    </form>

8、无语义的布局标签

无语义的标签用于占用网页界面，来对网页进行布局，其中

div:大盒子，独占一行<div></div>

span：小盒子不换行<span></span>

9、字符实体

在网页中显示预留字符，即显示HTML已经定义的字符，为了显示这些字符，使用&+字母的形式显示，例如：

空格：&nbsp

<：&lt

>：&gt