Html/Css 初步认识笔记

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1.什么是 HTML ？

HTML（HyperText Markup Language）的学名是超文本标记语言。
标记用来表示网页内容要如何显示，自身不显示。<我就是标记>
标记成对出现，内容放在中间，标记对可以简写。 <开始标记>我是内容</结束标记> <我是简写的标记/>
标记的尖括号内一般包括标记名和属性。

<标记名属性名 = "属性值">内容</标记名>

简写 <标记名属性名 = "属性值"/>

<a>内容</a> 表示其内容是可以点击的链接文字

<img / > 标记表示这是一个图片

2.Html 网页文件的结构

Html 网页文件都以 <!DOCTYPE html> 开始
网页内容从<html>开始到</html >结束

网页内容分为头部<head> 和主体<body> 两部分

Head 可以放置标题 title 和其他信息，帮助浏览器解析网页。

Body 标记内的内容才会显示在网页上，网页的主体，

3. head 标记里面可以放什么？

页面的标题 <title> <title>我的网页</title> 这个标题将显示在浏览器页面顶部的标签卡上面
元信息标记 <meta> meta 标记的属性可以包含页面的各种信息

格式为 <meta 属性名="属性值"/> 或 <meta name = "属性名" content = "属性值"/>

页面的编码 <meta charset = "utf-8"/> 设置页面编码为 utf-8 模式，确保中文的 title 显示正常

页面作者信息 <meta name = "author" content = "小明"/>
加载外部文件 <link rel = "icon" href = "图片链接"/> 表示链接中的图片将作为标题栏的小图，注意图片的地址只能是自己网站的图片
其他信息

页面内容介绍
所关键字
页面使用哪国语言
页面在移动设备上如何显示
加载其他文件（CSS JS）

4.Body标记里面可以防放什么？

div 容器盒子 <div> 任何东西</div> 常用的将页面划分为多个框架的标记，整个页面 body 被分割成多个 div 容器盒子
img 图片 <img src="图片地址"/>

还可以添加下面两个属性设置图片大小宽度 width = "100" 高度 height = "200"

alt = "如果图片找不到就显示这里的文字"

a 超链接 <a herf = "要打开的网页地址">显示的文字</a>

如果需要在新的窗口中打开页面，需要添加 target =" _black"

input 输入框 <input type = "text"/>

类型 type 还可以是别的，比如 password 密码框，显示成星号或点 checkbox 勾选框

演示更多标记

不换行的 span
换行的 br
标题从大到小的 h1~h6
段落标签 p
有序列表 ol 和无序列表 ul

4.什么是 CSS？

CSS（Cascading Style Sheets）的学名是层叠样式表。

样式 Style <div style = "background:red">文字</div>

样式描述标记内容如何显示或者表示，比如元素的颜色（color 和 background）、文字（front-size）、边框（border）、位置和边距（外边距 margin 、内边距 padding）等。

样式可以写在 html 标记的属性中 <style = "样式名：样式的值；样式名：样式的值 "/>

5.CSS选择器一起改变多个元素的样式

选择器
- 选择器就是把符合某个规则的元素（标记对）都选出来

这些规则可以是：

- - 都是同类型的标记，比如 div
  - 具有某个相同属性名，或者属性值也相同的标记
- CSS 选择器可以写在<style></style> 标记中，格式如下

- 常见的 CSS 选择器
  - 标记选择器：可以修改所有相同标记名元素的样式
  - .class 类选择器：可以修改具有指定 class 属性值的元素的样式
  - #ID 选择器:可以修改具有指定 id 属性值的元素的样式
  - [属性] 选择器：可以修改具有任意属性的元素的样式
- CSS 选择器的组合使用
  - 选择后代元素：可选出所有嵌套的内部元素

- - 选择子层的元素：可选出所有嵌套的子层元素，不包括孙层或更低后代

- - 选择相邻的兄弟元素：可选出同层的后面一个元素

- - 使用伪类选择器选择某状态的元素：改变元素不同状态的样式

5.使用 CSS 样式做动画

设计动画

定义动画

指定到需要动画的元素

6.html 文件中加载 css 文件

可以在三个地方编写 css 样式
- html 文件的元素的 style 属性内

- html 文件的 style 标记内

单独的 css 文件里

html 文件内使用 <link> 标记加载

7.什么是 js？

JavaScript 是一种编程语言，是最通用的网页编程语言。
js 可以直接指挥 html 和 css，让网页动起来和用户交互。
html、css、js 的关系
- html 定义网页上的内容，即网页上有什么。
- css 定义网页上元素的外观，即看上去什么样。
- js 即网页的行为，可以操控一切，创造动态效果，让网页可以响应用户的操作，即决定了网页怎么动，怎么用。
可以在三个地方编写 js 代码
- 直接写在标记的事件属性值内，如 onclick = "js 代码"
- 直接写在 html 文件的 <script><script/> 标记内
- 写在单独的 js 文件中，再在 html 文件内用 <script src= "js文件地址">载入