HTML基础

HTML语法基础

一、HTML信息呈现元素

1.文本控制元素

<p></p>(段落)
<!--paragraph，创建一个段落-->


<br/>(折行)
<!--line break，强制换行，一个段落标记等价于两个折行-->


<hr/>(水平线)
<!--horizontal，创建一条水平线>

2.表格相关元素

<table></table>(表格)
<!--其他的表格标签必须嵌入其中才有效-->
<!--常用属性：align(对齐，left,center,right),border(表格边框大小，取值数字，如border="1")-->


<caption></caption>(表格标题)
<!--每个表格只能定义一个标题-->


<tr></tr>(表格的行)
<!--table row-->


<td></td>(表格数据)
<!--table data,内容可以包括文本、图片、列表、段落、表单、水平线、表格等。每行被分割为若干个单元格，需要嵌套在<tr></tr>中-->


<th></th>(表格的表头)
<!--table heading,嵌套在<tr></tr>标签内部-->

<!DOCTYPE html>
<html>
	<head>
		<title>无边框的表格</title>
		<meta charset="UTF-8">
		<meta name="viewport"content="width=device-width,initial-scale=1.0">
	</head>
	<body>
		<table>
			<caption>无边框的2行2列表格</caption>
			<tr>
				<td>第一行，第一列</td>
				<td>第一行，第二列</td>
			</tr>
			<tr>
				<td>第二行，第一列</td>
				<td>第二行，第二列</td>
			</tr>
		</table>
	</body>
</html>

3.超链接元素

<a href="url">显示在页面上的文字</a>
<!--添加target属性可以控制打开的方式，值有_blank,_parent,_self,_top,最常用的是_blank-->

<!DOCTYPE html>
<html>
	<head>
		<title>超链接示例</title>
		<meta charset="UTF-8">
		<meta name="viewport"content="width=device-width,initial-scale=1.0">
	</head>
	<body>
		<a href="https://www.yzu.edu.cn">点此到达扬大首页</a>
	</body>
</html>

二、侧重于引导用户提交信息的HTML元素

1.form元素

表示表单，是其他表单元素的根元素

<!--已知提交的信息要由mytest文件夹里的handle.jsp处理-->
<form action="mytest/handle.jsp">
    ...
</form>

form标签的method属性可以曲两个值：get和post。get传输的数据量有限制，且提交的数据会在浏览器地址栏以明文形式显示出来；post理论上不限制数据量大小，并且安全性也更高。属性的默认值为get。

2.input元素

用来引导用户输入信息

<input type="类别" name="名字" value="初值"/>

type属性取值集合固定，具体如下：

<!--text(文本字段)-->
<input type="text" name="textfield" value="请在此输入"/>


<!--password(密码字段)-->
<!--与文本字段相似，输入的内容显示为"···"-->
<input type="password" name="mypassword"/>


<!--radio(单选按钮)-->
<!--例如性别的单选-->
<input type="radio" name="gender" value="男"/>male
<input type="radio" name="gender" value="女"/>female
<!--注意name属性的值应保持一致，value对应的是提交的数据，male和female对应的是网页上显示的数据-->
<!--可以增加checked="checked"或者checked，该属性表示预选这个数据-->


<!--checkbox(复选框)>
<!--与单选框类似-->
<input type="checkbox" name="fruit" value="苹果" checked/>苹果
<input type="checkbox" name="fruit" value="香蕉" checked/>香蕉
<input type="checkbox" name="fruit" value="橘子" />橘子


<!--file(文本域)-->
<!--主要用于文件上传-->
<input type="file" name="attachfile" />


<!--submit(提交按钮)-->
<!--name属性通常不设置，value属性的值会显示在按钮上-->
<input type="submit" value="提交" />


<!--reset(重置按钮)-->
<!--name属性通常不设置，value属性的值会显示在按钮上-->
<input type="reset" value="重置" />


<!--button(普通按钮)-->
<--结合脚本使用-->
<input type="button" value="一个按钮" />


<!--image(图片按钮)-->
<input type="image" src="xx.png" alt="图片按钮"/>


<!--hidden(隐藏域)-->
<input type="hidden" name="hiddenfield" value="somevalue"/>

3.textarea元素

用于多行文本输入，通过rows和cols属性控制行列

<textarea name="introduction" rows="2" cols="15">
    这个人很懒，什么也没有留下
</textarea>

4.select元素

单选或者多选的下拉列表

<select name="birth_place" size="1">
    <option value="H">黑龙江</option>
    <option value="J">吉林</option>
    <option value="L" selected="selected">辽宁</option>
</selected>
<!--辽宁默认选中-->

posted @ 2021-10-19 11:39 cijing 阅读(72) 评论(0) 收藏举报

刷新页面返回顶部

cijing