DW学习笔记

最新推荐文章于 2023-07-21 09:37:14 发布
最新推荐文章于 2023-07-21 09:37:14 发布
阅读量2.9k 收藏 29
点赞数 1
分类专栏： DW学习笔记 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SBYWisdon/article/details/109322043
版权

HTML5学习笔记

一.HTML5基础

（一）.HTML5基础文本标签

1.标题标签<h1>——<h6>

<h1>标题1</h1>  #1通常用于主标题 字号逐级变小 它是块元素会自动换行
<h2>标题1</h2>
<h3>标题1</h3>
<h4>标题1</h4>
<h5>标题1</h5>
<h6>标题1</h6>

2.段落标签<p></p> 通常用于一个段落 它是块元素 会自动换行 并且存在一定的上边距属性
3.换行标签<br> 这是一个单标签 用在一个段落中换行，另起一行 要注意的是不能用<br> 标签占位
4.<span></span> 是一个没有任何语义的双标签通常使用class样式为其附加语义
5.超链接<a href="路径"></a>
6.图片标签

<img src="路径" alt="图片的替换文本"/>

7.视频标签<video src="路径" controls>video</video>

（二）.HTML5元素及标签

1.结构标签

  • <section></section> 页面中的一个内容区块 效果等同与html4中的<div></div>但它的语义更明确
  • article标签 页面中的核心内容
    2.标签兼容 ie9 以下的浏览器
  • 通过网址 http://html5shim.googlecode.com/svn/trunk/html5.js 加载到本地或直接使用该地址
  • 代码 放到head部分
<!--[if lt IE 9]>
 <scr ipt scr="js/html5shiv.js"></scr ipt>
 <![endif]-->

CSS3基础

(一).盒子模型

1.盒子的内容 content 高度height 宽度width
2.盒子的边框 border 它包括 边框的宽度 边框显示方式 边框的颜色
如：border: 2px solid() #000
实线：solid()
虚线：dashed()
3.内边距padding 边框到内容的距离
4.外边距wargin 边框与其它边框的距离
5.盒子居中 margin: 0 auto
6.padding有外扩属性 设置padding 的值 减去盒子本身的width 或height
7.盒子占有的宽度：内容的width+padding+border+margin的总和

(二).块元素和行内元素

1.块元素的特点：
(1).独占一行（该元素前后的其它内容都要换行）
（2）.直接适用盒模型的所有CSS属性
2.行内元素的特点
（1).不独占一行,多个行间元素可以在一行中呈现
（2）.部分适用Css盒模型属性，如宽度高度由内容的多少决定，直接设置无效，上下边距设置无效
3.常见的块元素

标签说明
<div>一个层，盒子
<header><section><footer><aside><article>等网页布局类标签
|<h1>-<h6>标题

段落
<ul><ol><dl><li>等列表类标签
<form>表单

4.元素间的转换display 属性

值作用
block转换为块元素
inline转换为行内元素
inline-block转换为行内元素，不换行且能拥有盒模型属性
none元素在页面中不显示

总结这两种元素的用法：
1.块元素体现的是大，大块的内容，大块的结构，行类元素体现的是小的地方
2.块元素可以嵌套块元素，也可以嵌套行内元素，因为他很大
3.行类元素只能嵌套行元素
4.块元素本身就拥有盒子的所有特征，而行内元素则需要用display属性来进行转换才拥有盒子的特征

(三).CSS的引用

css即层叠样式表：设置网页中标签（文字大小，颜色，行高，背景）的样式。
层叠：当在HTML文件中引用多个样式文件时，浏览器将依据层叠顺序及就近原则进行处理。
1.内联样式：把元素的样式设置直接写在网页主体内部。
语法：
<标签 style=“属性：属性值”></标签>
2.嵌入样式：对网页中元素的样式设置直接写在网页头部，放在<head></head>里,用<style></style>标签对 进行声明。
格式：

<head>
	<style>
	 p{color:red;}
	 </style>
</head>

这种方法只对单个网页有效
3.外部链接样式：
将外部独立的样式表文件引入到THTML文件种,样式表文件就是CSS文件，扩展名为.css
格式：

<head>
	<link rel="stylesheet"  type="text/css"  href="CSS文件路径"  >
</head>

rel=“stylesheet”:声明在HTML文件中使用外部样式表。
type=“text/css”:指明该文件的类型是样式表文件。

小阿撸
关注
专栏目录
DW前端代码汇总
HCTLTCT的博客
04-29 1万+
DW前端代码汇总 ==============================前端代码============================ ------------------------------------*标签*--------------------------------- <button></button>--按钮标签 <ul></ul>---段落标签 <u></u>--下划线 <link r...
整理了一些上课学dw的笔记
meng鱼的博客
04-17 3081
整理了一下上课学dw的资料 第一章：网页概述 怎样查看网页的源代码： 在网页的空白处右击，选择查看源代码，就可以看到网页的HTML代码文件，若 表示是用HTMLS版本开发的网站。 网页的相关概念： IP地址是：主机 66.124.34.56 0-255之间 域名：对应IP地址的 www.sdcit.cn URL：网页的地址 http://www.sdcit.cn/xyzx/jindex....
第二讲、盒子模型（01）
wx112728的博客
03-11 721
一、盒子模型的大小 1.width和height width 盒子模型的宽度 height 盒子模型的高度 注意：width和height 只定义盒子的大小，不包含边框和边距 如果内容太多，超过了width和height，则默认情况下将忽略width和height的设置 二、盒子模型的边框 1.边框的三大方面 border-width border-color border-style 边框的宽度 边框的颜色 ...
CSS盒模型概述
weixin_55035214的博客
05-08 262
1. CSS盒模型概述：CSS盒模型(Box Model)规定了元素处理元素内容（content）、内边距（padding）、边框（border）、外边距（margin）的方式。 下图为盒模型模型图。 2.当盒模型各部分说明： 1、content（内容）：盒子的内容，显示文本和图像。 2、padding（内边距）：内容区与边框之间的填充部分，内边距是透明的。 3、margin（外边距）：盒子与邻元素的间距，外边距是透明的。 4、border（边框）：盒子的边框，可以设置边框的宽...
html5 article aside,DW响应式article aside 的用法
weixin_42470300的博客
06-21 326
1.本节课作业内容【如图所示】。2.本节课主要讲解内容【如图所示】。3.在导航栏位置添加一个向下的边距，让导航和下面的内容之间有一个距离【如图所示】。4.在【HTML5】编辑页面创建一个【article】内容板块【如图所示】。5.然后在【CSS】编辑页面调整它的大小、颜色和边距【如图所示】。6.在【HTML】编辑页面添加文字内容和图片，注意文字的大小和颜色是不一样的，注意调整各版块之间的上下左右边...
DW的知识点
dsfgdsgcsgcq的博客
10-11 2232
1、盒模型 内容区、内边距（内填充）、边框、外边距 2、行内元素&块级元素 （1）行内元素与块级元素直观上的区别。 行内元素会在一条直线上排列，都是同一行的，水平方向排列。 块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。 （2）块级元素可以包含行内元素和块级元素。行内元素只能包含其他行内元素和文本。 （3）行内元素与块级元素属性的不同，主要是盒模型属性上。 行内元素设置width无效，height无效(可以设...
2.9-CSS基础--盒子模型（上）
我的成长历程
07-26 544
盒子内容区域、内边距区、边框区、外边距区
《DW学习笔记》 模块一 ：初识网页设计
小陈的博客
03-23 3595
模块一 ：初识网页设计 任务1：网页设计相关概念 一、网页与网站 什么是网页 （web page）？ 网站中的一页，一个网站中的网页通过“超链接”的方式被组织在一起。 什么是网站（web site）？ 互联网上用于展示特定内容的相关网页的集合。 二、网页的构成元素 1、构成网页的元素，主要包括：文字、图像、音频视频、动画、样式、各类脚本等 （1）文字 文字是网页最基本的组成元素之一。文字在网页中的表现形式主要涉及到字体、字号和编码。 （2）图像 图像也是网页中最常见的元素之一，比文字的效果形象、生动。常
《DW学习笔记》 模块二：HTML基础
小陈的博客
03-23 3456
模块二：HTML基础 文章目录模块二：HTML基础任务1：HTML文档的基本结构和基本语法一、HTML简介1、HTML概念2、HTML功能二、HTML文档的基本结构三、文字版面编辑的标签1、META标签2、HTML body标签3、段落标签``（1）格式（2）属性说明（3）例如输出结果为4、换行标签``例如输出结果为5、预定义标签``例如输出结果为6、分隔标签``（1）概念（2）作用（3）可选属性7、列表标签（1）项目列表和编号（2）例如输出结果为（3）有序列表``常用的type属性（4）无序列表``常用
DW学习笔记2：HTMLframe练习
程序化人生的随机事件
12-30 621
了解了框架的基本知识，主要学习了框架的嵌套，框架还是很有用的，但是具体站内跳转可能还要PHP的支持。 不得不说一句，能自己查看自己博文的源代码这个设计用起来心里真舒服~ HTMLframetest 标记必须紧跟标记之后，也就是说一个HTML文件中如果包含框架组合的话，其说明的位置必须在HTML文件的头部说明之后，而且必须在标记之前--> ">
DW2024夏令营笔记合集
最新发布
08-08
DW2024夏令营笔记合集
HTML基础标签:标题段落空格链接图像强调
深蓝旭的博客
07-24 349
HTML 标题 HTML标题（Heading）是通过<h1>-<h6>标签来定义的.h是英文header标题的缩写，标题无处不在，它的应用范围十分广泛：网站结构、写作文、PPT等。这里有六个标题元素标签——<h1>、<h2>、<h3>、<h4>、<h5>、<h6>，每个元素代表文档中不同级别的内容：<h1>表示主标题（themainheading），<h2>表示二级子标题...
2021-07-17 盒子模型~内容、外边距、内边距、边框
前端卡卡西的博客
07-17 688
当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸…）。 每个盒子由四个部分：边距（margin），边框（border），填充（padding），和实际内容（content） 我们可以通过浏览器的开发者工具观察页面的元素，会发现每个元素都是一个盒子： 1.内容content 概念：由内容边界限制，容纳着元素的
盒子模型与浮动
Love_Roro的博客
09-15 1186
盒子模型（CSS重点） 盒子模型(Box Model) 盒子模型有元素的内容、边框(border)、内边距(padding)、和外边距(margin）组成。 盒子里面的文字和图片等元素是内容区域 盒子的厚度我们成为盒子的边框 盒子内容与边框的距离是内边距（类似单元格的cellpadding) 盒子与盒子之间的距离是外边距（类似单元格的cellspacing) 标准盒子模型 盒子边框(border) 语法： border : border-width ll border-style ll border-c
盒子模型——圆角边框border-radius制作图形
luckyGirlIT的博客
07-08 1405
border-radius:左上、右上、右下、左下 .d1{ width:200px; height:200px; border:1px solid green; margin:249px auto; border-radius:100px; background-color:yellow; } .d2{ width:200px; height:100px; border:1px solid bl...
＜section＞和＜div＞的区别是什么？底层原理是什么？
长风破浪会有时的博客
07-21 1885
浏览器会理解它作为一个具有语义化含义的块级容器，并且在文档结构中有一定的重要性。标签有助于更好地表示文档的结构和内容组织，对于搜索引擎和辅助技术（如屏幕阅读器）来说也更有意义。是最常见的HTML容器标签，它没有特定的语义，仅用于将内容分组并应用样式。，浏览器会将其视为一个普通的块级容器，没有特定的样式或语义。它用于将文档内容分成不同的部分或章节，并且通常具有自己的标题。都是HTML标签，用于在HTML文档中组织和布局内容，但它们在语义和用法上有一些区别。可以用于任何目的，但缺乏语义化，不具有明确的含义。
html自动生成盒子,新建一个宽度450px 高度为100px的DIV盒子
weixin_30682905的博客
06-01 2149
新建一个宽度450px 高度为100px的DIV盒子实例，教程通过从新建html 新建CSS代码再到DIV代码再到实例浏览器测试学习。快捷建立一个标准的DIV盒子的HTML网页，DIVCSS5推荐使用DW软件进行建立，所以此实例DIVCSS5通过DW软件上快速完成这个案例例子。一、要用到的CSS属性与解释 - TOP1、width:450px 设置css宽度450px2、height:1...
盒子大小的计算，盒子类型的转换
weixin_43430676的博客
08-03 1010
盒子的组成=外边距+内边距+边框+内容区域 盒子分为两种类型,通过设置box-sizing:的值来设置盒子的类型 1.content-box 内容盒子(W3C盒子) 为内容盒子设置宽和高之后，内容区域的大小即为盒子的宽和高， 再添加内边距和外边距会使盒子的大小改变 宽度举例： width:100px; 内容区的宽度 盒子的宽度 = width +border-left+border-right+padding-left+padding-right
盒子模型的宽度计算问题, 有什么问题，及解决方案
热门推荐
ForestCat的专栏
09-16 1万+
盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是ie 盒子模型和标准 w3c 盒子模型。 标准W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。 从上图可以看到 IE 盒子模型的范围
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值