2
HTML、Css 初了解
1.做网站的编程语言
2.网站是浏览器解析后的结果
3.一个网站是由N个网页构成的，每个网页都是HTML文件
怎么创建HTML文件
新建一个txt文件；然后在该文件中添加html代码并保存；最后将文件扩展名改为“html”即可。2、打开HBuilder编辑器，依次点击“文件”-“新建”-“html文件”；然后设置HTML文件名和保存路径，点击“创建”即可。
3-4
VS CODE
visual studiocode ，来自微软，开源的轻量代码编辑器
快捷键
- 保存ctrl+s
- 撤回撤销Ctrl+Y
- 从鼠标所在处向后选中shift+end
- 从后向前shift+home
- shift+alt+向下箭头
- alt+向上或向下——快速移动一行
- tab 缩进
- 多光标 alt+鼠标左键
- 选择相同元素的下一个ctrl+d
浏览器
五大浏览器——IE，Firefox，Chrome，Safari，Opera
5
深入了解网站开发
UI（设计稿）
web前端开发师
设计稿—>代码，数据库的数据显示到页面
HTML —— 结构
css ——样式
Java script 交互行为
web后端设计师
7
HTML基础结构与属性
超文本 标记 语言
标签（标记）/（元素）
标记格式：< >
写法
- 单标签（空标签）
<br>换行 - 双标签
<center></center> - 标签嵌套
（创建标签的快捷键：单词+tab键）
标签 属性:设置当前标签的功能
7
HTML初始代码
每个 .html 文件都有的代码，要符合html文件的规范写法
快捷创建： ！+tab
<!DOCTYPE html> 文档声明
<html lang="en">还有lang="zh-CN"表示一个中文网站
<head>
<meta charset="UTF-8">元信息：编写网页中的一些辅助信息
<title>Document</title>
</head>
<body>
</body>
</html>
HTML注释
(只能在文件中看到，浏览器中看不到）
- 写法
<!-- --> - 作用
a. 将暂时不用的代码储存起来
b. 记忆作用
快捷
ctrl+/
shift+alt+a （要在选中的情况下）
HTML语义化：
简单易懂
什么结构对应什么样的标签
8
标题与段落
标题标签
<h1></h1>....<h6></h6>
在一个网页中，h1标题最重要，并且一个.html文件中只能有一个h1标签，其他无所谓
段落文本
<p></p>
换行<br>空标签
水平线
空标签
align左右对齐方式
noshade取消阴影
文本修饰标签
- 强调
<strong></strong> - 斜体
<em></em> - 上标文本
<sup></sup>
例如：a2 - 下标文本
<sub><sub> - 删除文本
<del></del>
例如：哈哈哈 - 插入文本
<ins></ins>（有下划线）
例如：这样呢
11
特殊符号
显示<><hr>如：<hr>
&nbst;空格
12块与内联
<div>与<span>
div 块
快捷输入
div*数字
div{}
span内联
对于需要独立修饰的文本，内容多宽，就占用多宽空间。
列表综述
14
列表
无序列表
（li内部可以出现其他标签）
- 默认为实心圆
- circle为空心圆
- square方形
- none 什么都没有
type属性：改变前面标记的样式（一般用css去控制）
如：
<ul type="square">
<li>第一项</li>
<li>第二项</li>
</ul>
13
有序列表
type属性：改变前面标记的样式（一般用css去控制）
<ol type="i">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
type可取五种值，start只可取数字
15
自定义列表
（主用于图文混排时）
快捷创建dl>dt+dd
显示如下
嵌套列表
16
图片路径
- img
- src:引入图片的地址
在同一级下 code.gif或./code.gif
下级目录下 文件/图片
页面较低级，要先跳出
绝对路径在服务器中找不到
<img src=“ 路径”>
图片标签的属性
alt:图片（地址）出现问题时，给友好提示（简单说就是 出问题时才会用到）
如：下图情况
title:提示信息（鼠标放在图边上时会显示 信息）
如：
width，height（输入后，空间会固定）
视频中的例子：
引入文件的地址路径
相对路径
. 在路径中表示当前路径（同一级别）
在同一级别的另一文件夹需要/+文件夹名称
. . 表示上一级路径
绝对路径
直接引
19
超链接标签（双）
<a></a>
可以包住图片标签
属性
- herf:链接的地址
<a href="http://www.baidu.com">访问百度</a>
- target:规定在何处打开页面
*默认情况下：在当前页面打开_self
新窗口：_blank*
- base（单标签）:改变链接的默认行为（一般写在head中）
<base target="_blank">
视频任务：
注意 . . 跳出
16
跳转锚点（在页面内跳转）
两种操作方式
#+id
<a href="*#html*"><HTML></a>
<h2 *id="html"*>HTML超文本标记语言</h2>
#+name
<a href="#html"><HTML></a>
<a name="html"></a>
<h2>HTML超文本标记语言</h2>
20表格的基本结构
<table>表格的最外层容器
<tr>定义表格行
<th>定义表头
<td>定义表格单元
<caption>定义表格标题
快捷创建：table>tr>td
善用小括号
语义化标签
<tHead><tBody><tFood>
在一个table中，只有tBody 可以出现多次。
21
表格属性
- border 表格边框
- border color 边框颜色
- background color（bgcolor）背景颜
- cellpadding单元格与内容之间的空隙的空隙
- cellspacing单元格与单元格之间的间距
- rowspan合并行
- colspan合并列
- align水平对齐方式
- valign上下对齐方式
align（左右）：left，center，right
valign（上下）：top，middle，bottom
22tr属性
- 高度，颜色（不可设置宽度）
- 文字水平对齐align(left,right,center）
- 文字垂直对齐valign（top,middlie,bottom)
23td属性
（table data)
- 一个td宽度改变会影响到这一列
- 一个td高度改变会影响到这一行
- 颜色只影响自己
- 文字水平对齐align(left,right,center）
- 文字垂直对齐valign（top,middlie,bottom)
24 表格合并
- colspan把列合并
colspan="要合并的列数“ - rowspan把行合并
rowspan="要合并的行数"
26
表单标签
<form>表单的最外层容器
type属性用于定义输入框的类型
<input>标签用于搜集用户信息，根据不同的type属性值，展示不同的控件。
- <textarea>多行文本框
- <select>，<option>下拉菜单
- <label>辅助菜单
method中post和get
post安全性高，传送数据量大
默认为get，信息可以被看到
一些常见属性;checked（默认已被选中） , disabled（不可选中） , name , for …
placeholder
301
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
