search

GH1995 / articles

blog
https://gh1995.github.io
2 stars 0 forks source link

HTML notes #59

Open GH1995 opened 4 years ago

GH1995 commented 4 years ago

图片也可以作为button

<input type="image" src="">
GH1995 commented 4 years ago 
  <input type="text" value="输入明星" list="star"/> <!--  input里面用 list -->
  <datalist id="star">   <!-- datalist 里面用 id  来实现和 input 链接 -->  
            <option>刘德华</option>
            <option>刘若英</option>
            <option>刘晓庆</option>
            <option>郭富城</option>
            <option>张学友</option>
            <option>郭郭</option>
  </datalist>
GH1995 commented 4 years ago 
  <fieldset>
            <legend>用户登录</legend>  标题
            用户名: <input type="text"><br /><br />
            密　码: <input type="password">
  </fieldset>
GH1995 commented 4 years ago
类型 使用示例 含义
email <input type="email"> 输入邮箱格式
tel <input type="tel"> 输入手机号码格式
url <input type="url"> 输入url格式
number <input type="number"> 输入数字格式
search <input type="search"> 搜索框（体现语义化）
range <input type="range"> 自由拖动滑块
time <input type="time"> 小时分钟
date <input type="date"> 年月日
datetime <input type="datetime"> 时间
month <input type="month"> 月年
week <input type="week"> 星期 年
GH1995 commented 4 years ago
属性 用法 含义
placeholder <input type="text" placeholder="请输入用户名"> 占位符 当用户输入的时候 里面的文字消失 删除所有文字，自动返回
autofocus <input type="text" autofocus> 规定当页面加载时 input 元素应该自动获得焦点
multiple <input type="file" multiple> 多文件上传
autocomplete <input type="text" autocomplete="off"> 规定表单是否应该启用自动完成功能 有2个值，一个是on 一个是off on 代表记录已经输入的值 1.autocomplete 首先需要提交按钮
2.这个表单您必须给他名字
required <input type="text" required> 必填项 内容不能为空
accesskey <input type="text" accesskey="s"> 规定激活（使元素获得焦点）元素的快捷键 采用 alt + s的形式
GH1995 commented 4 years ago

font:综合设置字体样式 (重点)

font属性用于对字体样式进行综合设置，其基本语法格式如下：

选择器{font: font-style  font-weight  font-size/line-height  font-family;}

使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。

注意：其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

GH1995 commented 4 years ago 
font-style:normal italic oblique

平时我们很少给文字加斜体，反而喜欢给斜体标签（em，i）改为普通模式。

font-weight: normal bold bolder lighter 100~900

数字 400 等价于 normal，而 700 等价于 bold。 但是我们更喜欢用数字来表示。 

font-size:
font-family:
  1. 现在网页中普遍使用14px+。
  2. 尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。
  3. 各种字体之间必须使用英文状态下的逗号隔开。
  4. 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
  5. 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: "Times New Roman";。
  6. 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。
GH1995 commented 4 years ago
字体名称 英文名称
宋体 SimSun
新宋体 NSimSun
黑体 SimHei
微软雅黑 Microsoft YaHei
楷体_GB2312 KaiTi_GB2312
隶书 LiSu
幼园 YouYuan
华文细黑 STXihei
细明体 MingLiU
新细明体 PMingLiU
GH1995 commented 4 years ago 
a {   /* a是标签选择器  所有的链接 */
      font-weight: 700;
      font-size: 16px;
      color: gray;
    }
a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */
      color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */
}
GH1995 commented 4 years ago 
li:first-child { /*  选择第一个孩子 */
            color: pink; 
          }
li:last-child {   /* 最后一个孩子 */
            color: purple;
          }
li:nth-child(4) {   /* 选择第4个孩子  n  代表 第几个的意思 */ 
        color: skyblue;
          }
GH1995 commented 4 years ago

:target目标伪类选择器 :选择器可用于选取当前活动的目标元素

:target {
    color: red;
    font-size: 30px;
}
GH1995 commented 4 years ago 
text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;
  1. 前两项是必须写的。 后两项可以选写。
GH1995 commented 4 years ago 
<head>
  <link href="CSS文件的路径" type="text/CSS" rel="stylesheet" />
</head>

href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。 type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。 rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

GH1995 commented 4 years ago

display

块级元素(block-level)

每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

块级元素的特点：

  1. 总是从新行开始
  2. 高度，行高、外边距以及内边距都可以控制。
  3. 宽度默认是容器的100%
  4. 可以容纳内联元素和其他块元素。

行内元素(inline-level)

行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。
  1. 和相邻行内元素在一行上。
  2. 高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
  3. 默认宽度就是它本身内容的宽度。
  4. 行内元素只能容纳文本或则其他行内元素。（a特殊）
GH1995 commented 4 years ago

块级元素和行内元素区别

块级元素的特点：
（1）总是从新行开始
（2）高度，行高、外边距以及内边距都可以控制。
（3）宽度默认是容器的100%
（4）可以容纳内联元素和其他块元素。
行内元素的特点：
（1）和相邻行内元素在一行上。
（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。

行内块元素（inline-block）

在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

行内块元素的特点：
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。
GH1995 commented 4 years ago
显示模式 形状
块级元素 面包
行内元素 牛奶
行内块元素 果冻
GH1995 commented 4 years ago 
div::befor {
  content:"开始";
}
div::after {
  content:"结束";
}

:用来表示伪类，::用来表示伪元素

GH1995 commented 4 years ago

background: color image repeat attachment position

background: transparent url(image.jpg) repeat-y  scroll 50% 0 ;
GH1995 commented 4 years ago

CSS 三大特性

层叠 继承 优先级 是我们学习CSS 必须掌握的三个特性。

恰当地使用继承可以简化代码，降低CSS样式的复杂性。子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color属性）

GH1995 commented 4 years ago

CSS3盒模型

CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

可以分成两种情况：

  1. box-sizing: border-box 盒子大小为 width
  2. box-sizing: content-box 盒子大小为 width + padding + border