182021-3

SpringBoot与Web开发

SpringBoot与Web开发（超详细）

一、简介

二、SpringBoot对静态资源的映射规则

1、所有 /webjars/ ，都去 classpath:/META-INF/resources/webjars/ 找资源

2、"/" 访问当前项目的任何资源，都去静态资源的文件夹找映射

3、欢迎页：静态资源文件夹下的所有index.html页面，被"/"映射

三、模板引擎

1、引入Thymeleaf

2、Thymeleaf的使用

1、导入thymeleaf的名称空间

2、使用thymeleaf语法

3、Thymeleaf的语法规则

四、SpringMVC自动配置

1、Spring MVC auto-configuration

2、扩展SpringMVC

原理

3、全面接管SpringMVC

原理

五、如何修改SpringBoot的默认配置

一、简介

使用SpringBoot的步骤：

1、创建SpringBoot应用，选中我们需要的模块。

2、SpringBoot已经默认将这些场景配置好了，只需要在配置文件中指定少量配置就可以运行起来。

3、自己编写业务代码。

自动配置原理：

xxxxAutoConfiguration：帮我们给容器中自动配置组件

xxxxProperties:配置类来封装配置文件的内容

1

2

二、SpringBoot对静态资源的映射规则

@ConfigurationProperties(prefix = "spring.resources", ignoreUnknownFields = false)

public class ResourceProperties implements ResourceLoaderAware {

//可以设置和静态资源有关的参数，缓存时间等

1

2

3

WebMvcAuotConfiguration：

@Override

public void addResourceHandlers(ResourceHandlerRegistry registry) {

if (!this.resourceProperties.isAddMappings()) {

logger.debug("Default resource handling disabled");

return;

}

Integer cachePeriod = this.resourceProperties.getCachePeriod();

if (!registry.hasMappingForPattern("/webjars/")) {

customizeResourceHandlerRegistration(

registry.addResourceHandler("/webjars/**")

.addResourceLocations(

"classpath:/META-INF/resources/webjars/")

.setCachePeriod(cachePeriod));

}

String staticPathPattern = this.mvcProperties.getStaticPathPattern();

//静态资源文件夹映射

if (!registry.hasMappingForPattern(staticPathPattern)) {

customizeResourceHandlerRegistration(

registry.addResourceHandler(staticPathPattern)

.addResourceLocations(

this.resourceProperties.getStaticLocations())

.setCachePeriod(cachePeriod));

}

}

//配置欢迎页映射

@Bean

public WelcomePageHandlerMapping welcomePageHandlerMapping(

ResourceProperties resourceProperties) {

return new WelcomePageHandlerMapping(resourceProperties.getWelcomePage(),

this.mvcProperties.getStaticPathPattern());

}

//配置喜欢的图标

@Configuration

@ConditionalOnProperty(value = "spring.mvc.favicon.enabled", matchIfMissing = true)

public static class FaviconConfiguration {

private final ResourceProperties resourceProperties;

public FaviconConfiguration(ResourceProperties resourceProperties) {

this.resourceProperties = resourceProperties;

}

@Bean

public SimpleUrlHandlerMapping faviconHandlerMapping() {

SimpleUrlHandlerMapping mapping = new SimpleUrlHandlerMapping();

mapping.setOrder(Ordered.HIGHEST_PRECEDENCE + 1);

//所有 /favicon.ico

mapping.setUrlMap(Collections.singletonMap("/favicon.ico",

faviconRequestHandler()));

return mapping;

}

@Bean

public ResourceHttpRequestHandler faviconRequestHandler() {

ResourceHttpRequestHandler requestHandler = new ResourceHttpRequestHandler();

requestHandler

.setLocations(this.resourceProperties.getFaviconLocations());

return requestHandler;

}

}

1、所有 /webjars/ ，都去 classpath:/META-INF/resources/webjars/ 找资源

webjars：以jar包的方式引入静态资源。WebJars

访问localhost:8080/webjars/jquery/3.3.1/jquery.js的结果：

2、"/" 访问当前项目的任何资源，都去静态资源的文件夹找映射

"classpath:/META-INF/resources/",

"classpath:/resources/",

"classpath:/static/",

"classpath:/public/"

"/"：当前项目的根路径

例子：访问localhost:8080/abc 就是去静态资源文件夹里面找abc

例如我们访问js文件夹下的Chart.min.js：

访问结果：

3、欢迎页：静态资源文件夹下的所有index.html页面，被"/"映射

编写index.html文件。

访问结果：

三、模板引擎

常见的模板引擎：JSP、Velocity、Freemarker、Thymeleaf（springboot推荐，语法更简单，功能更强大）

1、引入Thymeleaf

Thymeleaf官网

在pom.xml中添加以下依赖：

<dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-thymeleaf</artifactId>

</dependency>

2、Thymeleaf的使用

@ConfigurationProperties(prefix = "spring.thymeleaf")

public class ThymeleafProperties {

private static final Charset DEFAULT_ENCODING = Charset.forName("UTF-8");

private static final MimeType DEFAULT_CONTENT_TYPE = MimeType.valueOf("text/html");

public static final String DEFAULT_PREFIX = "classpath:/templates/";

public static final String DEFAULT_SUFFIX = ".html";

1

只要我们把HTML页面放在classpath:/templates/，thymeleaf就能自动渲染。

success.html：

HelloController：

package com.keafmd.springboot.controller;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.ResponseBody;

/

Keafmd

@ClassName: HelloController

@Description:

@author: 牛哄哄的柯南

@date: 2021-03-04 19:54

*/

@Controller

public class HelloController {

@ResponseBody

@RequestMapping("/hello")

public String hello(){

return "Hello World";

}

@RequestMapping("/success")

public String success() {

return "success";

}

}

访问success的结果：

1、导入thymeleaf的名称空间

<html lang="en" xmlns:th="http://www.thymeleaf.org">

1

2、使用thymeleaf语法

HelloController：

package com.keafmd.springboot.controller;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.ResponseBody;

import java.util.Map;

/*

Keafmd

@ClassName: HelloController

@Description:

@author: 牛哄哄的柯南

@date: 2021-03-04 19:54

/

@Controller

public class HelloController {

@ResponseBody

@RequestMapping("/hello")

public String hello(){

return "Hello World";

}

/*

查出一些数据在页面显示

@param map

@return

*/

@RequestMapping("/success")

public String success(Map<String,Object> map) {

map.put("hello","你好");

return "success";

}

}

success.html：

<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

<h1>成功</h1>



<div th:text="${hello}"></div>

</body>

</html>

运行结果：

3、Thymeleaf的语法规则

1、th：任意html属性，来替换原生属性的值

th:text — 改变当前元素里面的文本内容

更多参考下图：

2、表达式

Simple expressions:（表达式语法）

Variable Expressions: ${...}：获取变量值；OGNL；

1）、获取对象的属性、调用方法

2）、使用内置的基本对象：

#ctx : the context object.

#vars: the context variables.

#locale : the context locale.

#request : (only in Web Contexts) the HttpServletRequest object.

#response : (only in Web Contexts) the HttpServletResponse object.

#session : (only in Web Contexts) the HttpSession object.

#servletContext : (only in Web Contexts) the ServletContext object.

${session.foo}

3）、内置的一些工具对象：

execInfo : information about the template being processed.

messages : methods for obtaining externalized messages inside variables expressions, in the same way as they would be obtained using #{…} syntax.

uris : methods for escaping parts of URLs/URIs

conversions : methods for executing the configured conversion service (if any).

dates : methods for java.util.Date objects: formatting, component extraction, etc.

calendars : analogous to #dates , but for java.util.Calendar objects.

numbers : methods for formatting numeric objects.

strings : methods for String objects: contains, startsWith, prepending/appending, etc.

objects : methods for objects in general.

bools : methods for boolean evaluation.

arrays : methods for arrays.

lists : methods for lists.

sets : methods for sets.

maps : methods for maps.

aggregates : methods for creating aggregates on arrays or collections.

ids : methods for dealing with id attributes that might be repeated (for example, as a result of an iteration).

Selection Variable Expressions: {...}：选择表达式：和${}在功能上是一样；

补充：配合 th:object="${session.user}：

<div th:object="${session.user}">

<p>Name: <span th:text="{firstName}">Sebastian</span>.</p>

<p>Surname: <span th:text="{lastName}">Pepper</span>.</p>

<p>Nationality: <span th:text="{nationality}">Saturn</span>.</p>

</div>

Message Expressions: #{...}：获取国际化内容

Link URL Expressions: @{...}：定义URL；

@{/order/process(execId=${execId},execType='FAST')}

Fragment Expressions: ~{...}：片段引用表达式

<div th:insert="~{commons :: main}">...</div>

Literals（字面量）

Text literals: 'one text' , 'Another one!' ,…

Number literals: 0 , 34 , 3.0 , 12.3 ,…

Boolean literals: true , false

Null literal: null

Literal tokens: one , sometext , main ,…

Text operations:（文本操作）

String concatenation: +

Literal substitutions: |The name is ${name}|

Arithmetic operations:（数学运算）

Binary operators: + , - , * , / , %

Minus sign (unary operator): -

Boolean operations:（布尔运算）

Binary operators: and , or

Boolean negation (unary operator): ! , not

Comparisons and equality:（比较运算）

Comparators: > , < , >= , <= ( gt , lt , ge , le )

Equality operators: == , != ( eq , ne )

Conditional operators:条件运算（三元运算符）

If-then: (if) ? (then)

If-then-else: (if) ? (then) : (else)

Default: (value) ?: (defaultvalue)

Special tokens:

No-Operation: _

注意：内容过多，详细内容参考官方文档。

示例：↓

HelloController：

package com.keafmd.springboot.controller;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.ResponseBody;

import java.util.Arrays;

import java.util.Map;

/*

Keafmd

@ClassName: HelloController

@Description:

@author: 牛哄哄的柯南

@date: 2021-03-04 19:54

/

@Controller

public class HelloController {

@ResponseBody

@RequestMapping("/hello")

public String hello(){

return "Hello World";

}

/*

查出一些数据在页面显示

@param map

@return

*/

@RequestMapping("/success")

public String success(Map<String,Object> map) {

map.put("hello","你好");

map.put("hello1","<h1>你好</h1>");

map.put("users", Arrays.asList("柯南","小兰","基德"));

return "success";

}

}

success.html：

<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

<h1>成功</h1>



<div id="div01" class="myDiv" th:id="${hello}" th:class="${hello}" th:text="${hello}">这里的内容被覆盖</div>

<hr/>

<div th:text="${hello1}"></div>

<div th:utext="${hello1}"></div>

<hr/>



<h4 th:text="${user}" th:each="user:${users}"></h4>

<hr/>

<h4>

<span th:each="user:${users}"> [[${user}]] </span>

</h4>

</body>

</html>

效果：

四、SpringMVC自动配置

1、Spring MVC auto-configuration

参考官方文档：点这里

Spring Boot 自动配置好了SpringMVC

以下是SpringBoot对SpringMVC的默认配置：（WebMvcAutoConfiguration）

Inclusion of ContentNegotiatingViewResolver and BeanNameViewResolver beans.

自动配置了ViewResolver（视图解析器：根据方法的返回值得到视图对象（View），视图对象决定如何渲染（转发？重定向？））

ContentNegotiatingViewResolver：组合所有的视图解析器的。

如何定制：我们可以自己给容器中添加一个视图解析器；自动的将其组合进来。

Support for serving static resources, including support for WebJars (see below).静态资源文件夹路径,webjars

Static index.html support. 静态首页访问

Custom Favicon support (see below). favicon.ico

自动注册了 of Converter, GenericConverter, Formatter beans.

Converter：转换器； public String hello(User user)：类型转换使用Converter

Formatter ：格式化器； 2017.12.17===Date

@Bean

@ConditionalOnProperty(prefix = "spring.mvc", name = "date-format")//在文件中配置日期格式化的规则

public Formatter<Date> dateFormatter() {

return new DateFormatter(this.mvcProperties.getDateFormat());//日期格式化组件

}

1

2

3

4

5

自己添加的格式化器转换器，我们只需要放在容器中即可

Support for HttpMessageConverters (see below).

HttpMessageConverter：SpringMVC用来转换Http请求和响应的；User—Json

HttpMessageConverters 是从容器中确定；获取所有的HttpMessageConverter

自己给容器中添加HttpMessageConverter，只需要将自己的组件注册容器中（@Bean,@Component）

Automatic registration of MessageCodesResolver (see below)：定义错误代码生成规则

Automatic use of a ConfigurableWebBindingInitializer bean (see below).

我们可以配置一个ConfigurableWebBindingInitializer来替换默认的（添加到容器）

初始化WebDataBinder

请求数据=====JavaBean

1

2

org.springframework.boot.autoconfigure.web：web的所有自动场景

If you want to keep Spring Boot MVC features, and you just want to add additional MVC configuration (interceptors, formatters, view controllers etc.) you can add your own @Configuration class of type WebMvcConfigurerAdapter, but without @EnableWebMvc. If you wish to provide custom instances of RequestMappingHandlerMapping, RequestMappingHandlerAdapter or ExceptionHandlerExceptionResolver you can declare a WebMvcRegistrationsAdapter instance providing such components.

如果你想保持Spring Boot MVC 功能,你只是想添加额外的(MVC配置)(https://docs.spring.io/spring/docs/4.3.14.RELEASE/spring-framework-reference/htmlsingle MVC)(拦截器,格式器,视图控制器等)您可以添加自己的@ configuration类WebMvcConfigurerAdapter类型,但没有@EnableWebMvc。如果你想提供RequestMappingHandlerMapping, RequestMappingHandlerAdapter或ExceptionHandlerExceptionResolver的自定义实例，你可以声明一个WebMvcRegistrationsAdapter实例来提供这样的组件。

If you want to take complete control of Spring MVC, you can add your own @Configuration annotated with @EnableWebMvc.

如果你想完全控制Spring MVC，你可以添加你自己的@Configuration注解@EnableWebMvc。

2、扩展SpringMVC

实现如下功能：

<mvc:view-controller path="/hello" view-name="success"></mvc:view-controller>

<mvc:interceptors>

<mvc:interceptor>

<mvc:mapping path="/hello"/>

<bean></bean>

</mvc:interceptor>

</mvc:interceptors>

做法：编写一个配置类（@Configuration），是WebMvcConfigurerAdapter类型；不能标注@EnableWebMvc

特点：既保留了所有的自动配置，也能用我们扩展的配置。

在config包下创建个MyMvcConfig。

代码实现：

package com.keafmd.springboot.config;

import org.springframework.context.annotation.Configuration;

import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;

import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/*

Keafmd

@ClassName: MyMvcConfig

@Description:

@author: 牛哄哄的柯南

@date: 2021-03-17 20:26

/

@Configuration

public class MyMvcConfig implements WebMvcConfigurer {

@Override

public void addViewControllers(ViewControllerRegistry registry) {

//浏览器发送 /keafmd 请求来到success页面

registry.addViewController("/keafmd").setViewName("success");

}

}

原理

1、WebMvcAutoConfiguration是SpringMVC的自动配置类。

2、在做其他自动配置时会导入，@Import(EnableWebMvcConfiguration.class)。

@Configuration

public static class EnableWebMvcConfiguration extends DelegatingWebMvcConfiguration {

private final WebMvcConfigurerComposite configurers = new WebMvcConfigurerComposite();

//从容器中获取所有的WebMvcConfigurer

@Autowired(required = false)

public void setConfigurers(List<WebMvcConfigurer> configurers) {

if (!CollectionUtils.isEmpty(configurers)) {

this.configurers.addWebMvcConfigurers(configurers);

//一个参考实现；将所有的WebMvcConfigurer相关配置都来一起调用；

@Override

// public void addViewControllers(ViewControllerRegistry registry) {

// for (WebMvcConfigurer delegate : this.delegates) {

// delegate.addViewControllers(registry);

// }

}

}

}

3、容器中所有的WebMvcConfigurer都会一起起作用。

4、我们的配置类也会被调用。

效果：SpringMVC的自动配置和我们的扩展配置都会起作用。

3、全面接管SpringMVC

SpringBoot对SpringMVC的自动配置不需要了，所有都是我们自己配置，所有的SpringMVC的自动配置都失效了。

做法：我们需要在配置类中添加@EnableWebMvc即可。

@EnableWebMvc

@Configuration

public class MyMvcConfig implements WebMvcConfigurer {

@Override

public void addViewControllers(ViewControllerRegistry registry) {

//浏览器发送 /keafmd 请求来到success页面

registry.addViewController("/keafmd").setViewName("success");

}

}

全面接管后，静态资源失效。

不推荐这样全面接管。

原理

加了@EnableWebMvc自动配置就失效了。

1、@EnableWebMvc的核心：

@Import({DelegatingWebMvcConfiguration.class})

public @interface EnableWebMvc {

2、DelegatingWebMvcConfiguration

@Configuration(

proxyBeanMethods = false

)

public class DelegatingWebMvcConfiguration extends WebMvcConfigurationSupport {

3、WebMvcAutoConfiguration

@Configuration(

proxyBeanMethods = false

)

@ConditionalOnWebApplication(

type = Type.SERVLET

)

@ConditionalOnClass({Servlet.class, DispatcherServlet.class, WebMvcConfigurer.class})

//容器中没有这个组件的时候，这个自动配置类才生效

@ConditionalOnMissingBean({WebMvcConfigurationSupport.class})

@AutoConfigureOrder(-2147483638)

@AutoConfigureAfter({DispatcherServletAutoConfiguration.class, TaskExecutionAutoConfiguration.class, ValidationAutoConfiguration.class})

public class WebMvcAutoConfiguration {

4、@EnableWebMvc将WebMvcConfigurationSupport组件导入进来，自动配置类失效了。

5、导入的WebMvcConfigurationSupport只是SpringMVC最基本的功能。

五、如何修改SpringBoot的默认配置

1、SpringBoot在自动配置很多组件的时候，先看容器中有没有用户自己配置的（@Bean、@Component）如果有就用用户配置的，如果没有，才自动配置；如果有些组件可以有多个（ViewResolver）将用户配置的和自己默认的组合起来。

2、在SpringBoot中会有非常多的xxxConfigurer帮助我们进行扩展配置。

3、在SpringBoot中会有很多的xxxCustomizer帮助我们进行定制配置。

以上就是SpringBoot与Web开发（超详细）篇一的全部内容。

————————————————

版权声明：本文为CSDN博主「牛哄哄的柯南」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/weixin_43883917/article/details/114375472

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(2495)

042020-11

CSS伪类:empty让我眼前一亮

前端达人

最近看过我文章的都知道：我最近在负责一个微信小程序的项目，在其中遇到了很多有趣的事和一些“奇思妙想”。本文的背景就是某天早上我看着wxml文件中一堆wx:if/else和hidden突然很烦躁，先不说wx:if导致的性能问题，就是标签上也是冗杂的。

接着上一篇文章【微信小程序自定义组件库yPicker组件分析及省市区三级联动实现】，在其中我分析了这么一个例子 —— 省市区三级联动的自定义实现，在其中有详细代码这里就不多说，说说如何调用：

我当时是这么想的：一方面出于“不在JavaScript里写太多东西”的考虑，另一方面，由于省、市、区我是分别用三个变量来实现的，所以JavaScript里就关注这三个变量，比如之间的空格或其它东西都拿到wxml文件里。就像这样：

<view class="departments location" bindtap="fixedshow"> <view class="depart_title">所在位置</view> <view wx:if="{{provinces&&citys&&areas}}" class="placeholder depart_content">{{provinces}} {{citys}} {{areas}}</view> <view class="placeholder depart_content befselect" wx:else>请选择当前位置</view> <view class="desc">如有变动请修改后再次提交</view> </view> 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6

（因为调用涉及到后来改动的只有在点击弹窗里的“确认”按钮时在事件中将那三个变量分别赋给这段代码中出现的三个变量 —— 否则会只要改动不管是点取消还是确认已经发生改变了，这样不妥！）

其布局是这样的：

.departments{ width: 100%; height: 96rpx; display: flex; align-items: center; font-size: 36rpx; font-weight: 347; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .location{ position: relative; border-bottom: 1rpx solid rgba(0,0,0,.009); display: flex; align-items: flex-start; padding-top: 20rpx; } .desc{ position: absolute; right: 19rpx; bottom: 4rpx; color: rgb(63,142,255); font-size: 23rpx; } .departments .depart_title{ width: 20%; } .departments .depart_content{ margin-left: 10%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .departments .placeholder{ width: 69%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15
    

    
        16
    

    
        17
    

    
        18
    

    
        19
    

    
        20
    

    
        21
    

    
        22
    

    
        23
    

    
        24
    

    
        25
    

    
        26
    

    
        27
    

    
        28
    

    
        29
    

    
        30
    

    
        31
    

    
        32
    

    
        33
    

    
        34
    

    
        35
    

    
        36
    

    
        37
    

    
        38
    

    
        39
    

    
        40
    

    
        41

location

在决定了要替换这里的wx:if以后，你首先要想：用什么替换？
wx:if作用是判断“是否存在”，如果不存在（条件不满足）就切换到wx:else或是wx:elif的逻辑里！

OK，想到这里，你应该能想到一个css伪类：:empty ！它的作用和我们想要的效果一样：判断如果元素（内容）为空的话…
我迅速对代码做了改动：

<view class="departments location" bindtap="fixedshow"> <view class="depart_title">所在位置</view> <view class="placeholder depart_content">{{provinces}} {{citys}} {{areas}}</view> <view class="desc">如有变动请修改后再次提交</view> </view> 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5

然后在class - depart_content上加了这个伪类：

.placeholder:empty::before{ content: "请选择当前位置"; color: rgba(0,0,0,.6); } 


    
        1
    

    
        2
    

    
        3
    

    
        4

一片空白！

经过查阅资料：:empty伪类表示如果标签内容为空，那么内容区域如果带有空格，也是不会被匹配到的！

在写标签时一定要注意这一点：标签内是否有空格或换行！（换行常常被解析为一个空格）
遇到非单标签一定注意闭合标签！

最后解决办法是：在js中将三个变量用空格相连接，再渲染到页面上即可！
wx-position
（其实这里是一个自定义的选择器，而自动定位就是往高德地图发送了请求获取到省市区字段而已，代码就不写了。。。）

到这里我们会发现一个事：上面我们不仅用了empty伪类，还用了before伪元素！

其实这一点很平常 —— 毕竟只有empty是添加不了内容的（似乎纵观css，只有before和after这样伪元素可以向页面中添加内容，不管是文字还是图片之类的）

我认为更应该关注到的是两个地方：

伪元素中没有用position定位！一般来说对一个（存在内容的）元素来说，为其设置“前置”（before）/“后置”（after）样式都需要定位：规定其显示的地方。不然大概率伪元素中的文字是显示不出来的，通过本文的empty可以猜测：他被原本存在的内容覆盖住了。
从第一点可以得出：:before 和 :after 伪元素向标签内插入内容、图形，并不会影响empty伪类的匹配！

这个特性实用的一批。

由上，可见此伪类最大的用处就是“字段缺失提示”！这是非常实用的。而且把这项任务交给CSS也可以减轻许多“（布局）负担”、体验更好、维护起来也更方便！

比如：我在项目优化时就将所有有请求的字段都加上了统一类名：

.ym-empty:empty::before{ content: "暂无数据，请重试", display: block; text-align: center; color: rgba(0,0,0,.6); /** 其它定位、字体更改操作 */ }

作者：行舟客，转载

评论(0) 浏览(2975)

112020-9

CSS基础知识第三篇

前端达人

CSS基础知识

盒子模型

看透网页布局的本质

首先利用CSS设置好盒子的大小，然后摆放盒子的位置。最后把网页元素比如文字图片等等，放入盒子里面。

概念

盒子模型由元素的内容边框border内边距padding和外边距margin组成
盒子里面的文字和图片等元素是内容区域，盒子的厚度我们称为盒子的边框
盒子内容与边框的距离是内边距，盒子与盒子之间的距离是外边距

盒子边框

语法

border:border-width粗细|border-style样式|border-color颜色

边框综合设置
border: 1px solid red; 没有顺序

表格的细线边框
cellspacing=“0” ,将单元格与单元格之间的距离设置为0
border-collapse:collapse; 表示相邻边框合并在一起

内边距

padding属性用于设置内边距，是指边框与内容之间的距离

属性
padding-left左内边距padding-right右内边距padding-top上内边距padding-bottom下内边距

简写
2个值 padding: 上下内边距左右内边距；
4个值 padding: 上内边距右内边距下内边距左内边距；

内盒尺寸计算（元素实际大小）
盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框

外边距

margin属性用于设置外边距。margin控制盒子和盒子之间的距离，属性和简写与padding相同

块级盒子水平居中

盒子必须指定宽度（width）然后就给左右的外边距都设置为auto

文字居中和盒子居中区别

盒子内的文字水平居中是text-align:center, 而且还可以让行内元素和行内块居中对齐
块级盒子水平居中左右margin 改为 auto

清除元素的默认内外边距

代码

* {
padding:0;     /* 清除内边距 */
margin:0;      /* 清除外边距 */
}

注意
行内元素为了兼容性，尽量只设置左右内外边距，不设置上下内外边距

外边距合并

相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并

解决方案
尽量给只给一个盒子添加margin值

嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者

解决方案
可以为父元素定义上边框
可以为父元素定义上内边距
可以为父元素添加overflow:hidden

盒子模型布局稳定性

按照优先使用宽度（width）内边距（padding）外边距（margin）

原因
margin有外边距合并还有ie6下面margin加倍的bug所以最后使用
padding会影响盒子大小，需要进行加减计算，其次使用
width没有问题，经常使用宽度剩余法高度剩余法来做

浮动

CSS 布局的三种机制

普通流（标准流）

块级元素会独占一行，从上向下顺序排列
行内元素会按照从左到右顺序排列，碰到父元素边缘则自动换行

浮动

让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示

定位

将盒子定在浏览器的某一个位置

为什么需要浮动

因为行内块元素可以实现多个元素一行显示但中间会有空白缝隙
因为行内块元素不能实现盒子左右对齐

什么是浮动

概念

元素的浮动是指设置了浮动属性的元素
会脱离标准普通流的控制并可以移动到指定位置

作用

让多个盒子(div)水平排列成一行，使得浮动成为布局的重要手段
浮动最早是用来控制图片，实现文字环绕图片的效果
可以实现盒子的左右对齐等等

语法

选择器 { float: 属性值; } 


    
        1

属性值
none（元素不浮动（默认））left（元素左浮动）right（右浮动）

特点

浮
加了浮动的盒子是浮起来的，漂浮在其他标准流盒子的上面
漏
加了浮动的盒子不占位置，它原来的位置漏给了标准流的盒子
特
浮动元素改变display属性，类似转换成行内块元素，但是元素之间没有空白缝隙

浮动的应用

浮动和标准流的父盒子搭配

实际的导航栏中不直接用链接a而是用li包含链接(li+a)
li+a语义更清晰
直接用a搜索引擎容易辨别为有堆砌关键字嫌疑而影响网站排名

浮动的扩展

浮动元素与父盒子的关系
子盒子的浮动参照父盒子对齐
不会与父盒子的边框重叠，也不会超过父盒子的内边距

浮动元素与兄弟盒子的关系
在一个同一个父级盒子中，如果前一个兄弟盒子是浮动的，那么当前盒子会与前一个盒子的顶部对齐
在一个同一个父级盒子中，如果前一个兄弟盒子是普通流的，那么当前盒子会显示在前一个兄弟盒子的下方

清除浮动

为什么要清除浮动

浮动元素不占用原文档流的位置，会对后面的元素排版产生影响

清除浮动本质

父级元素因为子级浮动导致内部高度为0，清除浮动后，父级会根据浮动的子盒子检测高度，父级有高度就不会影响下面的标准流

清除浮动的方法

语法

选择器{clear:属性值;}  clear 清除 


    
        1

属性值
left清除左浮动right清除右浮动both同时清除左右浮动

额外标签法

是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如<div style=”clear:both”></div>，或则其他标签br等亦可 


    
        1

优缺点
通俗易懂，书写方便，但是添加许多无意义的标签，结构化较差

父级添加overflow属性方法

可以给父级添加：overflow为hidden|auto|scroll都可以实现

优缺点
代码简洁，但是内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素

使用after伪元素清除浮动

:after 方式为空元素额外标签法的升级版，.clearfix:after {  content: ""; display: block; height: 0; clear: both;visibility: hidden; } 
.clearfix {*zoom: 1;}  /* IE6、7 专有 */ 


    
        1
    

    
        2

优缺点
符合闭合浮动思想结构语义化正确，但是由于IE6-7不支持:after，使用zoom:1触发hasLayout

使用双伪元素清除浮动

方法

.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}

优缺点
代码更简洁，但由于IE6-7不支持:after使用zoom:1触发hasLayout

评论(0) 浏览(2390)

142020-7

ifram内嵌套tab选项卡以及iframe切换的一系列问题

前端达人

最近在项目中遇到这样一个问题

当页面加载完毕后由于选项卡的另外两张属于display：none；状态所以另外两张选项卡内echarts的宽高都会变成默认100*100

查阅了很多网上的案例，得出一下一些解决方案：

1：

原因很简单，在tab页中，图表的父容器div是隐藏的（display：none），图表在执行js初始化的时候找不到这个元素，所以自动将“100%”转成了“100”，最后计算出来的图表就成了100px

解决办法：

找一个在tab页的切换操作中不会隐藏的父容器，把它的宽度的具体值取出后在初始化图表之前直接赋给图表

1 $("#chartMain").css('width',$("#TabContent").width());//获取父容器的宽度具体数值直接赋值给图表以达到宽度100%的效果 2 var Chart = echarts.init(document.getElementById('chartMain')); 3 4 // 指定图表的配置项和数据 5 option = { ...配置项和数据 }; 6 7 // 使用刚指定的配置项和数据显示图表。 8 Chart.setOption(option);

2：mychart.resize() 重新渲染高度

3: 后来我想到了问题所在，既然高度是因为display：none；导致的那大可不必设置这个属性，但是在页面渲染完毕后加上即可

所以取消了选项卡的display：none；但在页面加载完毕后
window.οnlοad=function(){

根基id在添加css display：none；

}

即可解决，

分割线

---------------------------------------------------------------------

接下来解决一下ifram内外通讯互相通讯赋值ifram src 和高度问题

评论(0) 浏览(4507)

132020-5

小白学VUE——快速入门

前端达人

文章目录

小白学VUE——快速入门

前言：什么是VUE?

环境准备：

vue的js文件

vscode

Vue入门程序

抽取代码片段

vue标准语法：

什么是vue指令？

v-bind指令

事件单向绑定

v-model:事件双向绑定

v-on事件监听指令

v: on:submit.prevent指令

v-if 判断指令

v-for 循环渲染指令

前言：什么是VUE?

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。 Vue 只关注视图层，采用自底向上增量开发的设计。 Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

环境准备：
vue的js文件
使用CDN外部导入方法
以下推荐国外比较稳定的两个 CDN，把这些网址放进script标签的src属性下即可，国内还没发现哪一家比较好，目前还是建议下载到本地。

Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js
unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的的版本一致。
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
2.VSCODE软件
(2).使用内部导入方法（自行下载js文件放进工作区js文件夹即可）

vscode

前往vscode官网下载对应版本的vscode

Vue入门程序
首先了解一下什么是插值
插值：数据绑定最常见的形式就是使用 **{{…}}（双大括号）**的文本插值：

单独抽出这段来看一下：
Vue即是vue内置的对象，el(element)指的是绑定的元素，可以用#id绑定元素，data指的是定义页面中显示的模型数据，还有未展示的methods，指的是方法

var app = new Vue({
el: "#app",//绑定VUE作用的范围
data: {//定义页面中显示的模型数据
message: 'hello vue'
}
});

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<script src="js/vue.min.js"></script>

</head>
<body>


<div id="app">{{ message }}</div>

<script>
//创建一个VUE对象
var app = new Vue({
el: "#app",//绑定VUE作用的范围
data: {//定义页面中显示的模型数据
message: 'hello vue'
}
});

</script>

</body>
</html>

抽取代码片段

步骤：文件-首选项-用户片段
输入片段名称回车

复制以下片段覆盖之前的注释内容

{
"vh": {
"prefix": "vh", // 触发的关键字输入vh按下tab键
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"",
"<head>",
" <meta charset=\"UTF-8\">",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
" <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
" <title>Document</title>",
" <script src=\"js/vue.min.js\"></script>",
"</head>",
"",
"<body>",
" <div id=\"app\"></div>",
" <script>",
" var vm=new Vue({",
" el:'#app',",
" data:{},",
" methods:{}",
" });",
" </script>",
"</body>",
"",
"</html>",
],
"description": "vh components"
}
}

此时，新建一个html文件，输入vh在按下tab键即可快速填充内容

vue标准语法：
什么是vue指令？
在vue中提供了一些对于页面 + 数据的更为方便的输出,这些操作就叫做指令, 以v-xxx表示
类似于html页面中的属性 `

比如在angular中以ng-xxx开头的就叫做指令
在vue中以v-xxx开头的就叫做指令
指令中封装了一些DOM行为, 结合属性作为一个暗号, 暗号有对应的值,根据不同的值，框架会进行相关DOM操作的绑定

下面简单介绍一下vue的几个基础指令： v-bind v-if v-for v-on等

v-bind指令
作用：

给元素的属性赋值
可以给已经存在的属性赋值 input value
也可以给自定义属性赋值 mydata
语法
在元素上 v-bind:属性名="常量||变量名"
简写形式 :属性名="变量名"
例：
<div v-bind:原属性名="变量"></div> <div :属性名="变量"></div>

事件单向绑定

事件单向绑定，可以用 v-bind:属性名="常量||变量名，绑定事件，用插值表达式取出值

<body>
<div id="app">

<h1 v-bind:title="message">
{{content}}
</h1>


<h2 :title="content">{{message}}</h2>

</div>
<script>
var vm=new Vue({
el:'#app',
data:{
content: '我是标题',
message: '页面加载于' + new Date().toDateString()
}

});
</script>
</body>

效果：

————————————————
版权声明：本文为CSDN博主「热爱旅行的小李同学」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_46275020/java/article/details/106055312

评论(0) 浏览(3062)

242020-4

前端架构演进及主流UI

前端达人

文章目录

总结

前端三要素

JavaScript 框架

NodeJs

常用UI框架

前后端分离的演进

为了降低开发的复杂度，以后端为出发点，比如:Struts、SpringMVC 等框架的使用，就是后端的 MVC 时代;

以 SpringMVC 流程为例:

优点:

前后端职责很清晰: 前端工作在浏览器端，后端工作在服务端。清晰的分工，可以让开发并行，测试数据的模拟不难，前端可以本地开发。后端则可以专注于业务逻辑的处理，输出 RESTful等接口。
前端开发的复杂度可控: 前端代码很重，但合理的分层，让前端代码能各司其职。这一块蛮有意思的，简单如模板特性的选择，就有很多很多讲究。并非越强大越好，限制什么，留下哪些自由，代码应该如何组织，所有这一切设计，得花一本书的厚度去说明。
-部署相对独立: 可以快速改进产品体验
缺点:

代码不能复用。比如后端依旧需要对数据做各种校验，校验逻辑无法复用浏览器端的代码。如果可以复用，那么后端的数据校验可以相对简单化。
全异步，对 SEO 不利。往往还需要服务端做同步渲染的降级方案。性能并非最佳，特别是移动互联网环境下。
SPA 不能满足所有需求，依旧存在大量多页面应用。URL Design 需要后端配合，前端无法完全掌控。
NodeJS 带来的全栈时代

前端为主的 MV* 模式解决了很多很多问题，但如上所述，依旧存在不少不足之处。随着 NodeJS 的兴起，JavaScript 开始有能力运行在服务端。这意味着可以有一种新的研发模式:
————————————————
版权声明：本文为CSDN博主「叁有三分之一」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/iME_cho/article/details/105654633

评论(0) 浏览(3158)

242020-4

【CSS基础学习】行内元素，块级元素，行内块级元素

前端达人

文章目录

元素的显示方式和转换

显示方式之间的转化

元素的显示方式和转换

块级元素

块级元素（inline）：
块级元素可以包含行内元素和其它块级元素，且占据父元素的整个空间，可以设置 width 和 height 属性，浏览器通常会在块级元素前后另起一个新行。
常见块级元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 150px;
            height: 150px;
            background-color: cadetblue;
        }
    </style>
</head>
<body>
    <div>块级元素1</div>
    <div>块级元素2</div>
</body>
</html>

分析：
块级元素的高和宽可以被修改，而且块级元素会在一个块级元素之后另起一行。

行级元素
行级元素（block）：
一般情况下，行内元素只能包含内容或者其它行内元素，宽度和长度依据内容而定，不可以设置，可以和其它元素和平共处于一行。
常见行级元素：
a,b,strong,span,img,label,button,input,select,textarea
特点：

和相邻的行内元素在一行上
高度和宽度无效，但是水平方向上的padding和margin可以设置，垂直方向上的无效
默认的宽度就是它本身的宽度
行内元素只能容纳纯文本或者是其他的行内元素（a标签除外）
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span{
            width: 150px;
            height: 150px;
            font-size: 40px;
            background-color: cadetblue;
        }
    </style>
</head>
<body>
    <span>行级元素1</span>
    <span>行级元素2</span>
</body>
</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>
    <style>
        span{
            width: 150px;
            height: 150px;
            font-size: 20px;
            background-color: cadetblue;
            display: inline-block;
        }
    </style>
</head>
<body>
    <span>以前我是行级元素，</span>
    <span>现在我只想做行内块级元素。</span>
</body>
</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>
    <style>
        div{
            width: 150px;
            height: 150px;
            font-size: 30px;
            background-color: cadetblue;
            display: inline;
        }
    </style>
</head>
<body>
    <div>我以前是块级元素，</div>
    <div>现在我是行级元素！</div>
</body>
</html>

分析：
在VSC中，修改宽高的代码已经出现了波浪线，证明他是错误的，所以现在的div已经变成了行级元素。

————————————————
版权声明：本文为CSDN博主「董小宇」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/lolly1023/article/details/105715892

评论(0) 浏览(3109)

182020-4

【CSS基础学习】CSS的三大特性

前端达人

文章目录

继承性

层叠性

优先级

优先级的使用说明

CSS有三大特性，分别是继承性，层叠性，优先级。CSS的主要特征是继承性，这里先讲解继承性。

继承性

继承性的使用说明

继承性的描述：
继承性是指被包在内部的标签将拥有外部标签的样式性，即子元素可以继承父类的属性。
例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            color: blue;
        }
    </style>
</head>
<body>
    <div>父元素
        <div>子元素
            <p>我依旧是子元素</p>
        </div>
    </div>
</body>
</html>

效果如下：

有图可见，被div包裹住的元素，都具有了div的css样式属性，这被我们称为继承性。

在CSS中以，text-,font-,line-开头的属性都是可以继承的。

CSS继承的局限性
并不是所有的CSS属性都可以被继承的，以下就不具有继承性：

a标签的字体颜色不会被继承，a标签的字体颜色是不会改变的，可以通过页面的的F12可以查看到，a标签是有一个默认的color:-webkit-link;字体颜色属性，所以父元素设置颜色是不能发生改变a标签字体的颜色。
h标签的字体的大小也是不能被继承的，如下代码给父元素在设置一个字体属性20px，再添加一个h标签，在浏览器中可以发现h标签中字体的大小是不会发生改变的，因为h标签中有一个默认的font-size:1.5em;字体大小属性。
div标签的高度如果不设置由内容来绝对（没有内容高度未0），宽度默认由父元素继承过来
边框属性
外边距属性
内边距属性
背景属性
定位属性
布局属性
元素宽高属性
层叠性
层叠性的使用说明
层叠性的表述
所谓层叠性是指多种CSS样式的叠加，例如，当使用内嵌式CSS样式表定义p标记字号大小为12像素，ID选择器定义p标记颜色为红色，那么段落文本将显示为12像素红色，即这两种样式产生了叠加。
例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            font-size: 32px;
        }
    </style>
</head>
<body>
            <p style="color: blue;">我这里体现了层叠性呀</p>
</body>
</html>

使用结论
由于内容有限，但是结论是一定的，所以我直接给出结论：

若多个选择器定义的样式不冲突，则元素应用所有选择器定义的样式。
若多个选择器定义的样式发生冲突（比如：同时定义了字体颜色属性），则CSS按照选择器的优先级，让元素应用优先级搞得选择器样式。
CSS定义的选择器优先级从高到低为：行内样式–>ID样式–>类样式–>标记样式。
如若想直接定义使用哪个样式，不考虑优先级的话，则使用!important，把这个加在样式后面就行了。
优先级
定义CSS样式时，经常出现两个或更多规则应用在同一个元素上，这时就会出现优先级的问题。层叠性和选择器的圈中有很大的关系。

优先级的使用说明
权重分析：

内联样式：如：style=""，权重为1000。
ID选择器，如：#content，权重为100。
类，伪类和属性选择器，如.content，权重为10。
标签选择器和伪元素选择器，如div p，权重为1。
继承样式，权重为0。
将基本选择器的权重相加之和，就是权重大小，值越大，权重越高。
计算权重方法
数标签：先数权重最高的标签，然后数第二高权重的标签，以此类推，就会生成一个数组，里面包含四个数字。
比如（0，0，0，0）分别对应（行内式个数，id选择器个数，类选择器个数，标签选择器个数）
然后两个选择器通过对别四个数字的大小，确定权重关系。
例：
#box ul li a.cur有1个id标签，1个类，3个标签，那么4个0就是（0，1，1，3）
.nav ul .active .cur有0个id，3个类，1个标签，那么4个0就是（0，0，3，1）
例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .p1{
            color: blue;
        }
        #p1{
            color: red;
        }
    </style>
</head>
<body>
            <p id="p1" class="p1">我们来试一下优先级</p>
</body>
</html>

先推测一波，因为前面讲到了ID选择器的权重是大于类选择器的，所以这里颜色应该为red。
效果如下：

推测正确！优先级GET！

评论(0) 浏览(3373)

282020-3

HTML基础知识

前端达人

HTML基础知识

HTML的历史：HTML，XHTML
HTML的全局属性：全局标准属性，全局事件属性
HTML的元素：

标记语言，是一种将文本以及与文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的电脑文字编码。
HTML，为超文本标记语言。
XHTML是可扩展超文本标记语言，是一种更纯洁，更严格，更规范的html代码。
html文件由文件头和文件体两部分组成。
标签的分类：双标签，单标签。

HTML的全局标准属性
在HTML中，规定了8个全局标准属性。

class用于定义元素的类名。
id用于指定元素的唯一id。
style用于指定元素的行内样式。
title用于指定元素的额外信息。
accesskey用于指定激活某个元素的快捷键。
支持accesskey属性的元素有<a>, <area>, <button>, <input>, <label>, <legend>, <textarea>。

tabindex用于指定元素在tab键下的次序。
支持tabindex属性的元素有<a>,<area>,<button>,<input>,<object>,<select>,<textarea>

dir用于指定元素中内容的文本方向。
dir的属性值只有ltr和rtl两种，分别是left to right和right to left。

lang用于指定元素内容的语言。
HTML的全局事件属性
Window窗口事件
onload，在页面加载结束后触发。
onunload，在用户从页面离开时触发，如单击跳转，页面重载，关闭浏览器窗口等。
Form表单事件
onblur，当元素失去焦点时触发。
onchange，在元素的元素值被改变时触发。
onfocus，在元素获得焦点时触发。
onreset，当表单中的重载按钮被点击时触发。
onselect，在元素中文本被选中后触发。
onsubmit，在提交表单时触发。
Keyboard键盘事件
onkeydown，在用户按下按键时触发。
onkeypress，在用户按下按键后，按着按键时触发。
该属性不会对所有按键生效，不生效按键如：alt，ctrl，shift，esc。

onkeyup，当用户释放按键时触发。
Mouse鼠标事件
onclick，当在元素上单击鼠标时触发。
onblclick，当在元素上双击鼠标时触发。
onmousedown，当在元素上按下鼠标按钮时触发。
onmousemove，当鼠标指针移动到元素上时触发。
onmouseout，当鼠标指针移出元素时触发。
onmouseover，当鼠标指针移动到元素上时触发。
onmouseup，当在元素上释放鼠标按钮时触发。
Media媒体事件
onabort，当退出媒体播放器时触发。
onwaiting，当媒体已停止播放但打算继续播放时触发。
HTML元素

<!DOCTYPE>，声明文档类型。
<html>，HTML元素真正的根元素。
<head>，定义html文档的文档头。

head中包含的元素

title，定义HTML文档的标题
base，为页面上的所有链接规定默认地址或者默认目标
link，用于定义文档与外部资源之间的关系
meta，提供关于HTML的元数据
style，用于为HTML文档定义样式信息
script，用于定义客户端脚本

body，定义html文档的文档体。
content-Type，用于设定网页的字符集，便于浏览器解析与渲染页面。

cache-control，用于告诉浏览器如何缓存某个响应及缓存多长时间。

参数：

no-cache，发送请求，与服务器确认该资源是否被更改，如果没有，则使用缓存

no-store，允许缓存，每次都要去服务器上下载完整的响应

public，缓存所有响应

private，只为单个用户缓存

max-age，表示当前请求开始，相应响应在多久内能被缓存和重用，不去服务器重新请求，max-age=60表示响应可以再缓存和重用60秒

<meta http-equiv=cache-control" content="no-cache">

1

expires，用于设定网页的到期时间，过期后重新到服务器上重新传输。

refresh，网页将在设定的时间内，自动刷新并转向设定的网址

Set-Cookie，用于设置网页过期。

无语义元素：<span>,<div>，<span>是内联标签，用在一行文本中，<div>是块级标签。

div用于存放需要显示的数据，css用于指定如何显示数据样式，做到结构与样式相互分离。

查看div+css样式HTML:点击下方链接跳转，可查看源码：

div-css.html

格式化元素

普通文本

<b>，定义粗体文本

<big>，定义大号字

<em>，定义着重文字

<i>，定义斜体字

<small>，定义小号字

<strong>，定义加重语气

<sub>，定义下标字

<sup>，定义上标字

<ins>，定义插入字

<del>，定义删除字

计算机输出

<code>，定义计算机代码

<kbd>，定义键盘输出样式

<samp>，定义计算机代码样本

<tt>，定义打字机输入样式

<pre>，定义预格式文本

术语

<abbr>，定义缩写

<acronym>，定义首字母缩写

<address>，定义地址

<bdo>，定义文字方向

<blockquote>定义长的引用

<q>，定义短的引用语

<cite>，定义引用，引证

<dfn>，定义一个概念，项目

图像热区链接

图像热区链接，是什么呢？当你在看一些购物网页的时候，一张图片上，可以在不同的地方链接到不同的目标位置，点击不同的地方可以跳转到不同的网页，这也是做商城项目一般要用到的技术。

这个时候不是<a>标签元素了，而是<area>元素。

<area>元素的属性有两个shape，cords属性。

<area>的坐标系，原点为图片的左上角,x轴正方向向右，y轴正方向向下

我画个图哈，反映<area>的坐标系：

图像热区链接的使用，<map>标签定义一个image-map，可以含一个以上的热区<area>，每个热区都有独立的链接。

要为<map>标签赋予name属性。

将<img>标签的usemap属性与<map>标签的name属性相关联。

为了证明我学会了，我写一个html页面。

map -> name="image_link"

img -> usemap="#image_link"
1
点击跳转：imgmap.html

e-mail链接
e-mail链接主要是看到有很多官方网页需要做的一个打开一封新的电子邮件。

点击下方链接即可看到效果：

联系我们

代码：

<a href="mailto:xxxxxx@qq.com">联系我们</a>

列表元素
整合列表html网页，点击跳转：ul-ol.html

无序列表，<ul>定义无序列表，<li>定义列表项。
<ul>的type属性值：disc点，square方块，circle圆，none无.

有序列表，<ol>定义有序列表，<li>定义列表项。
<ol>的type属性值：数字，大写字母，大写罗马数字，小写字母，小写罗马数字。

start属性定义序号的开始位置。

定义列表<dl>，定义列表内部可以有多个列表项标题，每个列表项标题用<dt>标签定义，列表项标题内部又可以有多个列表项描述，用<dd>标签定义。
表格
整合表格html网页，点击跳转：table.html

<table>定义表格
<caption>定义表格标题
<tr>定义若干行
<td>定义若干单元格
<th>定义表头
表格分头部，主体，底部：<thead>,<tbody>,<tfoot>三个标签。

<td>的两个属性：colspan用于定义单元格跨行，rowspan用于定义单元格跨列
<tbody>,<thead>,<tfoot>标签通常用于对表格内容进行分组。
表单由<form>标签定义，action属性定义了表单提交的地址，method属性定义表单提交的方式。

<input type="text">

<input type="password">

<input type="radio">

<input type="checkbox">

<input type="submit">

<input type="reset">

<input type="button">

<input type="image">

<input type="file">

<input type="hidden">

<textarea>元素

<textarea>标签具有name,cols,rows3个属性。

name用于提交参数
value用于输入文本内容
cols和rows分别用于文本框的列数和行数，宽度和高度。

效果：

自我评价：

代码：

<form action="web" method="post">
 自我评价：<br/>
 <textarea rows="10" cols="50" name="introduce">
 </textarea>
 <br/>
 <input type="submit" id="" name="">
</form>

frameset

<frameset>定义一个框架集，用于组织多个窗口，每个框架存有独立的html文档
<frameset>不能与<body>共同使用，除非有<noframe>元素
<frame>用于定义<frameset>中一个特定的窗口。空元素<frame/>

：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>frameset</title>
    </head>
    <frameset cols="25%,50%,25%">
        <frame src="https://blog.csdn.net/qq_36232611" scrolling="no" noresize="noresize"></frame>
        <frame src="https://juejin.im/user/5e477d7ce51d4526c550a27d" ></frame>
        <frame src="https://www.jianshu.com/u/c785ece603d1" ></frame>
    </frameset>
    <noframes>
        <body>您的浏览器无法处理框架，请更换浏览器打开</body>
    </noframes>
</html>
1

显示结果描述实体名称实体编号
空格    
< 小于号 < <
> 大于号 > >
& 和号 & &
" 引号 " "
' 撇号 ' (IE不支持) '
￠分（cent） ¢ ¢
£ 镑（pound） £ £
¥ 元（yen） ¥ ¥
€ 欧元（euro） € €
§ 小节 § §
© 版权（copyright） © ©
® 注册商标 ® ®
™ 商标 ™ ™
× 乘号 × ×
÷ 除号 ÷ ÷
————————————————
版权声明：本文为CSDN博主「达达前端」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_36232611/article/details/105109467

评论(0) 浏览(3425)

182020-3

HTML 学习总结2 框架表单

前端达人

这是HTML学习总结系列的第二篇，第一篇在这里：

HTML 学习总结1入门基本概念、格式文字标签图片标签链接标签表格标签注释

这次的学习内容相较第一次分类少，但是比较杂。

框架集标签

框架标签是将网页设置成网页框架的一种双标签，被设计成框架的网页被切分成若干区域，没有实际的内容，只当做框架用于镶嵌其它的网页。

那么，这个标签是：

<frameset></frameset>


    框架集标签的属性



    使用的时候需要将HTML文件中的body标签部分替换为框架标签，写成这样：




<html>
    <head></head>
    <frameset rows="500,*" border="3" noresize="noresize">
    </frame>
</html>

看上面的代码，用frameset替换掉body不难理解，毕竟我们约定做框架的网页不具有实体内容
接着，这里提到了框架标签的三个属性，分别为：

rows/cols 框架的分行或分列
border 分隔框的宽度
noresize 大小是否可调
现在来分别解释一下

第一个，rows 或cols 属性，代表了框架的分行或分列的情况，在引号内书写该属性的值的时候，不需要指明分成几栏，只需要指明每一栏占据的宽度或高度（单位为像素）并使用逗号隔开。浏览器在解析的时候会计算到底分成了几栏。另外，不指定宽度而使其占据剩余位置时，可以使用通配符 “ * ”。

第二个，border 属性，代表了分隔框的宽度，这是属性的数值单位是像素。所以如果你不想加入边框，则可以将它设置为零。

第三个，noresize 属性，表示我们的框架的大小是否可调，frameset标签默认为大小可调，当用户鼠标移动到边框上时，他可以拖拽改变大小。所以如果不想让用户随意改变框架大小，那么可以选择使用这个属性 （当然，也可以选择把边框的宽度设为零，让他找不到）。 这个属性的值同属性名称一样。

最后还需要说明的是：框架集标签是可以进行嵌套的，也就是说，在已经分出来的框架中，我们可以借着分栏。

在框架内镶嵌网页
刚刚我们使用 frameset 标签将网页变成框架并划分成了若干区域，每一个区域都是一个单独的可显示页面的子网页（笔者起的名）。现在，我们需要在这些区域内为它镶嵌上一个网页，这需要用到frame这个单标签在框架下添加网页，它的写法如下：

<frame src="...." name="...." />
1
这里可以看到 frame 标签的两个属性; src 和 name 。它们分别代表着添置连接（这是一个超链接，网页，HTML文件，图片等都是可以的。有关超链接的信息，可参照上一篇学习总结或者问问度娘 ），以及框架名称。

框架的命名，很主要的一个原因在于可以重复利用一个框架，即在其他标签使用时，可以在某个框架上显示相应内容。还记得上一篇中，我们提到的链接标签 target 属性中的 “某框架名称” 这个值吗？在为框架命名后，就可以使用上述的 target 用法，将打开的网页放在某个框架中了。

综上，举个例子：

先来创造一个带有嵌套的框架
<!--frame-->
<html>
    <head></head>
    <frameset rows="200,*" border="5" noresize="noresize">
        <frame src="title.html" name="title" />
        <frameset cols="200,*">
            <frame src="selection_bar.html" />
            <frame name="output_page" />
        </frameset>
    </frameset>
</html>





<!--title-->
<html>
    <head></head>
    <body>
        <font size="7" color="blue">
            The test page
        </font>
    </body>
</html>






<!--selection_bar-->
<html>
    <head></head>
    <body>
        <font size="5" color="red">
            Please select websites.
        </font>
        <br /><br />
        <a href="http://www.baidu.com" target="output_page"/>百度一下<br /><br />
        <a href="https://www.csdn.net" target="output_page"/>CSDN <br /><br />
    </body>
</html>




最后来看下结果：

评论(0) 浏览(3224)

首页

execInfo : information about the template being processed.

messages : methods for obtaining externalized messages inside variables expressions, in the same way as they would be obtained using #{…} syntax.

uris : methods for escaping parts of URLs/URIs

conversions : methods for executing the configured conversion service (if any).

dates : methods for java.util.Date objects: formatting, component extraction, etc.

calendars : analogous to #dates , but for java.util.Calendar objects.

numbers : methods for formatting numeric objects.

strings : methods for String objects: contains, startsWith, prepending/appending, etc.

objects : methods for objects in general.

bools : methods for boolean evaluation.

arrays : methods for arrays.

lists : methods for lists.

sets : methods for sets.

maps : methods for maps.

aggregates : methods for creating aggregates on arrays or collections.

ids : methods for dealing with id attributes that might be repeated (for example, as a result of an iteration).

CSS基础知识

盒子模型

看透网页布局的本质

概念

盒子边框

内边距

外边距

块级盒子水平居中

文字居中和盒子居中区别

清除元素的默认内外边距

外边距合并

相邻块元素垂直外边距的合并

嵌套块元素垂直外边距的合并

盒子模型布局稳定性

浮动

CSS 布局的三种机制

普通流（标准流）

浮动

定位

为什么需要浮动

什么是浮动

概念

作用

语法

特点

浮动的应用

浮动的扩展

清除浮动

为什么要清除浮动

清除浮动本质

清除浮动的方法

语法

额外标签法

父级添加overflow属性方法

使用after伪元素清除浮动

使用双伪元素清除浮动

前言：什么是VUE?

vscode

抽取代码片段

事件单向绑定

文章目录

前端三要素

JavaScript 框架

NodeJs

常用UI框架

前后端分离的演进

文章目录

元素的显示方式和转换

块级元素

继承性

继承性的使用说明

HTML基础知识

frameset

框架集标签的属性

分类

日历

链接

个人资料

存档