20170911-20170917 HTML+CSS工作学习周总结

最新推荐文章于 2024-06-15 17:39:26 发布

Dorthyn

最新推荐文章于 2024-06-15 17:39:26 发布

阅读量622

点赞数

分类专栏： Study 文章标签： html 工作 css

本文链接：https://blog.csdn.net/Dorthyn/article/details/78014887

版权

Study 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

20170911-20170917

HTML学习总结

为了布局的一切。假装在做前端~

HTML是一种超文本标记语言(Markup language)

名词/标签解释

预格式文本——按照现有的格式显示；

<!--可用来实现隐藏文本-->
<abbr></abbr>

<!--属性用于指向样表中的类-->
<class></class>

表单——收集用户信息，处理表单用php和asp;form标签有action属性和method属性，用来get/post。

/*
位于文档的头部，可提供有关页面的元信息，比如针对搜索引擎和更新品读的描述和关键词
*/
<meta name = "keywords" content = "教育网站"/>

<input></input>
<!--下拉列表-->
<select></select>
<!--多行文本框-->
<textarea></textarea>
<!--三种按钮：普通、提交、重置-->
<input type="button"></input>
<input type="submit"></input>
<input type="reset"></input>
<!--可以绑定-->
/*
input元素要有一个id，label标签就有一个for属性，和id相同就表示绑定了
*/
<label for="要绑定的id"></label>

字符实体

在html中某些字符是预留的，不能使用小于号和大于号，因为浏览器会误认为他们是标签。如果希望正确地显示预留字符，必须使用字符实体。

&nbsp

不间断空格——防止空白折叠

标准的div+CSS页面，用的标签种类很少：

div,p,h,span,a,img,ul,ol,dl,input

CSS

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。[摘自百度百科]

html:超文本标记语言——从语义角度描述页面结构

CSS:层叠式样式表——从审美角度负责页面样式

JS:JavaScript——从交互角度描述页面行为

JSP全称Java Server Pages，是在服务器端执行的。CSS写在head里或者是单独的文件中。

<style type="text/css"></style>

选择器

要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。

HTML页面中的元素就是通过CSS选择器进行控制的。

一些常见的属性

字符颜色：color:red;

字号大小：font-size:40px;

背景颜色：background-color:green;

等等。。。

基础选择器

标签选择器：

所有的标签都可以是选择器；
无论这个标签藏得多深，一定能够被选上；
选择的是所有，经常用来描述共性而无法描述个性。

知道新标签能更清晰地表达文档结构；

id选择器，选择符是#

一个html页面，不能同时出现相同的id，即使是同一个类型也不可以。

一个标签可以被多个CSS选择器选择，共同作用，这就是层叠式的第一层含义；

user agent stylesheet（浏览器中的审查元素）不用管，用户默认设置。——灰色背景

<!--标签定义导航链接的部分-->
<nav></nav>
<!--标签内容可并排显示-->
<span></span>
<!--一个例子-->
<span>文章作者</span><span>文章发表时间</span><span>文章类型</span>

rem：相对字体大小单位

main标签一个文档中不超过一个。

margin padding

box-shadow——盒子阴影

h5有很多语义化标签，比如，article，section，aside，footer，figure等等，可以更好地复用。

label可以内嵌控件；

placeholder=“内容输入后隐藏”

类选择器

所谓类和id类似，class属性可以重复，CSS用点(.)来表示类。

同一个标签，可能属于多个类，雷鸣之间用空格隔开，表示后代选择器。

不要把所有的样式卸载同一个类中，类提供公共服务。某一个标签可以携带多个类。

id是js用的；

var box = document.getElementById("box");

后代选择器

后代选择器（descendant selector）又称为包含选择器。

后代选择器可以选择作为某元素后代的元素。

用空格。

交集选择器

<!--
        交集选择器,相交的部分就是要设置属性值的标签
        1,格式:
        选择器1选择器2...{
            属性:值;
        }
        2,注意点:
        (1),选择器之间没有任何的连接符号
        (2),选择器可以是标签名称,也可以是id、class名称
        (3),交集选择器仅仅是了解
    -->
    <style>
        p.para1{
            color: red;
        }
    </style>

并集选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>16-css并集选择器.html</title>
    <!--
        并集选择器
        1,格式:
        选择器1,选择器2,...{
                属性:值;
           }
        2,注意点:
        (1),选择器之间利用,连接
        (2),选择器可以是标签名称,也可以是id、class名称
    -->
    <style>
        .ht,.para{
            color: red;
        }
    </style>
</head>
<body>

<h1 class="ht">我是头</h1>
<p class="para">我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</body>
</html>