- HTML：Huper Text MarkupLanguage:超文本标记语言。
超文本：功能比普通文本更加强大。标记语言：使用一组标签对内容进行描述性的语言，它不是编程语言
- HTML语法规范
- HTML 文件都是以.html或者.htm结尾的，建议使用.html结尾
- HTM文件分为头部分和体部分
- html 标签都是由开始标签和结束标签组成。
- html标签忽略大小写==，建议使用小写
HTML文本标签
从<h1>到<h6>逐渐变小
水平线标签
<hr />
段落标签
<p>< /p>
加粗标签
<b>< /b>
斜体标签
<i>< /i>
字体标签
<font 属性=值>内容</font>
color;设置字体的颜色，可使用英文单词或16进制
size:设置字体大小，从1到7逐渐变大。最大显示为7
face:设置字体
步骤分析
第一步：创建一个HTML文档
第二步：创建一个标题标签显示公司简介
第三步：创建一个水平线标签
第四步：创建四个段落标签分别显示公司简介的一些文字性描述内容
第五步：对文字内容进行完善(加粗、变色的设置)
网站页面显示界面
<img/>标签的src属性
当前目录：直接写文件名成或者./文件名称；
上一级目录：../文件名称;
下一级：目录名称/文件名称
width:设置图片的宽度
height:设置图片的高度
alt:当前图片无法显示的时候给出的提示信息，他的效果与浏览器有关
<img src="../../img/img/logo2.png" width="260px" height="50px" alt="图片无法正常显示"/>
<img src="../../img/img/header.jpg" width="260px" height="45px" alt="图片无法正常显示" />
友情链接显示界面
- 列表标签：有序列表：
<ol type="1" start="4"><li></li></ol>
无序列表
<ul type="circle"><li></li></ul>
超链接标签：
href:用于确定需要显示的页面的路径(URL)
target:确定以何种方式打开href所设置的页面
常用取值
_blank 在新窗口中打开href确定的页面
_self 默认。使用href确定的页面替换当前页面
<a href="http://www.baidu.com" target="self、_blank">百度
</a><br />
表格标签
HTML表格是由<table>标签以及一个或多个<tr>、<th>或<td>标签组成的。
<table>是父标签，相当于整个表格的容器
border 表格边框的宽度
width 表格的宽度
cellpadding单元便沿与其内容之间的空白
cellspacing 单元格之间的空白
bgcolor 表格的背景颜色
<tr> 标签用于定义行
<td> 标签用于定义表格的单元格(一个列)
colspan 单元格可横跨的列数
rowspan 单元格可横跨的行数
align 单元格内容的水平对齐方式，取值：left 左、right 右
center 居中。
nowrap 单元格中的内容默认居中、加粗
<th>标签用于定义表头。单元格内的内容默认居中、加粗
2.5 扩展-文件路径
- 相对路径
./ 代表的是当前路径
../ 代表的上一级路径
../../ 上上一级路径
3.网站友情链接页面
3.1需求分析
在我们的网站中,通常会显示友商公司的网站链接
- 百度
- 新浪微博
- 黑马程序员
3.2技术分析
列表标签:
无序列表: ul
type: 小圆圈,小圆点, 小方块
有序列表: ol
type: 1,a ,A,I,
start : 指定是起始索引
3.3步骤分析
3.4代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!--
1.使用无序列表
百合网
世纪家园
珍爱网
非诚勿扰
-->
<body>
<ul>
<li><a href="http://www.baihe.com" target="_blank">百合网</a></li>
<li><a href="http://www.jiayuan.com">世纪家园</a></li>
<li>珍爱网</li>
<li>非诚勿扰</li>
</ul>
</body>
</html>
3.5 扩展内容
点击链接,跳转去指定网站
a 超链接标签
常用的属性:
href: 指定要跳转去的链接地址,如果是网络地址需要加上http协议,如果访问的是本网站的html文件,可以直接写文件路径
target : 以什么方式打开
_self: 默认打开方式,在当前窗口打开
_blank: 新起一个标签页打开页面
上午内容回顾:
- 网站信息案例
- 字体标签 font
- color: 颜色
- size: 大小 1~7
- face: 改变字体
- p 段落标签
- h标题标签 : 1~6
- br 换行
- hr 水平线
- b 加粗
- i 斜体
- strong : 加粗 包含语义
- em : 斜体 包含语义
- 字体标签 font
- 网站图片案例
- img标签
- src : 指定图片的路径
- width: 宽度
- height: 高度
- alt : 图片加载错误时的提示信息
- 相对路径:
- ./ 代表的是当前路径
- …/ 代表的上一级路径
- …/…/ 代表的上上一级路径
- img标签
- 友情链接:
- ul: 无序列表
- type :
- ol: 有序列表
- type : 样式
- start : 起始索引
- li : 列表项
- a 超链接标签
- href : 要访问的链接地址
- target : 打开方式
- ul: 无序列表
- 网站首页
- table标签
- border: 指定边框
- width : 宽度
- height : 高度
- bgcolor : 背景颜色
- align : 对齐方式
- tr标签
- td标签
- colspan: 跨列操作
- rowspan: 跨行操作
- 表格单元格的合并
- 表格的嵌套
- table标签
4.3步骤分析
- 创建一个8行一列的表格
- 第一部份: LOGO部分: 嵌套一个一行三列的表格
- 第二部分: 导航栏部分 : 放置5个超链接
- 第三部分: 轮播图
- 第四部分: 嵌套一个三行7列表格
- 第五部分: 直接放一张图片
- 第六部分: 抄第四部分的
- 第七部分: 放置一张图片
- 第八部分: 放一堆超链接
常用的快捷键
Ctrl + D 删除光标当前所在的行
Ctrl + Shift + R 复制当前行到下一行
Ctrl + Enter 将光标移动到下一行
Ctrl + Shift + Enter 将光标定位在上一行
Ctrl + Shift + / 注释当前行
Ctrl + R 运行当前网页/刷新当前网页
# 今日目标
### 使用CSS完成网站首页的优化
### 使用CSS完成网站注册页面的优化
### 使用JS完成简单的数据校验
### 使用JS完成图片轮播效果
### 教学目标：
* 了解CSS的概念
* 了解CSS的引入方式
* 了解CSS的基本用法和常用的选择器
* 了解CSS的盒子模型，悬浮和定位
* 了解JS的概念
* 掌握JS的基本语法，数据类型，能够使用JS完成简单的页面交互
去年的内容简单回顾
什么HTML : 超文本标记语言
p标签: 段落标签
br标签: 简单换行
h1-h6: 标题标签
hr标签: 水平分割线, 华丽的分割线
font标签: color属性改变颜色 , size
b标签: 加粗
i标签: 斜体
strong标签: 带语义的加粗
em标签: 斜体标签,带语义
img标签: 图片标签 显示图片
src: 指定图片路径(相对路径)
width: 宽度
height: 高度
alt: 图片加载失败时的提示
相对路径:
./ 代表当前路径
../ 代表的是上一级路径
../../ 代表的是上上一级路径
ul标签: 无序列表
ol标签: 有序列表
li标签: 列表项
a标签: 超链接标签:
target: 打开方式
href: 指定要跳转的链接地址
table标签: table > tr > td
tr标签: 行
td标签: 列
合并行: rowspan
合并列: colspan
网站注册案例:
form 标签: 表单标签,主要是用来向服务器提交数据
method: 提交方式 get post
action : 提交的路径
input 标签:
type:
password: 密码框
text : 文本
submit: 提交
button: 普通的按钮
reset: 重置按钮
radio: 单选按钮 设置name属性让它们是一组
checkbox: 复选按钮
email:
date:
tel:
frameset : 框架标签
rows:
cols:
frame:
#
扫一扫
20万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
