前端入门

最新推荐文章于 2023-06-26 22:35:13 发布

原创最新推荐文章于 2023-06-26 22:35:13 发布 · 291 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#web #html #css

html+css 专栏收录该内容

3 篇文章

订阅专栏

web前端入门（一）

html+css入门笔记

1.1 认识HTML

HTML 是 HyperText Mark-up Language 的首字母简写。
HTML不是一种编程语言（因为HTML中没有变量，流程控制等），它是一种标记语言 (Markup Language)；

浏览器是解释和执行HTML源码的工具。

1.3 HTML标签

<html>

<head>
<meta charset="utf-8">
<title>文档标题</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="index.js"></script>
<style></style>
</head>

<body>......</body>
</html>

meta 标签提供关于 HTML 文档的元数据。
link 元素引入外部样式。使用link：xxxx

1.3.2 基本标签

div 标签它是可用于组合其他HTML元素的容器
section元素是html5中新增加的结构元素，表示页面中的一个内容区块，比如章节、页眉、页脚、或者页面中的其他部分。它可以与h1,h2,h3,h4,h5,h6等元素结合起来使用，标示文档结构。
article元素也是html5中新增加的结构元素，a是一个特殊的section标签，它比section具有更明确的语义。它代表一个独立的、完整的相关内容块表示页面中的一块与上下不相关的独立内容，如博客中的一篇文章。
span 行内元素容器
hx HTML标题标签，x=1~6
p 在其前后创建一些空白
br 换行
hr 分割线
a 超链接 href：链接的目标URL，target：跳转方式。
img 图像 src： URL
ul 无序列表 ol 有序列表内部用 li 标签
!–注释-- 注释

使用前缀&进行转移

div无任何语义，仅仅用作样式化或者脚本化的标签。对于一段主题性的内容，则就适用section，而假如这段内容可以脱离上下文，作为完整的独立存在的一段内容，则就适用article。

1.5 W3C规范

1.5.3 标签嵌套规则

块元素可以包含行元素或某些块元素，行元素只能包含气其他行元素
块级元素不能放在
里面。
hx、p、dt只能包含行元素。

块级元素与块级元素并列、内嵌元素与内嵌元素并列。

2.1 HTML 标签属性

2.1.2 通用属性

通用属性指的是所有标签都拥有的属性。

id 规定元素的唯一 id。
class 规定元素的类名。
style 规定元素的行内样式。
title 规定元素的额外信息，当鼠标放在元素上，提示的文本内容。

<!--以下代码是实际开发的案例-->
<div class="wrapper" id="wrapper" style="background:red;" title="此处鼠标悬停显示此段信息"></div>

2.2 table 表格标签

2.2.1 table表格

在Html中

标签表示一个表格，每个表格均有若干行（由标签定义），每行被分割为若干单元格（由

标签定义）。
表格属性

border ：设置表格边框
width ：设置表格宽度
align ：设置表格对齐
cellpadding ：设置单元格间距
cellspacing ：设置像素间隙

2.2.2 td跨行/跨列属性

rowspan 属性定义单元格应该纵跨的行数。

colspan 属性定义单元格应该横跨的列数

2.2.3 table完整表格

一个完整table表格一般包含、、和元素结合，用来规定表格的各个部分（表头、主体、页脚）。

标签用于组合 HTML 表格的表头内容。
标签用于组合 HTML 表格的主体内容。
标签用于组合 HTML 表格的页脚内容。

2.3 form 表单标签

2.3.1 form表单

表单是一个包含表单元素的区域，允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。

常用属性：
name:表单名称
action:表单数据提交的地方(通常是一个后台文件名(.jsp/.php/.asp/.aspx/.py等），或网址）。如果是#，表示提交到当前文件下。
method:前端提交数据到后端的方法，主要有：get和post,默认的是get。

2.3.2.1 input标签

表单元素分为：

input类：主用用来输入，选择或发出指令。
type:text/password/radio/checkbox/file/button/image/submit/reset

text:单行文本输入框 type="text"可以不写，默认值。
属性：placeholder(提示）/name（命名）/minlength和maxlength（最少/多输入的字符个数）/disabled（失效）/readonly（只读）value（默认值）/pattern（正则匹配）

password:密码框属性与text一样

radio:单选钮，通常是两项以上。常用属性有：name（必须要有）/value/checked（选中）/disabled（失效）/readonly（只读）

checkbox:复选框，可以用来选择0项、1项或多项。
常用属性有：name（必须要有）/value/checked（默认选中）/disabled（失效）/readonly（只读）

file:文件上传按钮

button:普通按钮，通常用它去调用脚本代码。
常用属性有：value（按钮的标题）/disabled（失效）

image:图片按钮，用法与button一样。有一个特殊属性：src(用来加载提示图片，用它替换了value)
它有提交功能，与submit功能一样。

submit:提交按钮，用来将表单数据提交到后台。
常用属性有：value（按钮的标题）/disabled（失效）

reset:重置按钮，将表单所有组件输入的内容全部清空，还原为初始状态。
常用属性有：value（按钮的标题）/disabled（失效）
textarea类
文本域（也可以叫多行文本框），主要用于输入大批量的文本内容。
常用属性：name/id/cols(列数)/rows(行数)/placeholder/minlength/maxlength/required(必须输入)/value
select类
下拉列表框，默认用于单项选择。用option呈现每个选项。
multiple属性：表示可以多选，这时的下拉列表框变成了列表框
size:最多显示的行数
button类
普通按钮，具有提交功能。可以单独使用，不写在form元素中；如果写在form中，有提交功能。

2.4 iframe 框架标签

实例：

<iframe src="http://www.baidu.com" 规定在框架中显示的文档的 URL。
name="baiduIframe"
width="1200"
height="500"
frameborder="3" 设置框架边框
scrolling="yes"> 设置滚动条
</iframe>

##　3.1 CSS 介绍
层叠样式表（CSS），又称串样式列表，由W3C定义和维护的标准，一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言。让结构(HTML)与表现（CSS）分离，方便维护。

3.1.2 基本语法

CSS语法有三个部分组成：选择器、属性、属性值。

selector { property: value }

selector 选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性（property）和一个属性值（value）组成。属性（property）是希望设置的样式属性（style attribute）。每个属性有一个属性值（value）。属性和属性值被冒号分开。

3.1.3 CSS引用方式

行间样式：直接在标签上书写样式。
内部样式：在文件的内部书写样式。

    <style type="text/css">
        样式内容
    </style>

外部样式：（1）先创建一个CSS文件；（2）再用link标签引入这个文件。
导入外部样式：（1）先创建一个CSS文件；（2）在style标签中用import导入这个样式文件。

以上四种CSS引用方式的区别：
行间样式只作用于当前标签；而内部样式作用于当前文件；外部样式可以被多个HTML文件引用。
在实际项目开发中，最好使用外部样式。

3.1.4 CSS选择器

分类：
1）通配符选择器：匹配html中所有元素（注意：*的性能差，因为它要匹配所有元素，所以在开发时，不建议使用）
2）标签选择器：用来匹配对应的标签
3）类选择器：用来选择class命名的标签
4）ID选择器：用来选择用id命名的标签
5）派出选择器：根据上下文来确定选择的标签
6）伪类选择器
7）伪元素选择器

*{color: red; }
p { color: red; }
.red { color: red; }
#red { color: red; }

3.1.5 选择器分组

让多个选择器（元素）具有相同的样式，一般用于设置公共样式。

h1, h2, h3, h4, h5, h6 { font-size: 12px; }

3.1.6 选择器继承

子元素可以继承父元素的样式，反之不可以。

3.1.7 优先级

（外部样式）<（内部样式）<（内联样式）

优先权值：
!important，加在样式属性值后，权重值为 10000。
内联样式，如：style=””，权重值为1000。
ID选择器，如：#content，权重值为100。
类、伪类，如：.content、:hover 权重值为10。
标签选择器，如：div、p 权重值为1。

CSS 优先级法则：
选择器都有一个权值，权值越大越优先。
当权值相等时，后出现的样式表设置要优于先出现的样式表设置。
创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式。
继承的CSS 样式不如后来指定的CSS 样式。
在同一组属性设置中标有“!important”规则的优先级最大。

实例：
<style type="text/css">
#content div.main_content h2{
color:red;
}
#content .main_content h2{
color:blue;
}
</style>

......

<div id="content">
<div class="main_content">
52
<h2>这是一个h2标题</h2>
</div>
</div>

<!--
第一条样式的权重计算： 100+1+10+1，结果为112；
第二条样式的权重计算： 100+10+1，结果为111；
h2标题的最终颜色为red
-->

3.2 CSS 字体

font复合属性：
font: font-style font-variant font-weight font-size/line-height font-family;

注意：
1）属性值的位置顺序
2）除了font-size和font-family之外，其它任何一个属性值都可以省略
3）font-variant：normal/small-caps（让大写字母变得小一些）

3.3 CSS 背景

background:设置背景的复合写法
background: color image repeat attachment position

实例：body { background: #fff url('../images/pic.png') no-repeat fixed center center }

##　3.4 CSS 伪类选择器

伪类：专门用来表示元素的一种特殊状态。

常用伪类选择器：
1)a标签的伪类：
:link/:visited/:hover/:active
2):focus 获得焦点
3):first-child/:last-child/:nth-child(number)

a:link { color: green; } /*link:未访问的链接*/
a:visited { color: blue; } /*visited：已访问的链接*/
a:hover { color: red; } /*hover:当鼠标移动到链接上，则改变成红色*/
a:active { color: yellow; } /*active:当你鼠标选定该元素，则改变成黄色*/

3.5 CSS 属性和关系选择器

3.5.1 属性选择器

属性选择器可以根据元素的属性及属性值来选择元素。

注意格式：选择器［选择的属性　符号　值］｛更改的属性：值｝

[属性名]:包含有指定属性名的元素（常用）
[属性名=值]:属性名的值为指定值的元素（常用）
[属性名~=值]:属性名的值包含指定值的元素
[属性名^=值]:属性名的值以指定值的开头的元素
[属性名$=值]:属性名的值以指定值的结尾的元素

实例:
<input type='text' class='input warning' />
<style>
input[class~='warning'] { background: red; }
</style>

3.5.2 关系选择器

关系选择器可以根据元素与元素之间所处关系来选择元素。

注意格式：选择器一　符号　选择器二　｛更改的属性：值｝

1)空格：后代选择器，不论后代有多深
2)>：只选择儿子元素
3)+：兄弟选择

实例：
<h1> <strong> 显示红色字 </strong><strong> 不显示红色字 </strong> </h1>
<style>
h1>strong { color: red; }
</style>

3.6. CSS 伪元素

伪元素：用于向某些选择器设置特殊效果。

:before/:after/:first-letter/:first-line : 前面可以是1个冒号也可以是双冒号
::selection/::placeholder/::backdrop : 前面只能是双冒号

实例：
<p> hello first-letter </p>
<style>
p:first-letter { color:red; font-size:30px; }
</style>

1）CSS伪元素与伪类区别：
css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分。

伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。
它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。

伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一些文本，
并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

2）伪元素&伪类的特点：
伪元素和伪类都不会出现在源文档或者文档树中
伪类允许出现在选择器的任何位置，而一个伪元素只能跟在选择器的最后一个简单选择器后面
伪元素名和伪类名都是大小写不敏感的
有些伪类是互斥的，而其它的可以同时用在一个元素上。（在规则冲突的情况下，常规层叠顺序决定结果）

4.1 CSS 浮动介绍

浮动就是让块级标签不独占一行。目的（使用场景）：把块级标签元素可以排在一行上。原理就是让元素脱离文档流，不占用标准流。

属性：
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。

4.2 CSS 清除浮动

目的：让后面的元素自动掉到下一行。

方法：在要清除浮动的父级添加样式：overflow:hidden; 超出部分隐藏，也可以用来实现清除浮动。

<div class='parents' style='overflow:hidden;'><div>

属性值：
visible ：默认值。内容不会被修剪，会呈现在元素框之外，不剪切也不添加滚动条。
auto ：不显示超出内容，不剪切，会按照内容是否超出，自动添加，可用作清除浮动。
hidden ：内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。
scroll ：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
在这里插入图片描述

4.3.CSS 盒子模型

每个元素都是一个盒子，一个盒子由margin（外边距），border（边框线）,padding（内边距）和content（内容）组成。区别外边距和内边距是以边框为参照。系统默认外边距为8px。

IE的盒子中的content又由padding和content组成。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RomFQBgu-1611675477453)(D:\QQdoc\Markdown\image-20210126182106981.png)]

1）外边距(margin)：指元素边框线之外的距离。接受任何长度单位、百分数值甚至负值。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OexMMp8z-1611675477454)(D:\QQdoc\Markdown\image-20210126203538604.png)]

margin 外边距简写：
{a} ：只有一个值的时候，为上下左右外边距都为a值。
{a b} : 只有两个值的时候为上下外边距为a值左右外边距为b值。
{a b c} : 只有三个值的时候为上外边距为a值左右外边距为b值下外边距为c值。
{a b c d} ：只有四个值时候为上外边距为a值右外边距为b值下外边距为c值左外边距为d值（口诀：顺时
针，上右下左）。

示例：
.wrapper { margin-top:10px; margin-bottom:20px; margin-left:30px; margin-right:40px; }
/* 等同于 */
.wrapper { margin: 10px 40px 20px 30px; }

在这里插入图片描述
2）内边距（padding）：指元素的文本内容与边框之间的距离。
它的用法与margin完全一样。

在这里插入图片描述

3）边框(border)
复合写法（简写）：
border:border-width border-style border-color;
注意：border-width border-style border-color这三个参数没有位置之分。

.wrapper { border-width: 1px; border-style: solid; border-color: red; }
/* 等同于 */
.wrapper { border: 1px solid red; }

盒子的真实尺寸
盒子宽度 = width + padding左右 + border左右
盒子高度 = height + padding上下 + border上下

display属性：用来设置元素的显示方式。
属性值：
none:不显示元素
block:块显示，在元素前后设置换行符。目的：将行级标签转换为块级标签（因为行级标签不识别宽高，
而块级标签识别，转换后，行级标签也可以设置宽高了）
inline:行内显示，将块级标签转换为行级标签。
inline-block;将块级或行级标签转换为行内块级标签。

4.4 CSS table样式

table样式
table一般不用来布局，主要用来格式化数据。
属性：
width:宽度
height:高度
border-collapse:collapse; 单线边框
border:边框线

td,tr属性：
width:宽度
height:高度
border:边框线
text-align:文本左右对齐(left(默认)/center/right)
block:块显示，在元素前后设置换行符。目的：将行级标签转换为块级标签（因为行级标签不识别宽高，
而块级标签识别，转换后，行级标签也可以设置宽高了）
inline:行内显示，将块级标签转换为行级标签。
inline-block;将块级或行级标签转换为行内块级标签。