前端第1天---HTML_前端1天-CSDN博客

本文链接：https://blog.csdn.net/weixin_44706647/article/details/113485457

前言：2021年1月31号正式开始前端的学习，此前，是做JAVA后端的，前端这块基本使用是没有问题的，也用过一些高级框架如Vue等等，但是总觉得前端知识用起来有点捉襟见肘，所以打算正式的系统的学习一下前端知识，就先从HTML开始

一、页面结构

一个HTML页面的基本结构如下，在vscode上使用快捷键! + tab能直接打出下面结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keyword" content="HTML">
    <meta name="description" content="HTML学习">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题</title>
</head>
<body>
    
</body>
</html>

标签	说明
DOCTYPE	声明为HTML文档
html	lang:网页的语言，如en/zh等，非必选项目
head	文档说明部分，对搜索引擎提供信息或加载CSS、JS等
title	网页标题
keyword	向搜索引擎说明你的网页的关键词
description	向搜索引擎描述网页内容的摘要信息
viewport	设置响应式布局
body	页面主体内容

二、语义化标签

h1-h6设置标题，这个不过多演示

header标签用于设置文档的页眉

footer设置文档的页脚，页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等

nav设置导航链接

mainhtml5中main标签标示页面主要区域，一个元素中main出现一次较好

section定义一个区块

aside用于设置与主要区域无关的内容，比如侧面栏的广告等

div通用容器，如有有些块不好通过语义表达，可以使用通用容器

<!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>
    <header>
        <nav>
            <ul>
                <li><a href="">JAVA</a></li>
                <li><a href="">大数据</a></li>

            </ul>
        </nav>
    </header>
    <main>
        <article>
            <h2>Java后端学习路线</h2>
            <ul>
                <li><a href="">Java基础</a></li>
                <li><a href="">web基础</a></li>
            </ul>
            <section><h2>锁机制</h2></section>
            <section><h2>Sync锁</h2></section>
        </article>
    </main>
    <aside>
        <h2>个人简介</h2>
        <p>JAVA爱好者</p>
    </aside>
    <footer>
        <p>JAVA学习路线</p>
    </footer>
</body>
</html>

三、文本标签

p标记一个段落

pre原样显示文本内容，包括空白换行等等

br换行

span标签与 div 标签都是没有语义的，span 常用于对某些文本特殊控制，但该文本又没有适合的语义标签。

small用于设置描述、声明等文本。

time 标签定义日期或时间，或者两者。

abbr用于描述一个缩写内容

<p>在WWW上，每一信息资源都有统一的且在网上唯一的地址，该地址就叫 <abbr title="Uniform Resource Locator">URL</abbr> 统一资源定位符。</p>

效果：

sub用于数字的下标内容

sup用于数字的上标内容

del用于删除内容

code用于显示代码块内容，一般需要代码格式化插件完成。

progress用于表示完成任务的进度，当游览器不支持时显示内容。

<progress value="60" max="100">完成60%</progress>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DYwOS5Df-1612099440673)(前端第1天—HTML.assets/image-20210131201127584.png)]

strong强调文本

mark用于突出显示文本内容，类似我们生活中使用的马克笔。

cite标签通常表示它所包含的文本对某个参考文献的引用，或文章作者的名子。

blockquote用来定义摘自另一个源的块引用

q用于表示行内引用文本，在大部分浏览器中会加上引号。

address用于设置联系地址等信息，一般将address 放在footer 标签中。

四、链接与图片

常见三种图片格式说明

格式	说明	透明
PNG	无损压缩格式，适合图标、验证码等。有些小图标建议使用css字体构建。	支持
GIF	256色，可以产生动画效果（即GIF动图）	支持
JPEG/JPG	有损压缩的类型，如商品、文章的图片展示

选取图片一般原则：

图片属性静态文件，不要放在WEB服务器上，而放在云储存服务器上并使用CDN加速
JPEG类型优先使用，文件尺寸更小
网页图标建议使用css字体构建
小图片使用PNG，清晰度更高，因为文件尺寸小，文件也不会太大

img标签展示图片，图片的大小、边框、倒角效果使用css处理

属性	说明
src	图片地址
alt	图像打开异常时的替代文本

a网页链接

选项	说明
href	跳转地址
target	_blank 新窗口打开 _self 当前窗口打开
title	链接提示文本

锚点链接锚点可以设置跳转到页面中的某个部分，也可以指定跳转到url的锚点

<body>
    <a href="#commind-1">跳转到评论区</a>
    <div style="height: 1000px;background-color: blue;"></div>

    <div id="commind-1" style="background-color: red;height: 1000px;">评论区</div>
</body>

邮箱链接除了页面跳转外可以指定其他链接

<a href="mailto:1537990340@qq.com">给我发邮件</a>

拨打电话如果是移动端，则会弹出拨号面板

<a href="tel:1111111111">联系客服</a>

下载文件如果遇到链接，浏览器无法处理的情况则会直接弹出下载框

五、表单与列表

from 用于包裹整个表单项

<form action="/adduser" method="POST">
    <fieldset>
        <legend>测试</legend>
        <input type="text">
    </fieldset>
</form>

label描述表单标题，当点击标题后文本框会获得焦点，需要保证使用的ID在页面中是唯一的。

input文本框用于输入单行文本使用，下面是常用属性与示例

属性	说明
type	表单类型默认为 `text`
name	后台接收字段名
required	必须输入
placeholder	提示文本内容
value	默认值
maxlength	允许最大输入字符数
size	表单显示长度，一般用不使用而用 `css` 控制
disabled	禁止使用，不可以提交到后台
readonly	只读，可提交到后台
capture	使用麦克风、视频或摄像头哪种方式获取手机上传文件，支持的值有 microphone, video, camera

input中的type字段可以指定不同的输入内容

类型	说明
email	输入内容为邮箱
url	输入内容为URL地址
password	输入内容为密码项
tel	电话号，移动端会调出数字键盘
search	搜索框
hidden	隐藏表单
submit	提交表单

<input type="email" name="email" required>

表单提交

创建提交按钮可以将表单数据提交到后台，有多种方式可以提交数据如使用AJAX，或HTML的表单按钮。使用HTML的表单提交有两种方式，使用input输入框或者使用button按钮，使用input如果设置了name，那么提交数据也会发送到后台，通过这个可以判断是哪个表单提交的，使用button也可以提交

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

使用input提交会将当前的按钮的值也一并提交

button type="submit" >提交表单</button>

select 下拉列表可用于多个值

选项	说明
multiple	支持多选
size	列表框高度
optgroup	选项组
selected	选中状态
option	选项值

<form action="">
    <select name="lesson[]" >
        <option value="">== 选择课程 ==</option>
        <optgroup label="后台">
            <option value="php">PHP</option>
            <option value="linux">LINUX</option>
            <option value="mysql">MYSQL</option>
        </optgroup>
        <optgroup label="前台">
            <option value="php">HTML</option>
            <option value="linux">JAVASCRIPT</option>
            <option value="mysql">CSS</option>
        </optgroup>
    </select>
    <input type="submit" value="提交">
</form>

radio 单选框指只能选择一个选项的表单，如性别的选择男、女、保密 只能选择一个

选项	说明
checked	选中状态

<form action="">
    <input type="radio" name="sex" value="boy" id="boy" checked>
    <label for="boy">男</label>
    <input type="radio" name="sex" value="girl" id="girl">
    <label for="girl">女</label>
</form>

checkbox复选框指允许选择多个值的表单。

<form action="">
    <fieldset>
        <legend>复选框</legend>
        <input type="checkbox" name="sex" value="boy" id="boy">
        <label for="boy">PHP</label>

        <input type="checkbox" name="sex" value="girl" id="girl" checked>
        <label for="girl">MYSQL</label>
    </fieldset>
</form>

文件上传文件上传有多种方式，可以使用插件或JS拖放上传处理。HTML本身也提供了默认上传的功能，只是上传效果并不是很美观

选项	说明
multiple	支持多选
accept	允许上传类型 `.png,.psd` 或 `image/png,image/gif`

日期与时间

属性	说明
step	间隔：date 缺省是1天，week缺省是1周，month缺省是1月
min	最小时间
max	最大时间

<input type="date" step="5" min="2020-09-22" max="2025-01-15" name="datetime">

datalistinput表单的输入值选项列表

<form action="" method="post">
    <input type="text" list="lesson">
    <datalist id="lesson">
        <option value="PHP">后台管理语言</option>
        <option value="CSS">美化网站页面</option>
        <option value="MYSQL">掌握数据库使用</option>
    </datalist>
</form>

无序列表

<style>
    .li-style1{
        /* 
        circle      空心圆
        disc        实心圆
        square      实心方块
        decimal     数字
        upper-alpha 大写字母
        lower-alpha 小写字母
        upper-roman 大写罗马数字
        lower-roman 小写罗马数字
        */
        list-style-type: square;
    }

    .li-style2{
        /* 取消风格 */
        list-style: none;
    }
    .li-style3{
        /*inside 内部 outside 外部（默认）*/
        list-style-position: inside;
    }
</style>

<ol start="1" class="li-style1">
	<li>HTML</li>
	<li>CSS</li>
	<li>JS</li>
</ol>

有序列表ul

六、表格

基本使用

属性	说明
caption	表格标题
thead	表头部分
tbody	表格主体部分
tfoot	表格尾部

<table border="1">
    <caption>表格标题</caption>
    <thead>
        <tr>
            <th>标题</th>
            <th>时间</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>JAVA</td>
            <td>2021-2-22</td>
        </tr>
    </tbody>
</table>

效果

水平单元格合并

<table border="1">
    <caption>表格标题</caption>
    <thead>
        <tr>
            <th>标题</th>
            <th>时间</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="2">JAVA 2021-2-22</td>
        </tr>
    </tbody>
</table>

垂直单元格合并

<table border="1">
    <caption>表格标题</caption>
    <thead>
        <tr>
            <th>标题</th>
            <th>时间</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2"> JAVA</td>
            <td>2021-01-31</td>
        </tr>
        <tr>
            <td>2021-01-31</td>
        </tr>
    </tbody>
</table>