第一天
HTML认识
1、HTML简介
HTML是用来做网页
HTML:Herp Text MarkUp Language 超文本标记语言
超文本：超：超链接 包含超链接的文本
标记语言：
标记：标签
语言：制作网页的语言
一个网页是有多个标签组成的
2、语法介绍
html是由浏览器来解析，所以不需要安装任何编译环境
Html文档的基本结构：
Head,和body 都是html的子标签
Html标签写法分类：
双标签：<标签名></标签名> / <开始标签>内容</结束标签>
单标签: <标签名 /> 一般写成<标签名>
Html标签的属性：
一般是键值对 key=”value”
属性的值必须使用双引号引起来
Html不会报错 所以注意双标签不要忘了闭合
Html标签不区分大小写 规范要求都是用小写
HTML常用标签
1、h1-h6 标题标签
双标签 有默认样式 字体变粗 变大 变黑 会自动换行
一般一个页面中h1只使用一次 h2-h6可以重复使用
2、p 段落标签
双标签 有默认的样式 会自动换行
3、常见的实体字符
& nbsp; 空格
& gt; 大于号
& lt; 小于号
& copy; 版权标志
4、i 标签 b标签 em 标签 strong标签 u标签
i标签 单纯的字体斜体
em 也是斜体 只不过具有强调意义
b 加粗
strong 加粗 具有强调意义
u 下划线
以上都是双标签
5、br hr
都是单标签
br 强制换行
hr 水平线
6、img 图片标签
单标签
属性：
src 图片的地址
title 鼠标移入的提示信息
alt 图片加载失败时的替代内容
可以使用网络图片或者本地的图片
使用的是本地的图片资源
相对路：相对于当前文件来去查找指定的资源
./ 代表当前路径
…/ 代表上一级路径
windows下根目录 根目录一般是 盘符:
注意加载图片时盘符前面加/
Linux下的根目录用/ 来表示
绝对路径: 不考虑当前文件的位置，从根目录去查找指定的资源
推荐使用相对路径
7、列表标签
无序列表
ul: 声明一个无序列表
li: 列表项
type(了解): 默认disc 圆
square 方块
circle 空心圆
ul中的直接子元素必须是li
有序列表
ol:声明一个有序列表
li: 列表项
type:
1 代表数字 默认就是数字
a 代表小写字母
A 代表大写字母
i 小写的罗马数字
I 大写的罗马数字
start: 指定以第几个开始 只能写数字
自定义列表
dl:声明一个自定义列表
dt:列表的标题
dd:列表描述项
8、a 标签超链接
超连接a 双标签
页面跳转
href: 跳转的地址
如果不给值 跳转当前页面
target:_blank 新打开一个窗口加载跳转后的页面
跳转到当前页面的指定位置 锚点
给指定标签添加id属性
a标签的href属性的值为#指定元素id属性的值
跳转到 本地html文件的指定位置
a标签的href属性的值为指定页面中标签的id的值
9.表格标签
table: 声明一个表格
border: 边框
cellspacing: 设置表格和表格之间的间距 **
cellpadding: 设置表格中内容距离当前表格边框之间的间距
tr: 声明一个行
td/th: 声明一个列
水平对齐方式：align **
align:默认靠左对其 left
center 居中
right 靠右对齐
如果给tr设置 设置当前行的所有
如果给td/th 设置当前一列
valign: 默认垂直居中 **
top:靠上对其
bottom:靠下对其
单元格合并： **
跨行合并
rowspan: 设置当前列 占几个行的高度
跨列合并
colspan: 设置当前列占 几个列的宽度
10.form ：声明一个表单域
属性：
action:提交地址 如果不写，提交到当前页面
method: 指定提交数据的方式
get: 默认是get提交
将数据明文显示在地址栏 相对不太安全
数据大小受浏览器限制
post:
不会将数据明文显示在地址栏 相对安全
理论上数据大小不受限制 表单的数据是要提交给后台，提交数据的格式一般是键值对
Uname=用户在用户名框输入的内容 所以表单控件除了按钮都要加name属性
10、form ：声明一个表单域
属性：
action:提交地址 如果不写，提交到当前页面
method: 指定提交数据的方式
get: 默认是get提交
将数据明文显示在地址栏 相对不太安全
数据大小受浏览器限制
post:
不会将数据明文显示在地址栏 相对安全
理论上数据大小不受限制 表单的数据是要提交给后台，提交数据的格式一般是键值对
Uname=用户在用户名框输入的内容 所以表单控件除了按钮都要加name属性
表单控件的属性：
name: 必须添加 座位提交数据的key
value: 代表值
type: 指定你的控件类型
text 普通文本输入框
password 密码输入框
radio 单选框
同一组单选框的name属性的值必须相同
必须设置默认值 value属性
checkbox: 多选框
同一组多选框的name属性的值必须相同
必须设置默认值 value属性
select>option: 下拉选框 option 选项
select 必须添加name属性
option 必须设置value
textarea:
文本域/多行文本输入框 双标签
hidden: 隐藏域
有些时候有些数据不希望用户看到和修改所以可以使用隐藏域
提交按钮： type=“submit”
按钮
单纯的按钮：
在form 表单域中 type=“button” 只是单纯的按钮 没有提交意义
checked 设置单选框和多选框的默认选中状态
selected 设置下拉选框的默认选中状态 给option设置
disabled 禁用
了解： type=“reset” 重置按钮
type=“image” 图片按钮
按照标签效果分类：
块标签：
会自动换行(独占一行)
h1-h6 p ul li ol dl dt dd table tr
行标签：
不会自动换行，标签和标签并排在一行显示,没有宽高属性
I b u em strong
行内块：
不会自动换行，标签和标签并排在一行显示，可以设置宽高
Img input
没有默认样式的快标签和行标签
注：div 块标签 没有默认样式 一般配合css做网页的布局
Span 行内标签，没有默认样式 一般也是配合css去使用
代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>我的网页</title>
</head>
<body>
普通文本<br>
我是老二
<!--
h1-h6 标题标签
br 强制换行
-->
<h1>你好，网页！</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!-- p便签 段落标签
双标签 有样式 会自动换行
-->
<!--
i 标签 字体倾斜
em 倾斜 表示强调 给搜索引擎使用
b 加粗
strong 加粗 表示强调 关键字
u 下划线
hr 水平线 单标签
br 强制换行
-->
<h1><u>背影</u></h1>
<p>我与父亲不相见已二年余了，我最不能忘记的是他的背影。
最低0.47元/天 解锁文章
468
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
