HTML(关于html结构和功能）
目录
1.HTML的结构
2.HTML常用标签
2.3 段落标签
2.4 换行标签
2.5格式化标签
2.6图片标签
2.7超链接标签
2.8表格标签
2.9列表标签
2.10表单标签
1.HTML的结构
1.1HTML的基本结构
第一个页面 hello world
html 标签是整个 html 文件的根标签 ( 最顶层标签 ) head 标签中写页面的属性 . body 标签中写的是页面上显示的内容 title 标签中写的是页面的标题 .
1.2:标签层次结构
1.父子关系
2.兄弟关系
head 和 body 是 html 的子标签 (html 就是 head 和 body 的父标签 ) title 是 head 的子标签 . head 是 title 的父标签 . head 和 body 之间是兄弟关系 .
2.HTML常用标签
2.1注释标签
快捷键:ctrl + /
2.2标题标签
第一个页面 这是标题1
这是标题2
这是标题3
这是标题4
这是标题5
这是标题6
2.3 段落标签
这是一个段落
2.4 换行标签
br==break的缩写
2.5格式化标签
加粗:strong标签和b标签
倾斜:em标签和i标签
删除线:del标签和s标签
下划线:ins标签和u标签
第一个页面 这是标题1
这是标题2
这是标题3
这是标题4
这是标题5
这是标题6
加粗
倾斜
删除线
下划线
2.6图片标签
alt:替换文本,当图片不能正确显示时,会出现相关的替换文字
src:你的图片的路径,可以是本地的路径,也可以是网络路径
第一个页面 这是标题1
这是标题2
这是标题3
这是标题4
这是标题5
这是标题6
加粗
倾斜
删除线
下划线
这个是我的咬人猫老婆
2.7超链接标签
href:把你的链接放到里面,点击即可跳转.
target:可以设置你的跳转方式,是另起一页,还是就在本页面打开链接
给你们看看我的大哥
点击即可跳转
2.8表格标签
table 标签 : 表示整个表格 tr: 表示表格的一行 td: 表示一个单元格 th: 表示表头单元格 . 会居中加粗 thead: 表格的头部区域 ( 注意和 th 区分 , 范围是比 th 要大的 ) tbody: 表格得到主体区域 align:是表格相对于周围元素的对齐方式 border:表示边框.1表示有边框(数字越大,边框越粗),""表示没有边框 cellpadding:内容距离边框的距离,默认1像素 cellspacing:单元格之间的距离,默认为2像素 width/height:设置尺寸
姓名 性别 年龄 张三 男 11 李四 女 15 咬人猫 女 18
合并单元格:
跨行合并:rowspan="n"
跨列合并:colspan="n"
步骤 1. 先确定跨行还是跨列 2. 找好目标单元格 ( 跨列合并 , 左侧是目标单元格 ; 跨行合并 , 上方是目标单元格 ) 3. 删除的多余的单元格
李四 女 15 咬人猫 18 
2.9列表标签
主要使用来布局的 . 整齐好看 . 无序列表 [ 重要 ] ul li , . 有序列表 [ 用的不多 ] ol li 自定义列表 [ 重要 ] dl ( 总标签 ) dt ( 小标题 ) dd(围绕标题来说明)
有序列表
- 咬人猫
- 洛丽塔大哥
- 小奶糖
- 呆木头
无序列表
- 嘿嘿
- 嘻嘻
- 嗯嗯
自定义列表
\(^o^)/~ (⊙o⊙)… _(:з」∠)_ 
2.10表单标签
表单:用户输入数据的重要途径
表单域:包含表单元素的区域,重点是from标签.
表单控件:输入框,提交按钮等,重点是input标签
input标签:各种输入控件,单行文本框,密码框,按钮,单选框,复选框.
type:(必备)button,text,image,password,redio等等.
name:给input命名,便于操作
value:input的默认值
checked:默认被选中
maxlength:设定最大长度
1.文本框
2.密码框
3.单选框
4.复选框
5.普通按钮
6.提交按钮
7.清空按钮
8.选择文件
9.select标签(下拉菜单)
selected==默认选择
10.textarea标签(文本框)
11.无语义标签:div&span
div==division的缩写
apan==跨度
完整代码:
第一个页面 这是标题1
这是标题2
这是标题3
这是标题4
这是标题5
这是标题6
加粗
倾斜
删除线
下划线
这个是我的咬人猫老婆
给你们看看我的大哥
姓名 性别 年龄 张三 男 11 李四 女 15 咬人猫 18 有序列表
- 咬人猫
- 洛丽塔大哥
- 小奶糖
- 呆木头
无序列表
- 嘿嘿
- 嘻嘻
- 嗯嗯
自定义列表
\(^o^)/~ (⊙o⊙)… _(:з」∠)_
洛丽塔大哥洛丽塔大哥洛丽塔大哥
咬人猫咬人猫咬人猫
本机展示:
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！