Head First HTML 与 CSS 笔记

HTML

标签

列表

列表元素用 li 标签,在所有 li 标签外加上 ol 以表示有序列表,或 ul 以表示无序列表。若使用 dl 以表示列表,则使用 dt 标签以规定每一项的定义术语,使用 dd 标签以定义每一项的定义描述。

  • 列表可以使用 list-style-type 指定每一项前面的符号,有disc circle square none,或者也可以使用 list-style-image 指定图像,对于有序列表,可以用指定十进制数decimal,小写字母lower-alpha,大写字母upper-alpha,大写罗马数字upper-roman,小写罗马数字lower-roman
  • 可以使用 list-style-position 指定标记是否在列表项的盒子里,如果是的话,文本换行就在标记下面,否则在右边。属性有 inside outside ,指定的是标记的位置,而非文字的位置。

引用

q 标签用于短引用,blockquote 标签用于段落引用。有利于在 CSS 中指定样式。

表单

  • form 标签包围整个表单部分,里面可以添加表单以及其它的标签例如 p,例如 <form action="xxx.php" method="POST"></form> 其中 action 属性表示用于处理表单的脚本,method 表示传输方式。(20210319注:在此 div 加入 text-align 属性以居中表单中内容,因为表单中元素非块级元素)
  • 传输方式有两种,一种是 POST 一种是 GET,第一种传输大小上限高,可以传输文件,传输完成后的页面地址中不包含传输内容,例如各大网站的登陆界面的传输方式,这种传输在不使用 cookies 时,得到的页面无法收藏,第二种传输大小上限低,无法传输文件,传输完成后页面地址会写出传输内容,例子没找到,得到的页面可以收藏。
  • 各种控件
    • 文本输入,使用方式如 <input type="text" name="example"> ,是一个 void 元素
    • 提交输入,使用方式如 <input type="submit>" ,可以创造一个提交按钮,按钮的名字可以用 value 属性确定
    • 单选钮输入,使用方式如 <input type="radio" name="exmaple" value="e1"> <input type="radio" name="example" value="e2"> ,注意 name 必须相同, value 表示各个选项最后返回的值
    • 复选框输入,使用方式如 <input type="checkbox" name="example" value="e1"> <input type="checkbox" name="example" value="e2"> ,相关的 checkbox 也共用一个 name
    • 文本区,使用方式如 <textarea name="example" rows="10" cols="48"></textarea> 注意不是 void 元素,另外 name 唯一,row 与 col 可以限制文本去高度宽度
    • 菜单 ,需要使用 <select><option> 两个标签,selectoption 包围,分别用法为 <select name="example>" <option value="e1">e1</option> <option value="e2">e2</option>,注意都不是 void 元素
    • 文件, <input type="file" name="example">
    • 多选菜单,在菜单的 select 中加入布尔属性 multiple
    • input 中的 type 可以修改为 number range color date email tel url 等,都可以创建便捷的输入方式
  • 对于 input 可以使用 maxlength 限制输入长度,对于 textarea 则不行。
  • 对于 <input type="number" ...> 可以使用 minmax 属性限制。
  • 设置 name 时,若变量包含多个值,可以加入 [] 给 php 提示。
  • 使用 placeholder 属性可以设置 input 的默认文字
  • 使用 required 布尔属性可以设置某一项必选

布局相关

冻结布局

冻结布局:用一个 <div> 把所有内容框起来后,再固定一个 width ,最后流入页面时就不会根据浏览器宽度缩放,因为指定的 width 不可改变。

凝胶

把左右外边距(margin)设置为 auto ,最后 <div> 中的元素就会居中。

其余标签

video

<video> 具有的属性
controls 布尔属性,写上代表使用,决定播放视频时有无操作栏
autoplay 布尔属性,决定是否打开页面就播放
poster="x.png" 放视频前的图片
loop 布尔属性,循环
src 视频地址
preload 有: none 不提前加载, metadata 下载视频元数据不下载内容, auto 自动几个选项
width height

  • 可以在 video 标签中删除 src ,然后在内容中添加不同格式的支持例如
<video controls autoplay width="512" height="288">
    <source src="xxx.mp4">
    <source src="xxx.webm">
    <source src="xxx.ogv">
    <object>...</object> /* 可以插入 Flash 视频 */
    <p>
        Failed.
    </p>
</video>

此外,可以更加详细的描述信息以供浏览器选择

<source src="xxx.ogv" type='video/ogg; codecs="theora, vorbis"'>
/* type 是可选属性,后接视频文件的 MIME 类型, codecs 后分别接视频编解码器与音频编解码器 */
/* 不知道 codecs 参数的话可以省略,只保留 MIME */

table

  • <table> 包含整个
  • <tr> 包含一行
  • <th> 包含表头
  • <td> 包含每一块
  • <caption> 表示标题,可以使用 caption-side 指定位置,例如 bottom 指定为下方
  • 层级关系为 table caption,tr th, td
  • 每一格有内边距与边框,但是没有外边距,只能定义整体的 border-spacing 例如 border-spacing: 10px 30px
  • 可以使用 border-collapse: collapse 折叠所有边框
  • td 标签中指定 rowspan="2" 可以使得该块跨两行,在下一行删除对应元素即可。同理还有 colspan

细节

  • 转义字符:& + ... + ;,对应例如 < 可以替换 ...lt> 可以替换为 gt& 可以替换为 amp
  • <a target="_blank" rel="noopener"> 可以指定在新标签页打开。
  • 使用 <!doctype html> 来指定文档标准
  • 指定字符编码的 <meta> 应当放在 <head> 标签,据 Chrome 提示应当尽量放在第一个。
  • 一个元素不能有多个id,多个元素不能有一个 id。
  • link 标签中可以添加 media 属性选择匹配的设备,例如 media="screen and (max-width: 480px)" 或者 media="print" ,第一个表示设备屏幕宽度,第二个表示打印机。此外可以查询显示方向 orientation ,查询为 landscapeportrait
  • 可以直接在 CSS 中指定设备,例如
#media screen and (min-device-width: 481px) {
    body {
        font-family: Times;
    }
}
  • min-device-width 中的 device 去掉可以设置为浏览器的长宽,其它的不变。
  • 块元素上下外边距会折叠(即使是嵌套),内联元素外边距不会。
  • 块元素中的内联元素会绕流浮动元素,块元素本身不会。
  • 浮动元素外边框不会折叠。
  • <time datetime="2021-03-05 17:00">...</time>

CSS

字体相关

字体

font-family 可以指定候选字体,最末尾的一个必须指定为字体系列而不是具体的字体,例如 sans-serif ,另外,不同字体与字体间用逗号分隔。

对于浏览器不支持的字体添加方法

@font-face {
      font-family: "FONT_NAME";
      src: url("FONT_URL"),
           url("FONT_URL2");
  }
  /* url 从上往下选择 */

粗细

使用 font-weight 控制字体的粗细,可以选择的属性值为 lighter normal bold bolder

倾斜

font-style 可以使用 italic 来使用字体库里面的斜体字体,也可以使用 oblique 来让浏览器倾斜字体(倾斜文本)。

大小

font-size 为 px 时指定的是字体的高度为多少像素,为百分数时,指定的是相对于父元素的字体的大小(或相对于默认字体大小的),使用 em 作为单位时与百分数相同,还可以使用浏览器默认的xx-small x-small small medium large x-large xx-large

装饰(特指划线)

使用 text-decoration 装饰字体,可以选择的属性为 none underline overline line-through blink (blink 经测试无效???),可以使用空格隔开以同时使用多种装饰。

行距

line-height 可以设置为数字,表示行高相对于各个元素自己的字体大小,而非line-height 所在元素的字体大小。

盒模型

边距

使用 padding 以指定内边距,margin 以指定外边距。

边框

border 样式有 solid 表示实线,double 表示两条线,groove 说是槽,不明显,outset 是内容突出,dotted 虚线,dashed 一组破折线,inset 内凹,ridge 脊线

border-radius 可以指定圆角弯曲程度,还可以单独指定某一个角,需要把上下放在左右前面,例如 border-top-left-radius ,此外,单位为 em,相对于字体大小。

背景

background-image: url(...); 其中 url 里面不需要加引号

background-repeat 可以使用 repeat-x 或者 repeat-y 来指定在哪个方向重复。

相关属性

-top -bottom -right left 可以独立指定某一边的边框的样式等

选择器相关

子孙选择器

CSS 允许使用子孙元素来特指例如

#IDNAME LABELNAME {
    color: black;
}
/* 前一个 #IDNAME 是父, LABELNAME 是子,意为为 #IDNAME 下的所有 LABELNAME 指定样式,此外,#IDNAME 可以替换为其他标签,类等,LABELNAME 同理。 */
/* 若将中间的空格改为 > 则只选择直接子元素 */
/* #IDNAME LABELNAME LABELNAME 也可行,不限个数 */

兄弟选择器

例如 h1+p {} 只选择紧跟在 h1 之后的 p

属性选择器

例如 img[width] {...} 选择 HTML 中所有包含 width 属性的图像,可以加上width="100"img[alt~="example"] {} 选择 alt 属性包含 example 的 img

伪类与伪元素

使用 a:link 以指定未访问链接的样式,使用 a:visited 以指定已访问连接的样式,使用 a:hover 以指定鼠标悬停时的样式。

:first-letter 选择第一个字母,:first-line 选择第一行。

布局相关

可以使用 position: absolute 来为元素使用绝对定位(从标准流中删除),具有以下几个选择

  • static 默认的,在正常流中流入
  • absolute 相对页面固定
  • fixed 相对浏览器固定
  • relative 正常流入,但是在显示之前要偏移(后续)。

此外,可以使用 z-index 属性(支持负数)确定绝对定位元素的上下关系。另外,内联元素不会像围绕浮动元素一样围绕绝对定位元素,而是忽视。

表格

首先使用 div 包含整个表格,CSS 中定义:display: table ,此时可以使用 border-spacing 指定边距,此处的边距不会与其它 div 的外边距重叠。

再使用 div 包含每一行,CSS 中定义:display: table-row

每一个块需要一个 divCSS 中定义:display: table-cell,此时可以使用 vertical-align 规定对齐方式,例如 top 指定为按顶部对齐,注意需要为每一块添加这个属性。此外还有 middle 中间对齐,,bottom 底端对齐。

过渡和变换

例如 transform: rotate(45deg) 可以在鼠标悬停时旋转 45 度,时间可以另开一个 transition: transform 2s 决定时间长短,例如 2s

细节

  • 字体名含空格时,需要加引号
  • 一般建议对 body 直接使用默认的关键字定义字体大小,子元素按照百分比继承
  • padding margin 这些简写时可以按照上右下左的顺序写四个值,也可以按照上下和左右的顺序写两个值,border background 的三个属性没有特定顺序。background 的三个属性:background-color background-image background-repeat ,还可以采用另外的一些值例如 background-position
  • 关于字体的简写
font: font-style font-variant font-weight font-size/line-height font-family

其中前三个可选,font-size 必选,若想指定 line-height 则必须添加斜线,font-family 之间使用逗号间隔。

  • 伪类 nth-child 可以指定一个元素相对于兄弟元素的数字顺序时的样式

其余

  • WIndows Server 通常使用 default.htm 作为默认返回文件,其他的大部分是 index.html,除此之外也有 index.php
  • file:/// 三根斜线
  • 使用 # 指定 id 时,前面必须有具体的文件名或者斜线。
  • ftp 基础命令:cd 进入文件夹,dir 得到当前目录的文件列表,pwd 显示当前目录,put get 分别是上传下载。
  • 指定颜色可以使用名称或十六进制或rgb(x,y,z),其中 xyz 分别表示红绿蓝的百分比(0~100%),或者数字(0~255),但是通常建议使用十六进制,另外 #ccdd00 可以缩写为 #cd0 ,而 #ccdd10 则不行
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇