idea创建html页面
方法:file->new->module->static web
学习资源
w3c school 学习资料手册
标签
- 文件标签
html:根标签
head:头标签 指定属性 引入资源
title:标题
body:体标签
- 文本标签
<!--注释-->
<br>换行
<h1 to h6> 标题
<p> 段落
<hr> 加一条水平线 可以加属性
<b>字体加粗
<i> 字体斜体
<font>改变字体 可以加属性 color颜色 size 大小 face 字体
<center> 文本居中 相对于父元素
属性定义:
- color (百度取色器 取色)
1.英文单词 red green blue
2.rgb(值1,值2,值3)值范围 0-255
3.#值1值2值3:范围00-FF之间 - width
1.数值 width = ‘20’ 单位 像素
2.数值% 占比相对于父元素的比例
特殊字符
- 图片标签
<img src="D:/picture/1.jpg" align="right" alt="古镇"/>
当图片加载失败时候出现alt的文字
src +路径
相对路径以.开头的路径 ./:当前目录 …/:上一级目录
- 列表标签
有序列表 ol type 改变标号 123 还是abc
无序列表 ul type改变类型
- 超链接标签
<a></a>
定义一个超链接
属性 href:指定访问资源的url
target 指定打开资源的方式
<a href = "http://www.baidu.com" target="_self">点我</a> 和不加一样 当前页面打开
<a href = "http://www.baidu.com" target="_blank">点我</a> 空白页面打开
<a href="http://www.baidu.com"><img src = "img/jaisg.jpg"></a>
使用图片当超链接
- 块标签
div和span
span:文本信息在一行展示 行为标签 内联标签
div:每一个div占一整行 块级标签 - 语义化标签 html5中为了提高程序的可读性
<header></header>
<footer></footer>
- 表格标签
table :定义表格
属性:width 宽度; border 边框;
cellspacing 定义单元格之间的距离,如果为0,则单元格的线会合成1条
cellpadding 定义内容和单元格的距离
bgcolor 背景色
tr:定义行
td:定义单元格
th:定义表头单元格
caption:表格标签
thead:表示表格头
tbody:表示表格体
tfoot:表示表格脚
合并单元格方式:
<th rowspan = "2">编号</th> 占两行
<th colspan = "2">姓名</th> 占两列