这是我参与「第四届青训营」笔记创作活动的的第1天

课堂内容

html和html中的常用标签
css中常用的标签
关于前端设计的一些基础概念

HTML部分

前端技术栈

css\html\js 三件套作为基础的核心语言

css:样式，规定网页的布局
html：内容，定义网页的内容
js：行为，对网页行为进行编辑

前端关注的方面

美观，安全，兼容，功能，兼容，体验，性能，无障碍

HTML介绍

HyperText Markup Language

eg:<img src(属性名)="photo.jpg"（属性值）>

标签和属性不区分大小写，推荐小写
空标签可以不闭合，比如input、meta
属性值推荐用双引号包裹
某些属性值可以省略

标题

h1-h6，由大到小

不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。

p标签

标签定义段落

eg:

<h1>字体排印学</h1>
<h2>历史</h2>
<p>活字的雏形或可追溯至公元前两千年前后美
索不达米亚文明的乌鲁克和拉尔萨，砖块上面不
均匀的印花被视作有可能是活字思想雏形。</p>
<h3>印刷体源流</h3>
<p>中国在唐代就已经出现雕版印刷术，公元868
年的《金刚经》是现存最古老的印刷品之一，使用
的技术即是木雕版印刷。</p>
<h2>应用</h2>
<p>...</p>

列表

有序列表<ol><li>

<h2>世界电影票房排行榜</h2>
<ol>
  <li>阿凡达</li>
  <li>泰坦尼克号</li>
  <li>复仇者联盟</li>
</ol>

无序列表<ul><li>

<ul>
  <li>🍇</li>
  <li>🍉</li>
  <li>🍎</li>
</ul>

<dl><dd><dt>

<h2>霸王别姬</h2>
<dl>
  <dt>导演：</dt>
  <dd>陈凯歌</dd>
  <dt>主演：</dt>
  <dd>张国荣</dd>
  <dd>张丰毅</dd>
  <dd>巩俐</dd>
  <dt>上映日期：</dt>
  <dd>1993-01-01</dd>
</dl>

效果：

链接

<a> 标签定义超链接，用于从一张页面链接到另一张页面

<a> 元素最重要的属性是 href 属性，它指示链接的目标。

输入

<input>属性：

placeholder：规定帮助用户填写输入字段的提示。

type：规定input元素的类型。

list:引用包含输入字段的预定义选项的 datalist 。

eg:

<input list="countries" />
<datalist id="countries">
  <option>Greece</option>
  <option>United Kingdom</option>
  <option>United States</option>
</datalist>

<textarea> 标签定义多行的文本输入控件。文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体

和文字相关的标签

<blockquote> 引用 <blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。
<cite>标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。

按照惯例，引用的文本将以斜体显示。

<code>：代码<strong>：强调

内容划分

语义化

语义化：用合理、正确的标签来展示内容

理解HTML中的元素、属性即属性值都拥有某些含义
遵循语义编写HTML（合适、传达内容而不是样式）

通过语义化地编写，可以增强代码的可读性、可维护性、搜索引擎的优化（搜索引擎通过标签和上下文来确定各个部分的权重）、提升无障碍性

CSS部分

在页面中使用css：1、外链 2、嵌入 3、内联

<!-- 外链 -->
<link rel="stylesheet" href="/assets/style.css">

<!-- 嵌入 -->
<style>
  li { margin: 0; list-style: none; }
  p { margin: 1em 0; }
</style>

<!-- 内联 -->
<p style="margin:1em 0">Example Content</p>

一般会把css作为单独文件，外链

CSS是如何工作的

通配选择器

标签选择器

找出页面的元素，以便设置样式
按照多种方式选择元素

通配选择器

单独使用时，这个选择器可以与文档中的任何元素匹配，就像一个通配符。如，让页面上的所有文本都为黑色：

*{ color: black; }

由于各个浏览器对每个元素上的默认边距都不一致，为了保证页面能够兼容多种浏览器，通常在Reset样式文件中，使用通配选择器进行重置，来覆盖浏览器的默认规则：

* { margin: 0; padding: 0; }

id选择器

使用 #

id要有唯一性。

类选择器

使用 .

id选择器和类选择器的区别： 1：ID只能在文档中使用一次

与类不同，在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。

2：不能使用ID词列表

不同于类选择器，ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。

3：ID能包含更多含义

属性选择器

属性选择器可以根据元素的属性及属性值来选择元素。
与上面类似，可以只对type="password" 属性的input应用样式：

<style>
  input[type="password"] {
    border-color: red;
    color: red;
  }
</style>

以某字符开头或结尾

HTML和CSS入门（1）笔记 ｜ 青训营笔记

课堂内容

HTML部分

CSS部分

通配选择器

HTML和CSS入门（1）笔记｜青训营笔记