1、JavaWeb-HTML-CSS

最新推荐文章于 2024-05-23 23:02:04 发布

所谓远行Misnearch

最新推荐文章于 2024-05-23 23:02:04 发布

阅读量647

点赞数 34

分类专栏： # JavaWeb 文章标签： html css 前端

本文链接：https://blog.csdn.net/Misnearch/article/details/136180235

版权

JavaWeb 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

www.bilibili.com

vscode快捷键整理：

https://zhuanlan.zhihu.com/p/44044896

光标移动到首行：Home
光标移动到行尾：End
光标移动到文件结尾：Ctrl+End
光标移动到文件开头：Ctrl+Home
选择当前光标位置到行尾：Shift+End
同时选中所有匹配的内容：Ctrl+Shift+L
回退上一个光标操作：Ctrl+U

P1 导学

课程特色：

前后端分离，接口文档
前端Vue脚手架工程化前端项目
后端spring boot高效学习SSM
企业开发模式，需求分析-表结构设计-接口文档-功能实现-测试

掌握：

数据表设计、操作能力
主流前后端设计开发模式，接口文档管理平台YAPI
接口开发能力
常见web开发解决方案，文件存储、登录认证

P2 Web开发介绍

了解web网站的工作流程：

浏览器中内置解析前端代码的解析引擎，从而展示出样式

了解web网站的开发模式：

混合开发
前后端分离

P3 web前端开发

前端代码经过浏览器转化（解析和渲染，浏览器内核）得到网页。

不同浏览器内核不同解析出前端代码可能存在差异。

web标准：

HTML
CSS
JS

了解：

HTML、CSS
JS、Vue
异步交互Ajax、Axios，ElementUI，前端部署Nginx

P4 HTML

HTML超文本标记语言

CSS层叠样式表

<html>
	<head>
		<title>HTML 快速入门</title>
	</head>	
	<body>
		<h1>Hello HTML</h1>
		<img src="1.jpg"/>
	</body>
</html>

P5 VSCode

csdn上面上传了vscode安装文档，以便查看。

安装完vscode，打开安装以下插件：

简体中文
code spell checker
HTML CSS Support
……

P6 HTML实现标题-排版

在.html文件中输入！生成html模板，

添加注释ctrl + /，

alt+B默认浏览器打开

ctrl+s保存

推荐使用相对路径

ctrl+shift+I打开开发者工具

img标签的属性：

src,img标签路径指定方式，绝对路径（绝对磁盘路径、绝对网络路径）和相对路径（./当前目录，…/上一级目录），
width,px：像素，%：相对于父元素的百分比
height，一般宽高设置一个，另外一个等比例缩放

P7 HTML实现标题-样式1

使用CSS进行样式控制

css引入方式：

行内样式（不推荐）
内嵌样式（使用style标签，一般写在head中）
外联样式（写在一个单独的.css文件中，使用link进行指定）

    <link rel="stylesheet" href="./css/news.css">

颜色表示形式：

关键字
RGB表示,rgb(0,0,0)
十六进制表示,#000000

拾色器：google浏览器插件live color picker

P8 HTML实现标题-样式2

没有语义特性使用span标签

css选择器，选择需要设置样式的元素标签：

元素选择器，根据标签名字选择
id选择器， #id属性值
类选择器，.class属性值

id选择器优先级>类选择器>元素选择器

P9HTML实现标题-超链接

超链接<a href="" target="">标签

属性：

href，指定资源访问Url
target，指定在何处打开资源链接，*self默认值在当前页打开，_blank*在空白页打开

使用css样式更改超链接的效果

 /* 元素选择器 */
        a {
            color:black;
            text-decoration: none; /* 设置文本为标准文本*/
        }

P10HTML实现正文-排版

视频标签：<video>

src，视频Url
controls，显示播放控件，如果便签名和属性名一样，可以直接写一个
width，height,播放器宽高

音频标签：<audio>

段落标签：<p>

文本加粗标签：<b> / <strong>

换行<br>

段落首行缩进使用css样式

text-align设置文本对齐方式

P11HTML实现正文-布局

盒子模型：

内容区域content
内边距区域padding
边框区域border
外边距区域margin

布局标签，使用div和span这两个没有语义的布局标签

div：一行只显示一个，宽度默认父元素的宽度，高度由内容撑开，可设置宽高

span：一行可多个，宽高默认由内容撑开，不可设置宽高

版面内容位于中间，称为版面居中

P12HTML表格标签

在这里插入图片描述

下面是一个案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格标签</title>
    <style>
        td {
            text-align: center;
        }
    </style>
</head>
<body>
    <table border="1px" cellspacing="0" width="600px">
        <tr>
            <th>序号</th>
            <th>品牌</th>
            <th>品牌名称</th>
            <th>企业名称</th>
        </tr>
        <tr>
            <td> 1</td>
            <td> <img src="img/huawei.jpg" width="100px"></td>
            <td> 华为</td>
            <td> 华为技术有限公司</td>
        </tr>
        <tr>
            <td>2</td>
            <td><img src="img/alibaba.jpg" width="100px"></td>
            <td>阿里</td>
            <td>阿里巴巴集团控股有限公司</td>
        </tr>
    </table>
</body>
</html>

P13HTML表单标签

场景，在网页中主要负责数据采集功能，如注册登录等，

标签<form>，将采集数据保存提交到服务端

表单项，不同类型的input元素、下拉列表、文本域等。

<input>
<select>下拉列表
<textarea>文本域

form属性：

action，规定当提交表单时何时向何处发送表单数据,url。如果不指定，默认提交到当前页面，后端开发可以写后端url地址。
method，用于发送表单数据的方式,GET、POST
- get方式为默认方式，get方式请求会在url后面拼接表单数据，例如?username=&，不适合较大表单的提交，长度有限
- post方式，表单数据在消息体中/请求体中传递，表单大小无限制的

P14HTML表单项标签

表单项：

<input>表单项，通过type属性控制输入形式，https://www.w3school.com.cn/html/html_forms.asp

input的type属性有很多，如下图所示：

在这里插入图片描述

<select>，下拉列表，<option>定义列表项

<textarea>，文本域

案例：了解各种表单项的属性，例如value值

注意单选框或复选框中选项使用<label>标签进行包裹了，可以使得点击该区域即可聚焦到该属性，即时点击文字也能选中。

<body>
    <form action="" method="post">
        姓名：<input type="text" name="name"> <br><br>
        密码：<input type="password" name="password"> <br><br>
        性别：<label><input type="radio" name="gender" value="1"> 男</label>
            <label><input type="radio" name="gender" value="2">女</label> <br><br>
        爱好：<label><input type="checkbox" name="hobby" value="java">java</label>
            <label><input type="checkbox" name="hobby" value="game">game </label>
            <label><input type="checkbox" name="hobby" value="singing">singing</label><br><br>
        图像：<input type="file" name="image"> <br><br>    
        生日：<input type="date" name="birthday"> <br><br>
        时间：<input type="time" name="time"><br><br>
        日期时间：<input type="datetime-local" name="datetime"> <br><br>
        邮箱：<input tabindex="email" name="email"> <br><br>
        年龄：<input type="number" name="age"> <br><br>
        学历：<select name="degree">
            <option value="">---------请选择-------</option>
            <option value="1">大专 </option>
            <option value="2">本科 </option>
            <option value="3">硕士 </option>
            <option value="4">博士 </option>

        </select><br><br>
        <!-- cols控制一行可以输入多少字符，rows代表可输入多少行-->
        描述：<textarea name="description" cols="30" rows="10"></textarea> <br><br>

        <!-- 表单常见按钮 -->
        <input type="button" value="按钮">
        <input type="reset" value="重置">
        <input type="submit" value="提交"> <br>
    </form>
</body>
</html>