实训第一天：HTML初始和HTML常用标签
一：HTML基本结构
<html>
<head></head>
<body></body>
</html>
简单记为：一个完整的人：HTML里面包含头head和身体body,穿上衣服css,加上动作JavaScript，就是一个完整的一个网页。
二：HTML常用标签
注意：标签都是双标签除了三个单标签，img 图片标签,br 换行标签，hr水平线
-
标题标签：h1—h6常用的时1-3
-
图片标签 img：
<img src="图片路径" width=200 height=200 /> -
居中标签：center
<center><h3>HTML,你好</h3></center> -
font字体标签：有三个属性face:字体名称，color：字体颜色，size 字体大小。
<center><h3><font face="隶书" size=7 color="red">静夜思</font></h3></center> -
正文标签p
<p>HTML,你好</p> -
添加一条水平线标签 hr
<hr> -
加粗和倾斜标签：
<b><i>HTML,你好</i></b> -
空格特殊符号： :一般情况下一个汉字等于两个字符，但utf8是一个汉字等于3个字符。
-
无序标签和有序标签：
<ul><li></li></ul> <ol><ul></ul></ol>例：
<html> <head> <title>我的网页</title> </head> <body> <h1>李白</h1> <a href="login.html"><img src="../images/lb.jpg" width=200 height=200 /></a> <center><h3><font face="隶书" size=7 color="red">静夜思</font></h3></center> <center><p>李白</p></center> <center><p>窗前明月光，疑是地上霜。</p></center> <center><p>举头望明月，低头思故乡。</p></center> <hr></hr> <p><b><i>【诗词欣赏】</i></b></p> <p> 这首诗表达了李白的思乡之情。</p> <p>【词语注释】</p> <ul> <li>李白：唐代诗人。</li> <li>地上霜：泛指月光。</li> </ul> </body> </html>
-
input 标签合集：
-
输入框：
用户名：<input type="text" /> -
密码框
密码：<input type="password"/> -
换行标签 br
-
按钮标签button
<button>按钮</button> -
超链接a 和href
<a href="链接地址"></a>例子：界面注册：
<html> <head> <title>登录</title> </head> <body> 用户名：<input type="text"/><br> 密 码：<input type="password"/></br> <a href="index.html"><button>登录</button></a> </body> </html>
-
单选框：input type=”radio”：两个或两个以上的选项只能选择一个
性别：<input type="radio" name="sex"/>男 <input type="radio" name="sex"/>女注意name的值必须相同。
-
复选框 ：input type=”checkbox”
兴趣爱好:<input type="checkbox">喝酒 <input type="checkbox">抽烟 <input type="checkbox">烫头 -
下拉列表：标签名称: select，选项使用option
<select> <option>甘肃政法大学</option> <option>清华大学</option> <option>北京大学</option> </select> -
上传文件标签：Input type=”file”
上传头像：<input type="file"/> -
颜色对话框：input type=”color”
<input type="color"/> -
日期对话框:input type=“date”
<input type="date" /> -
时间对话框：Input type=”time”
<input type="time"/> -
滑块:Input type=”range”
<input type="range"/> -
网址：input type=“url”
<input type="url"/> -
邮箱：input type=”email”
<input type="email"/> -
数字框：Input type=”number”
<input type="number"/>例：注册界面
<html> <head> <title>注册</title> </head> <body> <form> 用户名：<input type="text"/><br> 密 码：<input type="password"/></br> 性别：<input type="radio" name="sex"/>男 <input type="radio" name="sex"/>女</br> 爱好：<input type="checkbox"/>抽烟 <input type="checkbox"/>喝酒 <input type="checkbox"/>烫头<br/> 你居住的城市: <select> <option>兰州</option> <option>天水</option> <option>西宁</option> </select><br/> 上传头像：<input type="file"/><br/> 你喜欢的颜色:<input type="color"/></br> 出生日期：<input type="date"/><br/> 你注册的时间：<input type="time"/><br/> 你喜欢的数字：<input type="range"/></br> 你的网站：<input type="url"/><br/> 你的邮箱：<input type="email"/></br> 你的年龄：<input type="number"/></br> <button type="submit">注册</button> </form> </body> </html>
表格标签table:包含“tr”和“td”
”tr“表示表格的行，”td“表示的是表格的一个格。
<html>
<head>
<title>表格</title>
</head>
<body>
<table border=1>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
/td>