HTML+CSS
HTML学习记录
Han_python
一个机械工程师
展开
-
《尚硅谷Web前端初学者零基础入门HTML+CSS基础教程全套完整版》学习记录1
软件的架构 我们常用的软件架构是C/S架构,即客户端/服务器架构。这种架构有三个特点: 1:软件使用前必须得安装 2:软件更新时,服务器和客户端得同时更新 3:C/S架构的软件不能跨平台使用 4:C/S架构的软件客户端和服务器通信采用的是自有协议,相对来说比较安全。(协议相当于密码本,对传输内容进行加密) B/S架构(browsers/server)是指浏览器/服务器架构,本质上也是C/S,只不过B/S架构软件使用浏览器作为软件的客户端。通过使用浏览器访问网页的形式,来使用软件。 1:软件不需要安装 2:客原创 2020-12-12 21:09:28 · 640 阅读 · 0 评论 -
《HTML+CSS视频》记录2 html的标准格式
HTML的注释方式: <!--这是一个注释 --> 属性: 可以通过属性来设置标签如何处理标签中的内容。 可以在开始标签中添加属性,使用键值对。 font标签可以设置字体格式颜色等等,但是在HTML5中不赞成使用,因为这属于表现的属性,建议用css。 <font color="red">这是一些红色字体 </font> W3School 离线手册文档 一个标签可以设置多个属性,属性之间需要使用空格隔开。 1993年6月HTML第一个版本发布,由于HTML有众多版本,所原创 2020-12-13 11:21:34 · 129 阅读 · 1 评论 -
《HTML+CSS》记录3,常用标签
标题标签 在HTML中,一共有六级标题标签:h1~h6(head),使用HTML时,并不关心标签文字大小,显示效果统一由css来定义,使用HTML时,我们关心标签的语义,六级标题中,h1到h6重要性依次降低,对搜索引擎来说,h1的重要性仅次于title,搜索引擎检索完title,会立即查看h1中的内容。因此h1标签会影响页面在搜索引擎的排名,在页面中只能写一个h1。 一般页面中,标题标签只使用h1、h2、h3。 段落标签 段落标签标示内容中的一个自然段,使用p标签来表示(paragraph),p标签中的文字原创 2020-12-13 15:10:45 · 97 阅读 · 0 评论 -
《HTML+CSS》视频4:语法规范、超链接等
在HTML中: 1、区分大小写,我们一般都使用小写 2、注释不能嵌套 3、标签必须结构完整 4、在浏览器中F12打开开发者工具 5、标签可以嵌套,但是不能交叉嵌套 6、属性必须有值,且值必须加引号 内联框架: 使用iframe标签可以创建一个内联框架,内联框架中的内容不会被搜索引擎检索,所以不太推荐使用。iframe标签有src属性、width、height、name等属性。 <iframe src="demo2.html"> </iframe> 超链接 使用a标签来创建超链接,原创 2020-12-13 20:56:16 · 145 阅读 · 0 评论 -
《HTML+CSS》视频5 CSS入门
CSS: 层叠样式表(Cascading style sheets)可以用来为网页创建样式表,通过样式表可以对网页进行装饰。网页实际上是多层的。 1、可以把css样式编写到元素(标签)的style属性当中,不同属性值之间用分号隔开,最后用分号结束。font-size的单位为px像素,特别注意引号的位置,只需要加一个,把所有的键值对括起来。 <p style="color:red"> 这是一段话<p> 将样式直接卸载style属性中的成为内联样式,内联样式只对当前元素中的内容起作用,原创 2020-12-15 23:24:23 · 111 阅读 · 1 评论 -
《HTML+CSS》视频6 伪类、伪元素、选择器
伪类专门用来表示元素的一种特殊的状态,比如访问过得超链接和普通的超链接,比如获取焦点的文本框,当我们需要为处在这些特殊状态的元素设置样式时,就可以使用伪类选择器。 浏览器可以通过历史记录来判断一个链接是否访问过。 给超链接定义样式: a:link 正常链接 a:visited 访问过的链接(只能设置颜色) a:hover鼠标滑过的链接(这个很有用) a:active正在点击的链接 a:link{color: aqua;} hover和active也可以对其他标签使用。 其他的: :focus:获取焦点原创 2020-12-17 21:20:09 · 121 阅读 · 0 评论 -
《HTML+CSS》视频8 文本样式、段落样式等
文本格式化 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .box{ width:6.25rem; height: 6.25rem; background-color: gold; } .box2{ width:50%;原创 2020-12-20 14:17:48 · 352 阅读 · 1 评论 -
《HTML+CSS》视频9 盒子模型(重点)
盒子模型(框模型) css中每个元素都是一个盒子,一个盒子有以下几个部分: 内容区(content) 内边距(padding) 边框(border) 外边距(margin) 内容区 使用width来设置盒子内容区的宽度、height来设置盒子内容区的高度。 边框 为元素设置边框 要为一个元素设置边框,必须指定三个样式 border-width:边框宽度 border-color:边框颜色 border-style:边框样式 大部分浏览器中,边框的宽度和颜色都有默认值,而边框的默认值为none,所以只原创 2020-12-20 17:27:24 · 192 阅读 · 0 评论 -
《HTML+CSS》视频10 内联元素、display、overflow、文档流、浮动(重点)
浏览器默认格式对某些元素会有一个margin或者padding,可以使用通配符全部清除。 *{margin:0; padding:0;}原创 2020-12-21 22:20:27 · 97 阅读 · 0 评论 -
《HTML+CSS》视频11 简单布局、导航条
简单布局 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>my first web</title> <style type="text/css"> .head{ width:1000px; height:120px; background-color:#efa; margin:0 auto; }原创 2020-12-22 20:46:47 · 222 阅读 · 0 评论 -
《HTML+CSS》视频12 高度塌陷
高度塌陷问题 父元素的高度默认被子元素撑开,但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,将会导致父元素的高度塌陷。 根据W3C标准,在页面中,元素都有一个隐含的属性叫做Block Formatting Context,简称BFC,该属性默认关闭,当开启后,元素将会有如下特性: 父元素的垂直外边距将不会和子元素重叠,给子元素设置外边距时,外边距不会传递给父元素 开启BFC的元素不会被浮动元素覆盖 开启BFC的父元素可以包含浮动的子元素 如何解决高度塌陷? 如原创 2020-12-25 21:08:10 · 123 阅读 · 1 评论 -
《HTML+CSS》视频13 定位、层级、透明、背景
定位:将指定元素摆放到页面的任意位置。 通过position属性来设置定位,可选值: static 默认值,元素不开启定位 relative 开启相对定位 absolute 开启绝对定位 fixed 开启固定定位(绝对定位的一种) 当开启了元素的定位(position不是默认值)时,可以通过left、right、top和bottom四个属性来设置元素定位位置的偏移量。 position:relative; left:100px; 相对定位 相对于其原来位置进行偏移 不会脱离文档流 会使元素提升一个层原创 2020-12-26 10:09:44 · 267 阅读 · 0 评论 -
《HTML+CSS》视频14 雪碧图
CSS-Sprite 在设置按钮的时候,可以给超链接设置伪类,然后分别给不同的伪类设置三个稍有差别的图片,实现点击按钮的交互动作。 但是因为浏览器只有在使用到某个图片的时候才会加载图片,所以在hover和active的时候,会有白色的背景闪烁,用户体验差。 为了解决上述问题,可以将三张图片整合到一张图片中,使用background-position来改变背景图片的显示部分,实现交互效果。这样减少了图片的总大小,并且解决了加载伪类图片的时候会闪烁的问题,这种整合图片就叫做CSS-Sprite,雪碧图。 <原创 2020-12-26 15:44:21 · 289 阅读 · 0 评论 -
《HTML+CSS》视频15 表格、空表格隔开父子外边距、解决高度塌陷
在html中,使用table标签中来创建表格,在table标签中,使用tr来表示表格中的一行,在tr中使用td来创建一个单元格。原创 2020-12-26 20:14:53 · 262 阅读 · 3 评论