开发
开发一个html文件，可以有很多方式
比如Dreamweaver,HBuilder等等专业工具。
最简单的方式就是用记事本写一个
中文问题
中文乱码问题
可以在浏览器上设置编码方式为GB2312
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
</head>
<p>中文</p>
标签
标签由开始标签和结束标签组成
这是一个开始标签
这是一个结束标签Hello World
标签之间的文本叫做内容 ## 元素 一个完整的HTML文件，应该至少包含html元素，body元素，以及里面的内容<html>
<body>
<h1>标题</h1>
</body>
</html
特殊元素：
有的特殊元素，没有内容，即开始和结束标签直接放在一起
比如BR HR
<h1>标题1</h1>
<br/>
<br/>
<br/>
<h1>标题2前面有3个换行</h1>
<p>这是一个水平线，有渲染效果，但是没有文本内容</p>
<hr/>
属性
属性用来修饰标签的
比如要设置一个标题居中
<h1 align="center">居中标题</h1>
写在开始标签里的 align=“center” 就叫属性
align 是属性名
center 是属性值
属性值应该使用双引号括起来
注释
注释通常用于解释一段代码的意义
注释不会在网页上显示出来
<!--align属性用于对齐-->
<h1 align="center">居中标题</h1>
标题
标题会自动粗体，大写其中的内容，并且带有换行效果
一般会使用<h1> 到 <h6> 分别表示不同大小的标题
段落标签
标签即表示段落 是paragraph的缩写 自带换行效果
段落1
段落2
段落3
<p>段落4 </p>
<p>段落5 </p>
<p>段落6 </p>
粗体
<b>
<strong>
都可以用来实现粗体的效果
区别：
b是bold的缩写，仅仅表示该文本是粗体的，并不暗示这段文字的重要性
strong虽然也是粗体，但是更多的是强调语义上的加重，提醒用户该文本的重要性。 在SEO（搜索引擎优化）的时候，也更加容易帮助用户找到重点的内容
推荐使用strong
<p>无粗体效果</p>
<b>b标签粗体效果</b>
<br/>
<strong>strong标签粗体效果</strong>
斜体
i是italic的缩写，仅仅表示该文本是斜体的，并不暗示这段文字的重要性
em 是 Emphasized的缩写，虽然也是斜体，但是更多的是强调语义上的加重，提醒用户该文本的重要性。 常常用于引入新的术语的时候使用。
<p>无斜体效果</p>
<i>使用 i 标签带来的斜体效果</i>
<br/>
<em>使用 em 标签带来的斜体效果</em>
同时具有粗体和斜体效果
通过嵌套实现多种效果
嵌套即标签中有标签
<strong><i>同时有粗体和斜体</i></strong>
预格式
有时候，需要在网页上显示代码，比如java代码
就需要用到pre
<pre>
public class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello World");
}
}
</pre>
删除效果
<del>即删除标签
delete的缩写
<del>使用del标签实现的删除效果</del>
下划线
<ins>即下划线标签
但是通常来讲，不要给普通文本加下划线，因为用户会误以为是一个超链
<ins>使用ins标签实现的下划线效果</ins>
图像
<img> 即图像标签
需要设置其属性 src指定图像的路径
<img src="https://how2j.cn/example.gif"/>
src使用图片所在的绝对路径，并在前面加上file://
如果图片不存在，默认会显示一个缺失图片，这是不友好的
所以可以加上alt属性。
当图片存在的时候，alt是不会显示的
当图片不存在的时候，alt就会出现
<img src="https://how2j.cn/example_not_exist.gif" />
<br/>
<img src="https://how2j.cn/example.gif" alt="这个是一个图片" />
<br/>
<img src="https://how2j.cn/example_not_exist.gif" alt="这个是一个图片" />
超链
<a>标签即用来显示超链
完整元素是
<a href="跳转到的页面地址">超链显示文本</a>
若要在新的页面打开超链
新增属性target
<a href="http://www.12306.cn" target="_blank">http://www.12306.cn</a>
target="_blank",表示打开一个空白页面显示
当鼠标放在超链上的时候，就会弹出提示文字
<a href="http://www.12306.com" title="跳转到http://www.12306.com">www.12306.com</a>
表格
tr(table row)表示行，所有3个tr元素
td(table data)表示列，每一行，有2列，所以每一个tr元素里，有2个td元素
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
</table>
带边框的表格
设置table的属性border
<table border="1">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
</table>
设置table宽度
设置table的属性 width
px即像素的意思。
比如你的分辨率是1024X768,则你的屏幕横向就有1024个像素
<table border="1" width="200px">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
</table>
设置td的属性width
在示例里，1单元格设置了宽度，那么3，和a单元格，自动继承该宽度
2单元格的宽度由table宽度和1单元格的宽度决定
<table border="1" width="200px">
<tr>
<td width="50px">1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
</table>
设置td的属性width为百分数
<table border="1" width="200px">
<tr>
<td width="80%">1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
</table>
单元格水平对齐顶
设置td的属性align
<table border="1" width="200px">
<tr>
<td width="50%" align="left">1</td>
<td>2</td>
</tr>
<tr>
<td align="center">3</td>
<td>4</td>
</tr>
<tr>
<td align="right">a</td>
<td>b</td>
</tr>
</tabl
单元格垂直对齐
设置td的属性valign
<table border="1" width="200px">
<tr>
<td width="50%" valign="top" >1</td>
<td>
2 <br/>
2 <br/>
2 <br/>
</td>
</tr>
<tr>
<td valign="middle" >3</td>
<td>
4 <br/>
4 <br/>
4 <br/>
</td>
</tr>
<tr>
<td valign="bottom" >a</td>
<td>
b <br/>
b <br/>
b <br/>
</td>
</tr>
</table>
横跨两列, 水平合并顶
设置td的属性colspan
<table border="1" width="200px">
<tr>
<td colspan="2" >1，2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
</table>
横跨两行, 垂直合并
设置td的属性rowspan
<table border="1" width="200px">
<tr>
<td rowspan="2">1,3</td>
<td>2</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
</table>
设置tr或者td的属性bgcolor
<table border="1" width="200px">
<tr bgcolor="gray">
<td width="50%">1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>a</td>
<td bgcolor="pink">b</td>
</tr>
</table>
块
<div>
<span>
这两种标签都是布局用的
div是块元素，即自动换行
常见的块元素还有h1,table,p
span是内联元素，即不会换行
常见的内联元素还有img,a,b,strong
字体
font常用的属性有 color和size, 分别表示颜色和大小
<font color="green">绿色默认大小字体</font>
<br>
<font color="blue" size="+2">蓝色大2号字体</font>
<br>
<font color="red" size="-2">红色小2号字体</font>
文本框
<input type="text"> 即表示文本框
并且只能够输入一行
如果要输入多行
使用文本域<textarea>
注： <input> 标签很特别，一般是不需要写成<input />或者<input></input> 这样的。
并且<input> 这样的写法也是满足标准的
<input type="text" size="10">
<input type="text" value="有初始值的文本框">
<input type="text" placeholder="请输入账号">
密码框
<input type="password"> 即表示密码框
输入的数据会自动显示为星号
表单
<form action="https://how2j.cn/study/login.jsp">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="登陆">
</form>
使用method=“get” 提交数据 是常用的提交数据的方式
如果form元素没有提供method属性，默认就是get方式提交数据
get方式的一个特点就是，可以在浏览器的地址栏看到提交的参数，即便是密码也看得到
<form method="get" action="https://how2j.cn/study/login.jsp">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="登陆">
</form>
使用method=“post” 也可以提交数据
post不会在地址栏显示提交的参数
如果要提交二进制数据，比如上传文件，必须采用post方式
单选框
<input type="radio" > 表示单选框
分组即，多个单选框，都在一个分组里，同一时间，只能选中一个单选框
设置name属性相同即可
其中checked表默认选中
<p>今天晚上做什么？</p>
学习java<input type="radio" name="activity" value="学习java" > <br/>
东京热<input type="radio" checked="checked" name="activity" value="tokyohot" > <br/>
dota<input type="radio" name="activity" value="dota" > <br/>
LOL<input type="radio" name="activity" value="lol"> <br/>
复选框
<input type="checkbox"> 即表示复选框
<p>今天晚上做什么？</p>
学习java<input type="checkbox" value="学习java" > <br/>
东京热<input type="checkbox" checked="checked" name="activity" value="tokyohot" > <br/>
dota<input type="checkbox" value="dota" > <br/>
LOL<input type="checkbox" value="lol"> <br/>
下拉列表
<select> 即下拉列表
需要配合<option>使用
<select >
<option >苍老师</option>
<option >高树玛利亚</option>
<option >遥美</option>
</select>
文本域
<textarea> 即文本域
与文本框不同的是，文本域可以有多行，并且可以有滚动条
<textarea>abc
def
</textarea>
使用属性cols和rows设置宽度和行数
<textarea cols="30" rows="8">123456789012345678901234567890
1234567890
1234567890
1234567890
1234567890
1234567890
1234567890
1234567890</textarea>
提交按钮与重置按钮
<form action="/study/login.jsp">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="提交">
<input type="reset" value="重置">
</for
按钮
<button></button>即按钮标签
与<input type="button">不同的是，<button>标签功能更为丰富
按钮标签里的内容可以是文字也可以是图像
如果button的type=“submit” ，那么它就具备提交form的功能
<button><img src="https://how2j.cn/example.gif"/></button>
设置type=“submit”
IE下button的type的默认值为button不具备提交功能
其他浏览器type的默认值是submit
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
