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