随笔分类 - 7-web前端
说明：本系列笔记为个人学习记录，学习课程为尚学堂系列课程。https://www.bilibili.com/video/BV1oz421q7BB?spm_id_from=333.788.videopod.episodes&vd_source=a8188b9378385ae3de36009c7a1ed1a5&p=58，
摘要：一、定义 position属性指定了元素的定位类型。 其中，绝对定位和固定定位会脱离文档流. 设置定位之后:可以使用四个方向值进行调整位置:Ieft、top、right、bottom. 二、相对定位 <head> <meta charset="UTF-8"> <meta name="viewport
阅读全文
摘要：1.浮动的定义 通过float属性定义元素在哪个方向浮动，任何元素都可以浮动。 需要的时候才用。 只有两个方向： left 元素向左浮动 right 元素向右浮动 2.浮动的原理 浮动以后使元素脱离了文档流。 只有左右浮动，没有上下浮动。 脱离文档流之后，元素相当于在页面上面增加一个浮层来放置内容。
阅读全文
摘要：一、定义 弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 二、CSS3弹性盒内容 弹性盒子由弹性容器(
阅读全文
摘要：一、概念 所有HTML元素可以看作盒子，在CSS中，"box model”这一术语是用来设计和布局时使用 CSS盒模型本质上是一个盒子，封装周围的HTML元素， 它包括:外边距(margin)，边框(border)，内边距(padding)，和实际内容(content)。 1.margin marg
阅读全文
摘要：一、关系选择器分类 后代选择器 子代选择器 相邻兄弟选择器 通用兄弟选择器 1.1 后代选择器（E F{ }） ol标签下的所有li标签 <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
阅读全文
摘要：1. 表格边框（border属性） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"
阅读全文
摘要：1. text-align 指定元素文本的水平对齐方式。 默认left; center right 2. text-decoration 添加到文本的修饰，下划线、删除线等。 text-decoration: underline; 定义下划线。 text-decoration: line-throu
阅读全文
摘要：一、CSS常见的背景属性 background-color: aqua; 设置背景颜色 background-image: none; 设置背景图片 background-position: 0%; 设置背景图片位置 background-repeat: no-repeat; 设置背景图片如何重复填
阅读全文
摘要：一、color 四种方式： color: aquamarine; color: #ff0000; color: rgb(255, 0, 0); color: rgba(255, 0, 0, 0.5); #最后一个代表透明度 二、font-size font-size: 45px; 注：px可写可不写
阅读全文
摘要：一、全局选择器(*) 可以与任何元素匹配，优先级最低，一般做样式的初始化。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width
阅读全文
摘要：一、CSS 1.1概念 CSS(Cascading Style Sheets)层叠样式表，又叫级联样式表，简称样式表。 CSS文件后缀名为 .css。 CSS用于HTML文档中元素样式的定义。 1.2 作用 使用css的目的就是让网页具有美观一致的页面。 1.3 语法 CSS 规则由两个主要的部分构
阅读全文
摘要：一、HTML5和HTML HTML5是 HTML 最新的修订版本，2014年10月由万维网联盟(W3C)完成标准制定。 在 HTML5出现之前，我们一般采用 DIV+CSS 布局我们的页面。但是这样的布局方式不仅使我们的文档结构不够清浙，而且不利于搜索引擎爬虫对我们页面的爬取。为了解决上述缺点，HT
阅读全文
摘要：一、元素分类 HTML5出现之前，经常把元素按照块级元素和内联元素来区分。 在HTML5中，元素不再按照这种方式来区分，而是按照内容模型来区分，分为元数据型(meladataconient)、区块型(sectioningcontent)、标题型(heading content)、文档流型(fow c
阅读全文
摘要：一、表单 表单在 Web 网页中用来给用户填写信息，从而能采用户信息，使网页具有交互的功能。 所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。 表单是由容器和控件组成的,一个表单一般应该包含用户填写信息的输入框,提交按钮等，这些输入框,按钮叫做控件,表单就是容器,它能够容纳各种各样的控件。
阅读全文
摘要：一、表格标签构成 表格：<table></table> 行：<tr></tr> 单元格（列）：<td></td> <body> <table border="1" width="400px" height="200px"> <tr> <td>1</td> <td>2</td> <td>3</td>
阅读全文
摘要：一、列表标签——有序列表（ol+li） 所谓有序列表，是指按照数字或字母顺序排列列表项目。 有序列表始于<ol>标签, 每个列表项始于<li>标签. 1.1 代码示例 <body> <h1 align="center">我的第一个网页</h1> <h2>照片</h2> <p>衡阳旅游</p> <im
阅读全文
摘要：一、概念 用于包裹:词汇、短语等。 通常写在排版标签里面。 排版标签更宏观(大段的文字)，文本标签更微观(词汇、短语)。 文本标签通常都是行内元素。 二、常用的文本标签（双标签） 三、不常用的文本标签（双标签）
阅读全文
摘要：一、超链接描述<a></a> HTML使用标签<a>来设置超文本链接. 超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。 输入a,回车，就出现： <a href=""></a> 1.超链接属性 href=" " 描述链接的地址。
阅读全文
摘要：引言 图片是网站中最多的元素。 一、图片标签<img>（单标签） 1. 输入img,回车，就会显示 <img src="" alt=""> 2.代码示例 <body> <h1 align="center">我的第一个网页</h1> <h2>照片</h2> <p>衡阳旅游</p> <img src="
阅读全文
摘要：主要内容： 段落 p 换行 br 水平线 hr 一、段落标签<p></p> 1.快速打出<p></p>： 输入“p”,Tab键。 2.代码示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vie
阅读全文
