html学习
HTML的基本书写格式：
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言。
HTML 使用标记标签来描述网页。
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
1.HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
2.HTML 标签是由尖括号包围的关键词，比如 <html>。
3.HTML 标签通常是成对出现的，比如 <b> 和 </b>。
4.标签对中的第一个标签是开始标签，第二个标签是结束标签。
5.开始和结束标签也被称为开始标签和闭合标签。
6.<html> 与 </html> 之间的文本描述网页
7.<body> 与 </body> 之间的文本是可见的页面内容
8.<h1> 与 </h1> 之间的文本被显示为标题
例：
<h1>你好</h1>
<h2>你好</h2>
<h3>你好</h3>
9.<p> 与 </p> 之间的文本被显示为段落
例：
<p>你好</p>
<p>你好</p>
10.HTML 链接是通过 <a> 标签进行定义的。
例：
<a href="http://www.baidu.com.">This is a link</a>
11.HTML 图像是通过 <img> 标签进行定义的。
例：
<img src="图片位置" width="104" height="142" />
width”图片长度“，height”图片高度“
关于表格的代码：
例：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style>
bordered{bordered-style:solid;}
</style>
</head>
<body>
<p>这是一个常规段落</p>
<div style="bordered:1px red solid;width:100px;height:1">
这是一个有<span style="color:red"></span> 的div
</div>
<table border="1">
<caption>学生信息</caption>
<thead>
<tr>
<th>学生的姓名</th>
<th>学生的性别</th>
<th>学生的年龄</th>
<th>学生的成绩</th>
</tr>
</thead>
<tr>
<td>xiaoming</td>
<td>男</td>
<td>12</td>
<td>100</td>
</tr>
<tr>
<td>xiaohong</td>
<td>女</td>
<td>13</td>
<td>99</td>
</tr>
<tr>
<td>xiaoqing</td>
<td>女</td>
<td>12</td>
<td>85</td>
</tr>
<tr>
<td>xiaoqiang</td>
<td>男</td>
<td>12</td>
<td>88</td>
</tr>
</table>
<table border="1">
<tr>
<td rowspan="2">小明</td>
<td>语文</td>
<td>98</td>
</tr>
<tr>
<td>数学</td>
<td>98</td>
</tr>
<tr>
<td rowspan="2">小强</td>
<td>语文</td>
<td>89</td>
</tr>
<tr>
<td>数学</td>
<td>98</td>
</tr>
</table>
<table border="1">
<tr>
<td colspan="2">男</td>
<td colspan="2">女</td>
</tr>
<tr>
<td>姓名</td>
<td>成绩</td>
<td>姓名</td>
<td>成绩</td>
</tr>
<tr>
<td>小明</td>
<td>96</td>
<td>小红</td>
<td>69</td>
</tr>
</table>
<table border="1">
<tr>
<td colspan="5">学生信息</td>
</tr>
<tr>
<td rowspan="2">男</td>
<td>姓名</td>
<td>小强</td>
<td>小东</td>
<td>小明</td>
</tr>
<tr>
<td>成绩</td>
<td>50</td>
<td>20</td>
<td>30</td>
</tr>
<tr>
<td rowspan="2">女</td>
<td>姓名</td>
<td>小红</td>
<td>小方</td>
<td>小利</td>
</tr>
<tr>
<td>成绩</td>
<td>55</td>
<td>29</td>
<td>39</td>
</tr>
</table>
</body>
</html>
<tr>:表格行 <td>：表格列
colspan：合并行 towspan：合并列
下面列出了适用于大多数 HTML 元素的属性：
| 属性 | 值 | 描述 |
|---|---|---|
| class | classname | 规定元素的类名（classname） |
| id | id | 规定元素的唯一 id |
| style | style_definition | 规定元素的行内样式（inline style） |
| title | text |
规定元素的额外信息（可在工具提示中显示） |
关于背景颜色的代码书写：
例：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div p {
background-color: orange;
}
p:first-child{
color:red;
}
[title] {
color: blue;
font-weight: bold;
}
div div:first-letter {
font-size:30px;
}
div.first-line{
color:green;
}
</style>
</head>
<body>
<div>
<p>hello</p>
<p title="p1">hello</p>
</div>
<div>
<div class="aa">
hello <br/>
<div>
<span>world</span>
</div>
</div>
</body>
</html>
关于表格的代码：
例：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
</head>
<body>
<form action="">
<table border="1" align="center">
<tr>
<p align="center" ><b>新会员注册</b></p>
</tr>
<tr>
<td>会员号</td>
<td><input type="text"/></td>
<td>（必填）</td>
</tr>
<tr>
<td>密码</td>
<td><input type="text"/></td>
<td>（必填）</td>
</tr>
<tr>
<td>性别<input type="radio" name="sex" value="nan"/>男
<input type="radio" name="sex" value="nv"/>女</td>
</tr>
<tr>
<td>通讯地址</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>E-Mail</td>
<td><input type="text"/></td>
<td>(必填)</td>
</tr>
<tr>
<td>学历</td>
<td>
<select>
<option>研究生</option>
</select>
</td>
</tr>
<tr>
<td>个人爱好</td>
<td>
<input type="checkbox"/>体育运动
<input type="checkbox"/>旅游
<input type="checkbox"/>书画
<input type="checkbox"/>写作
<input type="checkbox"/>收藏
<input type="checkbox"/>音乐
</td>
</tr>
<tr>
<td>会员头像</td>
<td>
<input type="file" id="resume"/>
</td>
</tr>
<tr>
<td>备注</td>
<td><textarea rows="5" cols="8"></textarea></td>
</tr>
<tr>
<td><input type="submit" value="确定"></input></td>
<td><input type="submit" value="重置"></input></td>
</tr>
</table>
</form>
<form action="">
<fieldset>
<legend>个人登录</legend>
用户名：<input type="text"/><br/>
密码： <input type="password"/>
</fieldset>
</form>
</body>
</html>
关于字体，字体颜色，下划线，字体居中，左右对齐打的代码：
例：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
.pclass{
font-family: "华文彩云";
font-size: 2em;
color: red;
text-decoration: underline;
}
#p1{
font-size: 50px;
font-family: "微软雅黑";
font-weight: bold;
text-indent: 3em ;
text-decoration:line-through ;
}
#p2{
font-family: "楷体";
font-weight: bolder;
taxt-align:center;
}
#p3{
font-family: "隶书"
font-size: 200px;
font-style: italic;
font-weight: bolder;
text-align:right;
text-decoration: underline;
}
a:hover{
color:red;
}
a:active{
color:green;
}
</style>
</head>
<body>
<p class="pclass">hello world 你好!</p>
<p id="p1">hello world 你好！</p>
<p id="p2">hello world 你好！</p>
<p id="p3">hello world 你好！</p>
<a href="">连接到某页</a>
</body>
</html>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
