html-notebook

发表于 |

##笔记：HTML&CSS基础##

七月的时候跟着@陈斌儿童编程和机器人的程序媛计划开始学习编程，在这之前是一个学会计的没有梦想的咸鱼，真的很幸运当初报名了这个计划，感谢斌叔可以说是无私的付出了！coding is interesting！

我的学习资源：

  1. 程序媛计划的课程：https://www.cxy61.com/girl/app/home/home.html
  2. 《HTML&CSS设计与构建网站》google drive分享链接：https://drive.google.com/open?id=0Bzo_0SqaeHqcWFpPWW80R0VSdk0
  3. FreeCodeCamp的教程：https://www.freecodecamp.org/
不是教程是笔记，不太有逻辑性，我觉得简单的懒就不记了

HTML是啥

HTML是一种超文本标记语言，它不是一种编程语言，而是一种标记语言，用来描述网页。我们用HTML配合CSS即javascript等其他语言配合写出的html文档被web浏览器读取出来就是网页。HTML包含标签和纯文本，可以看作是网页中的静态部分。

用什么写HTML？

任何文本编辑器都可以写Html，我用了sublime，属于代码编辑器，后面写css和javascript也可以直接用它，好使！ 戳这里直接下载

打开sublime并将文件后缀名改为.html保存就生成了网页，打开该文档就可以看到你写的html变成网页的样子

属性

  1. 全局属性

    Class 类同一元素添加多个类，中间空格

    id 就id呗

    style 行内样式

    contenteditable: true/ false 可否编辑

    draggable: true/false/auto 可否拽动

    title=“ ” 额外信息，鼠标悬停显示

    type 类型 例如=“placeholder”占位符

  2. 事件属性

    鼠标：onclick ondbclick

常用标签

  1. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!DOCTYPE html>
    <html>
    	<head> //头部
    		<meta charset="UTF-8"> //中文可编译
    		<style></style> //css层叠样式表
    		<script></script> //js
    	<head>
    	<body>
    	   //内容
    	</body>
    </html>

    ​

  2. 标题 heading，h1字体最大，依次减小

    1
    2
    <h1>heading1</h1>
    <h2>heading2</h2>

    heading1

    heading2

  3. <hr/>分割线

    <p> </p>段落正文

    <i> </i>斜体 <b> </b>粗体

    <sup> </sup> 上标 <sub> </sub>下标

    举例：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset="utf-8"> 
    </head> 
    <body>
    	<h1>example</h1>
    	<p>正常<b>粗体</b><i>斜体</i><sup>上标</sup></p>
    	<br/>
    </body>
    </html>

  4. <img src="url">图片

  5. <a href="url" target="-blank">text</a>链接

    属性target打开目标 -blank为在新窗口打开

    url可以写#id，链接到页面中的对应id元素

  6. <div> </div>分块

  7. 表单 <form></form>

    action=”url” 接受的url

    单行文本框／密码／单选按钮／复选按钮<input type="text/password/radio/checkbox"> </input>

  8. ​

html好简单啊

我不想写了……感觉都不用整理啊这些，我记一点我觉得难的好了

CSS的使用

  1. 使用外部css：写好单独的css文件后，在内加入，好处是一个文件可以直接引用到多个html文件一起用
  2. 在内部，内联表，使用css选择器，方便
  3. html标签内

CSS的属性们

常用
属性 属性值
color 1. 直接上名称：white/red/black/blue 2. rgba(0-255,0-255,0-255 ,0.0-1.0 )，前三个数对应r/g/b值越大越多，a是透明度 1.0完全透明 3. hex code：#123456 六个数字中每两位依次表示rgb值，十六进制（0-9 A-F），越大越多
background-color/image/repeat/attachment/position 颜色/图像：”url”/重复方式：repeat(水平垂直重复)repeat-x(水平重复)repeat-y(垂直重复)no-repeat(不重复)/滚动时图像的移动方式fixed scroll/对不重复的背景图像指定位置
height/width 高/宽。具体数值px
float 使普通流中的元素浮动——尽可能地靠左/右排列：left/right
clear 清除浮动，清除左/右/两边均不接触/均可接触元素：left/right/both/none
position static
文本
属性 属性值说明
font-size 值px／?%(设置了默认大小时可用百分比)／ ?em（？个m的宽度）
font-family serif衬线 sans-serif无衬线 monospace等宽
text-transform 大小写 uppercase大写 lowercase小写 capitalize首字母大写
text-align 对齐方式：center/left/right/justify
line-height 行间距： 一般是1.4～1.5em
text-decoration underline下划线 overline顶部线 line-through穿过文字
Text-text-shadow 文本投影 ?px(左)?px(上下)?(模糊度)#232673 (颜色)
div盒子
属性 属性值
min/max-width/height 宽高限制
border-width/style/color style: solid/dotted/dashed等
margin-top/right/bottom/left 外距离，简写时顺序 上右下左
border-radius 边框半径 变圆角
padding 内边距，用法同margin
display 块级元素与内联元素的转换：inline(块->内) block(内->块) none(隐藏) Inline-block(行内块级元素)
overflow 当内容溢出div时: hidden(隐藏), scroll(滚动)

CSS选择器

通用：

选择器 选择对象
*{ } 所有元素
h1{ } 所有
.note{ } class为note的所有元素
p.note{ } class为note的所有

元素
#intro{ } id为intro 的元素
li>a{ } 所有父元素为
  • 的元素
    		•
    p a{ } 所有位于

    中的 元素
    h1+p{ } 位于

    后的第一个

    元素

    css样式冲突时的优先顺序原则：

    1. 内联表中，对于两个相同的选择器，后面的优先
    2. 更具体的更优先，例如h1优先于*； p.note 优先于.note
    3. 重要性： 将 !important 添加到属性值中，优先级最高
    伪元素／伪类

    状态类，元素处于某个状态时的样式，响应用户

    效果
    :hover { } 光标悬停
    :active { } 被激活的元素
    :focus { } 被选中的元素
    :first-letter { } 元素的第一个字母
    :first-child { } 元素的第一个字元素
    :link { } 未被访问的链接
    :visited { } 已被访问的链接

    ……

    to be updated