实训第一天: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>