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 · 779 阅读 · 0 评论 -
《HTML+CSS视频》记录2 html的标准格式
HTML的注释方式：<!--这是一个注释 -->属性：可以通过属性来设置标签如何处理标签中的内容。可以在开始标签中添加属性，使用键值对。font标签可以设置字体格式颜色等等，但是在HTML5中不赞成使用，因为这属于表现的属性，建议用css。<font color="red">这是一些红色字体 </font>W3School 离线手册文档一个标签可以设置多个属性，属性之间需要使用空格隔开。1993年6月HTML第一个版本发布，由于HTML有众多版本，所原创 2020-12-13 11:21:34 · 236 阅读 · 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 · 158 阅读 · 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 · 224 阅读 · 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 · 178 阅读 · 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 · 192 阅读 · 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 · 474 阅读 · 1 评论 -
《HTML+CSS》视频9 盒子模型（重点）
盒子模型（框模型）css中每个元素都是一个盒子，一个盒子有以下几个部分：内容区（content）内边距（padding）边框（border）外边距（margin）内容区使用width来设置盒子内容区的宽度、height来设置盒子内容区的高度。边框为元素设置边框要为一个元素设置边框，必须指定三个样式border-width：边框宽度border-color：边框颜色border-style：边框样式大部分浏览器中，边框的宽度和颜色都有默认值，而边框的默认值为none，所以只原创 2020-12-20 17:27:24 · 239 阅读 · 0 评论 -
《HTML+CSS》视频10 内联元素、display、overflow、文档流、浮动（重点）
浏览器默认格式对某些元素会有一个margin或者padding，可以使用通配符全部清除。*{margin:0;padding:0;}原创 2020-12-21 22:20:27 · 151 阅读 · 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 · 306 阅读 · 0 评论 -
《HTML+CSS》视频12 高度塌陷
高度塌陷问题父元素的高度默认被子元素撑开，但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，将会导致父元素的高度塌陷。根据W3C标准，在页面中，元素都有一个隐含的属性叫做Block Formatting Context,简称BFC，该属性默认关闭，当开启后，元素将会有如下特性：父元素的垂直外边距将不会和子元素重叠，给子元素设置外边距时，外边距不会传递给父元素开启BFC的元素不会被浮动元素覆盖开启BFC的父元素可以包含浮动的子元素如何解决高度塌陷？如原创 2020-12-25 21:08:10 · 187 阅读 · 1 评论 -
《HTML+CSS》视频13 定位、层级、透明、背景
定位：将指定元素摆放到页面的任意位置。通过position属性来设置定位，可选值：static 默认值，元素不开启定位relative 开启相对定位absolute 开启绝对定位fixed 开启固定定位（绝对定位的一种）当开启了元素的定位（position不是默认值）时，可以通过left、right、top和bottom四个属性来设置元素定位位置的偏移量。position:relative;left:100px;相对定位相对于其原来位置进行偏移不会脱离文档流会使元素提升一个层原创 2020-12-26 10:09:44 · 374 阅读 · 0 评论 -
《HTML+CSS》视频14 雪碧图
CSS-Sprite在设置按钮的时候，可以给超链接设置伪类，然后分别给不同的伪类设置三个稍有差别的图片，实现点击按钮的交互动作。但是因为浏览器只有在使用到某个图片的时候才会加载图片，所以在hover和active的时候，会有白色的背景闪烁，用户体验差。为了解决上述问题，可以将三张图片整合到一张图片中，使用background-position来改变背景图片的显示部分，实现交互效果。这样减少了图片的总大小，并且解决了加载伪类图片的时候会闪烁的问题，这种整合图片就叫做CSS-Sprite，雪碧图。<原创 2020-12-26 15:44:21 · 394 阅读 · 0 评论 -
《HTML+CSS》视频15 表格、空表格隔开父子外边距、解决高度塌陷
在html中，使用table标签中来创建表格，在table标签中，使用tr来表示表格中的一行，在tr中使用td来创建一个单元格。原创 2020-12-26 20:14:53 · 345 阅读 · 3 评论