实训第一天:HTML初始和HTML常用标签

实训第一天: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>
    
  • 空格特殊符号:&nbsp:一般情况下一个汉字等于两个字符,但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>&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;这首诗表达了李白的思乡之情。</p>
    		<p>【词语注释】</p>
    		<ul>
    			<li>李白:唐代诗人。</li>
    			<li>地上霜:泛指月光。</li>
    		</ul>
    	</body>
    </html>
    

实训第一天:HTML初始和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>
    		密&nbsp;&nbsp;&nbsp;码:<input type="password"/></br>
    		<a href="index.html"><button>登录</button></a>
    	</body>
    </html>
    

实训第一天:HTML初始和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>
    		密&nbsp;&nbsp;&nbsp;码:<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>
    

实训第一天:HTML初始和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>




















```
上一篇:Java自学-HTML(2)


下一篇:6月20日 顶会热词统计