前端——HTML标签(2)

<!-- 表格 
	table起始 
	tr一行
	td一列 写数据用其
	(1)border属性用来定义边框宽度(外部表格边框)
	(2)<th> 定义属性名 表头标签在table下写,每一列属性的名字
	(3)空单元格使用 占位:如果单元格无内容可用占位符代替
    (4)<caption>定义标题:紧接在table之下,自动居中

 html超链接:
    <a>:一个字,一组词,图片
     href指明另一个网页的
    target属性:表示链接页面从何处显示,默认在本页面打开
         _blank重新开一个页面显示
    <name>属性:
 	使用name属性创建HTML页面的书签,可以本页面也可以是别的页面,可选择对读者可见或不可见。
 	使用锚点时可直接回到指定位置


 	图像标签:<img>要使用源属性src,图像的地址
    alt属性:预定义文本,当浏览器无法加载图片时,用预定义的文字替换

    background定义背景图片,html页面的标签,<background="图片地址">
-->
<!DOCTYPE html>
<html>
<head>
	<title>啦啦啦</title>
	<meta charset="utf-8">
</head>
<body background="C:\Users\lenovo\Desktop\1.png">
	<p>图片背景</p>
	<table border="5">
		<caption>table教程</caption>
		<th>Java课程</th>
		<th>教室信息</th>
		<th>养生指南</th>
		<tr>
			<td>Java从入门到精通</td>
			<td>JS从入门到精通</td>
			<td>佛性入门指南</td>
		</tr>
		<tr>
			<td>501教室</td>
			<td>啥都没有</td>
			<td> </td>
		</tr>
	</table>


	<a href="https://www.baidu.com" target="_blank">百度</a>
	<p> 陪考家长等待参加首场考试的孩子。中新社记者 沙见龙 摄
 
中新社记者走访拥有重庆多所重点高中的沙坪坝区发现,临近考场附近的宾馆房间早在10天前就已订满。除了快捷酒店 和普通宾馆,五星级酒店也加入了高考房的销售。 </p>
 
<p>
	<a name="tips"></a>
	“高考期间的入住率能赶上旺季的节假日。”沙坪坝一家星级酒店前台工作人员告诉记者,除了每年都会推出的高考 房,今年他们还推出了“高考套餐”:包含两晚八餐的食宿服务,同时配备专车接送考生。
 
“这个套餐是今年才开始推的,高考期间卖出了20多套。”该工作人员说,一个月前已经有不少家长打电话或上门咨询高 考套餐的情况,“今年明显觉得家长对高考房的配套上要求高了,所以我们也推出多样化的产品满足不同的需求”。</p>
 <a href="#tips">跳转到锚点</a>
 <a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>


 <img src="https://justtalk.oss-cn-shanghai.aliyuncs.com/image/%E7%9F%B3%E5%8E%9F.jpg">
<!--  相对路径 -->
<img src="1.png">
<!-- 绝对路径 -->
<img src="C:\Users\lenovo\Desktop\1.png">
<img src="sadfhg" alt="替换文本">
</body>
</html>
<!-- HTML表单 
	<form>元素:用于收集用户输入
		<input>元素:
		  文本输入:type=“text”用于单行文本输入
		  单选按钮type=“radio”check属性为选择默认值
		  提交按钮:type="submit"
		     属性action定义在提交表单时定义的动作,默认当前页面
		   method属性
		      get请求会把用户请求的数据显示在地址栏,
		      一般提交表单用POST请求,地址栏不会显示提交的数据,而是放在属性栏中,大小没有限制
		   name属性:若想要被正确提交,必须每个输入字段必须设置name属性

		<fieldset>用于组合表单数据
			<legend>用于定义标题

	    <select>表单元素:用于下拉列表
	    <textarea>	
	    多行输入,保留文档中的缩进和换行
	    <button>可定义点击的按钮
HTML5新增元素
      <checkbox>复选框

-->
<!DOCTYPE html>
<html>
<head>
	<title>表单</title>
	<meta charset="utf-8">
</head>
<body>
	<form>
		username<br>
		<input type="text" name="username"><br>
		password<br>
		<input type="password" name="password">

		<p>请选择你的性别</p>
		<input type="radio" name="sex" value="男" checked="">男<br>
		<input type="radio" name="sex" value="女">女
	</form>


	<form action="http://www.w3school.com.cn/demo/demo_form.asp" method="get">
		firstName<br>
		<input type="text" name="firsName"><br>
		lastName<br>
		<input type="text" name="lastName"><br>
		<input type="submit">
	</form>

	<form>
		<fieldset>
			<legend>personName</legend>firstName<br>
			<input type="text" name="firstName"><br>
			lastName<br>
			<input type="text" name="lastName"><br>
			<input type="submit" >
		</fieldset>
	</form>


	<form action="http://www.w3school.com.cn/demo/demo_form.asp" method="get">
		<select name="cars"> 
			<option value="Benz">奔驰</option>
			<option value="BMW">宝马</option>
			<option value="Audi">奥迪</option>
			<option value="Ford">福特</option>
		</select>
		<br><br>
		<input type="submit">
	</form>

	<form action="http://www.w3school.com.cn/demo/demo_form.asp" method="get">
		<textarea name="message" rows="10" cols="30">
			今天在501上课
			很忧伤
			没投影真累
		</textarea>
		<br><br>
		<input type="submit">
	</form>


	<form action="http://www.w3school.com.cn/demo/demo_form.asp" method="get">
		<button type="button" onclick="alert('hello world')">疯狂点我</button>
	</form>


	<form>
		<input list="cars">
		<datalist id="cars">
		<option value="Benz"></option>
		<option value="Audi"></option>
		<option value="BMW"></option>
		<option value="Ford"></option>
		</datalist>
		<input type="submit">
	</form>

	<form action="http://www.w3school.com.cn/demo/demo_form.asp" method="get">
		<input type="checkbox" name="vhicle" value="bike"> I have a bike!<br>
		<input type="checkbox" name="vhicle" value="car"> I have a car!
		<br>
		<input type="submit" name="">
	</form>

   <!-- E可以输入,其他字母不可以 -->
	<form action="http://www.w3school.com.cn/demo/demo_form.asp" method="get">
		<input type="number" name="quantity"min="1" max="5">
		<input type="submit" name="">
	</form>



	<form action="http://www.w3school.com.cn/demo/demo_form.asp" method="get">
		<input type="date" name="date" min="1997-01-01" max="2020-01-01">
		<input type="submit" name="">
	</form>


	<form action="http://www.w3school.com.cn/demo/demo_form.asp" method="get">
		<input type="color" name="color">
		<input type="submit" name="">
	</form>

	<form action="http://www.w3school.com.cn/demo/demo_form.asp" method="get">
		<input type="email" name="email">
		<input type="submit" name="">
	</form>


	<form action="http://www.w3school.com.cn/demo/demo_form.asp" method="get">
		FirstName<br>
	<!-- readonly 只读框 -->
		<input type="text" name="FirstName" value="lll" readonly>
	    <br>
	<!-- disabled 禁用框 -->
	<input type="text" name="FirstName" value="lll" disabled>
	<br>
	<br>
	<!-- 对输入的text做限制:最大输入长度 -->
	<input type="text" name="FirstName" maxlength="11">
	<br>
	</form>
</body>
</html>


猜你喜欢

转载自blog.csdn.net/qq_40409115/article/details/80645741