HTML介绍
- HyperText Markup language （超文本标记语言） 简称HTML
- 文本：txt文件，文件中只能输入中文、英文、标点符号。
- 超文本：txt的弊端就是可输入的类型太少，超文本啥都可以， 比如：图片、媒体类型、超链接、可输入的文本框....
- 标记（标签）：HTML中将所有可用的功能都已经封装成标签。我们只要写好标签就能实现对应的功能。
HTML特点
- 后缀：.html / .htm
- HTML都是由标签组成，且根目录标签 <HTML></HTML>
- 根标签下有两个重要的子标签组成，分别是 <HEAD></HEAD>、<BODY></BODY>
- HTML标签字母不区分大小写
- HEAD标签内容一般为配置相关的内容、BODY里面是需要显示的内容。head标签下的title标签可以定义页面的名字
- HTML文件是可以被任何浏览器直接解析渲染。
我的第一个HTML文件
H5网页
H4.01网页
常规标签
<!DOCTYPE html>全称为Document Type HyperText Mark-up Language，意思为文档种类为超文本标记性语言或超文本链接标示语言，现在是这个简洁形式，支持html5标准的主流浏览器都认识这个声明。
换行符 ： <br>--break
HTML注释：<!-- 我是注释 -->
分割线: <hr /> hr 横线（horizontal）
标题标签：<h*> （head） *取值 1-6 ， h1 最大，h6最小
HTML中的空格符号： （No-Break Space）
我想说 一句话！
字体加粗：<b></b>（bold） <strong></strong>（strong emphasized）
<b>看看字体啥样</b>、<strong>强壮的</strong>
<br> 换行符（break）
字体倾斜： <i>（italic） <em>（emphasis） 例如：<i>倒了</i> <em>倒不倒</em> 
段落标签：<p>（paragraph）
超链接：<a>（anchor ）
注意的事项：必须编写 href（hyperlink reference）属性才能实现连接的效果，href写的是链接的页面
<a href="i2.html">点我</a>
如果当前href中写的是#， 代表连接到本页面 
target : 表示当前链接地址打开方式
_self 在当前本页面地址打开
_blank 在新的选项卡中打开目标页面
HTML中列表标签
列表分两类: 有序列表ol（ordered lists）、无序列表ul（unordered lists）
他们都有共同的子标签<li></li>（list item） ,具体的内容都是写在子标签中
有序列表 标签<ol></ol>（order list）
无序列表 标签 <ul></ul>（unordered lists）
表格标签
表格标签有一个<table> 和 多个<tr> 和若干个<td>组成。
table > tr > td=th
tr: 表格的行（table row）
td: 表格的列， 放在tr中（table data）
th:表格的列，自动加粗，居中（table header cell）
示例： 制作一个两行三列的表格（快捷键：tr*2>td*3然后按一下Tab键就可以了）
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
表格的属性
表格居中，<center></center> ,将整个table 包起来
设定表格的宽度： width 单位： px（像素） 、 %
设定表格的高度： height 单位： px（像素） 、 %
设定表格的边框： border 单位： px（像素），默认值1px
设定表格的边框样式：cellspacing 单位： px（像素），默认值 1px
设定表格的内容与边缘的距离（设定表格内边距）：cellpadding
设定表格的背景色：bgcolor 值： 1、可以直接写颜色的单词。2、十六进制RGB #000000
设定边框颜色：bordercolor
------- 以上属性都在<table>标签中设定 --------
文字居中，在tr标签中设定属性 ： align
值：center(居中)、right（居右）、left （居左）、bottom（底部）、top（居上）....
------- 以上属性都在<tr>标签中设定 --------
设定当前td的宽度（调整当前表格占位）
width： 单位：像素或者百分比
------- 以上属性都在<td>标签中设定 --------
table中有一个默认的标签是表头<th>, 和td同级。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<center>
<table width="80%" border="1px" cellspacing="0px" cellpadding="5px"
bgcolor="mediumseagreen" bordercolor="#ffffff" >
<tr >
<th >序號</th>
<th>書名</th>
<th>作者</th>
</tr>
<tr align="center">
<td>1</td>
<td>平凡的世界</td>
<td>路遥</td>
</tr>
<tr align="center">
<td width="15%">2</td>
<td>人生</td>
<td width="25%">路遥</td>
</tr>
<tr align="center">
<td>3</td>
<td>金瓶梅</td>
<td>佚名</td>
</tr>
</table>
</center>
</body>
</html>
合并单元格
在table操作中，经常会合并单元格的操作，我们使用 rowspan（合并行）、colspan（合并列） 操作
<table width="80%" border="1px" cellspacing="0px" cellpadding="5px"
bgcolor="mediumseagreen" bordercolor="#ffffff" >
<tr >
<th width="15%">序號</th>
<th>書名</th>
<th width="25%">作者</th>
</tr>
<tr align="center">
<td>1</td>
<td>平凡的世界</td>
<td rowspan="2">路遥</td>
</tr>
<tr align="center">
<td >2</td>
<td>人生</td>
</tr>
<tr align="center">
<td>3</td>
<td>金瓶梅</td>
<td>佚名</td>
</tr>
<tr align="center">
<td colspan="3">Java编程讲义</td>
</tr>
</table>
框架标签
注：框架的使用和body是有冲突的。
HTML框架集与布局
（1）html文档流：把元素从上到下，从左到右的顺序默认排列
（2）web页面布局的几种方式
<1>Frameset框架集（框架布局）
①可以再同一个浏览器窗口显示多个HTML页面，每个HTML页面称为一个框架
②框架集标签<frameset>:使用了<frameset>标签就不能再用<body>标签（应为是同级的）
有属性rows（横着分割）、cols（竖着分割）、border（设置边界）、bordercolor（设置边界颜色）
noresize（边界不能拖动）、frameborder（值设置为yes就会显示框架边，no则不会）
只能写子标签<frame>不能写其他元素或标签
③框架集标签<frameset>可以嵌套<frameset>，可以包含多个框架标签<frame>
④框架标签<frame>常用属性：name(设置框架名称)、src(引入页面)、scrolling(设置滚动条，值为
autor、yes、no)
⑤<noframes>标签：当浏览器不识别框架集时就会识别<noframe>里面的内容，这时可以在<noframe>
</noframe>中间写<body></body>
⑥<Iframe>内联框架标签：可以包含在<body>里面，属性有src（引入页面）、width、height、
name（给内联框架起名字，可以配合<a>标签完成直接在内联框架中打开另一个页面的操作）
<2>Table布局（表格布局）
①数据展示
<3>Div布局
---------------------
作者：UNDEFINED_AUBE
来源：CSDN
原文：https://blog.csdn.net/undefined_aube/article/details/78747751
版权声明：本文为博主原创文章，转载请附上博文链接！
frameset （框架集） 子标签 frame
分割思想：先分上下。 然后将下半部分有继续分割左右。
网页中图片的显示
<img> ，这个 全称 image 图片的意思，我们用这个标签来展示图片信息
src： 填写图片源的路径。
width：修改宽度
height：修改高度
<img src="img/pipixia.jpg" width="200px" height="200px" />
网站布局
1、在frameset中设定几个frame 调整frame占比。
2、使用rows分配行高占比，中间使用,分割。 （先固定一个，剩余的量使用*匹配）
3、使用cols 分配左右布局中的宽度占比，使用,分割。
4、设置当前frameset属性
border设置框架边框的宽度
noresize 设置当前占比不可拖动。
scrolling ： no 禁止滚动条
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<frameset rows="60px,*" border="1px" noresize="noresize" >
<frame scrolling="no" src="top.html"/>
<frameset cols="188px,*" >
<frame scrolling="no" src="left.html"/>
<frame scrolling="no" src="main.html"/>
</frameset>
</frameset>
</html>
子页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<img src="imgs/main.png" />
</body>
</html>
总结
HTML简介（HyperText markup language） 超文本标记语言
根标签 HTML
子标签 head 、 body
HTML常用标签
br 换行
hr 分割线
b 加粗
strong 加粗
h* 标题 1-6
i 、 em 倾斜
p 段落标签
a 超链接 属性： href 链接地址 target （ _self / _blank ）
HTML列表
有序列表 ol > li
无序列表 ul > li
HTML表格（table）
tr > th|td
属性：
bgColor：背景色
border 边框
borderColor ： 边框颜色
width：表格宽度
height： 表格高度
cellspacing ：td之间的间隔
cellpadding：td与内容间的留白
合并单元格：
rowspan ： 合并行
colspan ： 合并列
<center> 表格居中的标签
HTML框架
<frameset> > <frame>
占比设置： rows 、 cols 剩余量使用*匹配
扫一扫
269
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
