html&css基础

HTML
- html标签的语法
- html元素
- head-做个头
- - head标签
  - title标签
  - meta
- 其他元素
- html绘制表格
- html comment
- - span
CSS（Cascading Style Sheets）
- css statement
- html引用css的三种方法
- css comment
- 选择器
- - Tag Selectors
  - 属性选择器
  - 其他类型选择器
- css reference
- css unit
- css color
- 其他css样式
- - border
  - cursor
  - boxshadow
- font字体
- stylesheet
- SCSS
- 其他学习资源

HTML

树结构
html是树结构组织的，<p>content</p>中content内容可看出树的子节点，

可看作父节点。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>制作我的第一个网页</title>
</head>
<h1>Hello World</h1>
<body>
</body>
</html>

html标签的语法

标签由英文尖括号<和>括起来，如就是一个标签。
html中的标签一般都是成对出现的，分开始标签和结束标签。结束标签比开始标签多了一个/。
标签与标签之间是可以嵌套的，但先后顺序必须保持一致，如：
里嵌套

，那么

必须放在

的前面。如下图所示。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>我是标题</title></head><body><h1>我是一级标题</h1><p>我是段落</p></body>
</html>

html元素

<!DOCTYPE html>:文档类型声明，表示该文件为 HTML5文件。<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html>标签之前
<html></html>标签对：<html>标签位于HTML文档的最前面，用来标识HTML文档的开始；</html>标签位于HTML文档的最后面，用来标识HTML 文档的结束；这两个标签对成对存在，中间的部分是文档的头部和主题。
<head></head>标签对：标签包含有关HTML文档的信息，可以包含一些辅助性标签。如<title></title>，<link /><meta />，<style></style>，<script></script>等，但是浏览器除了会在标题栏显示<title>元素的内容外，不会向用户显示head元素内的其他任何内容。
<body></body>标签对：它是HTML文档的主体部分，在此标签中可以包含<p><h1><br>等众多标签，<body>标签出现在</head>标签之后，且必须在闭标签</html>之前闭合。

head-做个头

文档的头部描述了文档的各种属性和信息，包括文档的标题等，绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

head标签

表示头部标签,通常用来嵌套meta、title、style等标签。

title标签

在<title>和</title>标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么

其他元素

HMTL各类元素名查找
button按钮选项
无序列表

   <ul><li>Rstudio</li><li>swirl<ul><li>ggplot2</li>        </ul></li></ul>

ul元素表示一组无序列表，li表示具体一个选项。

div（division）段落元素名
a（anchor）元素，创建超链接

<a href="https://www.udacity.com">work</a>

==注意a是元素,href是元素对应的属性。
格式注意点：

There is a space between a and href.
There are no spaces around the =.
The website has two " around it.
There are no spaces between the href attribute and the > of the opening tag.

img图像元素

<img src="http://somewebsite.com/image.jpg" alt="image description">

src属性意思是source attribute，代表指向放在网页上的图片的url链接。alt属性意思是alternative description。
img元素比较特别是不需要</>结尾，因为其是void element。
xml语法 void elements

路径
1.本地路径：
2.外部路径

figure

 <figure>
<img src=" redwoods_state_park.jpg" alt=" redwoods_state_park"><figcaption>Stout Memorial Grove in Jedediah Smith Redwoods State Park in 2011 by Chmee2 (Own work) GFDL or CC BY-SA 3.0, via Wikimedia Commons -<a href="https://commons.wikimedia.org/wiki/File%3AStout_Memorial_Grove_in_Jedediah_Smith_Redwoods_State_Park_in_2011_(22).JPG">Source</a></figcaption></figure>

html绘制表格

<tr>代表一行，<td>代表一列。
https://www.jianshu.com/p/aa063f7e80ce

html comment

html注释的语法规则如下：

 <!-- This is a comment -->

span

是行内元素。在行内定义一个区域，也就是一行内可以被划分成好几个区域，从而实现某种特定效果。本身没有任何属性，与div的区别是div表示一个块级区域，更大。

CSS（Cascading Style Sheets）

css statement

css的基本构件模块以rule-set规则集形式开始，由选择器和声明模块组成。

html引用css的三种方法

内部引用
所谓内部引用就是运用style标签引用。
type="text/css"是指定MIME类型，其中：text是指对bai象为网页中的文du本
css或是javascript是指当前指zhi定的文本类型.
外部引用
外部引用就是用标签引用外部CSS文件中的样式。

<link rel="stylesheet" type="text/css" href="cssstyle.css">

内联引用
内联引用其实就是在应用CSS样式的HTML部分直接在所做用的标签上定义CSS样式，这种方法最直接，但是缺点也最明显，最大的问题就是代码繁冗，作用域也仅仅在定义的标签的作用范围。

<p style="color:#ccc">THIS TEXT IS GREY</p>

css comment

css注释的语法规则同C++：

p {color: blue;
}
/* add CSS here */
h1 {color: red;
}

选择器

Tag Selectors

p {background-colors: pink;
}

p是就是一种标签选择器，该选择器可以将定义的css规则作用到所有同类型的标签中。

属性选择器

类属性选择器（class attribute selector）
类属性选择器的语法是.，在css中指定值的名称对应的样式。

<p class="booksummary"></p>

.booksummary{color:blue;}

注意，一个元素也可以指定多个类，如下面的例子。

<p class="highlight module right"></p>

ID选择器(id attribute selector)
每个标签的ID属性只能有一个。类属性选择器的语法是#

<p ID="site description"></p>

#ID{color:red;}

其他类型选择器

https://css-tricks.com/how-css-selectors-work/

css reference

在MDN上搜索样式参考。
在css-trick网站年鉴栏搜索参考。

css unit

css中的单位分为绝对单位和相对单位，绝对单位如像素、英尺等，相对单位有比率等。

css-length
MDN css length

css color

+颜色名与16进制值对应关系
开发者工具中带有网站取色器可获取16进制颜色参考值。

举个栗子：

body{color:red;}
h1{color:#00ff00;}
p{color:rgb(0,0,255);}

其他css样式

border

边框设置

cursor

cursor光标类型

boxshadow

boxshadow各类型效果预览

font字体

各操作系统预装的字体

stylesheet

+在html中链接css样式

<link href="path-to-stylesheet/stylesheet.css" rel="stylesheet">

SCSS

SCSS是CSS预处理器。

其他学习资源

牛客网css参考手册

html和css基础知识recap（含大量链接参考）相关推荐

css点击a标签显示下划线_好程序员HTML5培训教程-html和css基础知识
好程序员HTML5培训教程-html和css基础知识,Html是超文本标记语言(英语全称:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言. Css ...
〖前端开发〗HTML/CSS基础知识学习笔记
经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构:HTML文件的固定结构:<html><head>...</head><b ...
HTML/CSS基础知识（四）
WEB标准和W3C的理解与认识 Web标准是一系列标准的集合. 网页主要由三部分组成:结构(Structure).表现(Presentation)和行为(Behavior). 对应的标准也分三方面:结 ...
html css基础知识
1 这是自己学习html时候做的一些记录,供大家参考 <!-- 2 块和内联3 块元素:独占一行的元素4 div p h ul5 div没有任何语义,就是一个纯粹的快元素6 就是为了方便布局7 ...
HTML+CSS基础知识简单版
HTML+CSS基础知识简单版一.HTML概述 HTML:超文本标记语言,其实就是用来开发网页的一门语言: CSS:层叠样式表,可以用于渲染网页.美化网页.做网页. 1.HTML介绍 HTML:超文 ...
CSS基础知识（一）：选择器
文章目录前言一.CSS基础知识二.选择器 1.选择器 2.基础选择器 2.1 标签选择器 2.2 类选择器 2.3 id选择器 2.4 通配符选择器 2.5 基础选择器总结 3.复合选择器 3. ...
CSS基础知识---三种选择器
CSS基础知识---三种选择器选择器标签选择器 id选择器 class选择器全部代码选择器标签选择器 id选择器 class选择器标签选择器选择器优先级:id>class>标 ...
HTML+CSS基础知识5
HTML+CSS基础知识5 30.`<strong>`.`<em>`和`<b>`.`<i>`标签的区别 31.引用标签 32.iframe嵌套页面 33 ...
HTML+CSS基础知识3
HTML+CSS基础知识3 15.css选择器 16.css的继承 17.css优先级 18.css盒子模型 19.css标签分类 20.显示框类型 21.标签的嵌套规范 22.溢出隐藏 23.透明度 ...
CSS基础知识（定位）
CSS基础知识 CSS布局的三种机制普通流(标准流) 浮动定位定位模式静态定位(static) 相对定位(relative) 绝对定位(absolute) 固定定位(fixed) 边偏移定位 ...

html和css基础知识recap（含大量链接参考）