html的标记和标记中的属性

最新推荐文章于 2023-12-04 12:55:17 发布

aigo-2021

最新推荐文章于 2023-12-04 12:55:17 发布

阅读量1.1k

点赞数 1

分类专栏： javaWeb 文章标签： HTML

本文链接：https://blog.csdn.net/aigo_2021/article/details/123802757

版权

javaWeb 专栏收录该内容

33 篇文章 4 订阅

订阅专栏

1.超链接

<body >
    <!-- 超链接 一定要有href属性
        href可以是一个http的绝对地址，也可以是一个相对路径
    -->
    <a href="test2.html">百度</a>
    <!--
        target属性：打开资源的目标（当前窗口、新窗口、父窗口、指定窗口等）
        默认 target = "_self"
        target="_blank" : 在新窗口中打开
        target="另一个窗口的名字" : 在指定窗口中打开
        target="parent" : 在父窗口中打开
    -->
    <a href="test2.html" target="_blank">打开</a>
    <!-- 超链接失效，保留超链接的样式
        href="#"
        或
        href="javascript:void(0);"
    -->
    <a href="javascript:void(0);">确定</a>
</body>

<!doctype html>
<html>
    <head>
        <!-- <meta charset="GBK"> -->
    </head>
    <body>
        <a href="www.baidu.com">百度</a>
    </body>
</html>

2. 表格

<body >
	<!--表格宽度占80%，边框粗细为1，居中-->
	<table width="80%" border="1" align="center">
		<tr align="center"><!--行内容居中，tr：代表行，td：代表列-->
		<!--
			td标记中属性
			rowspan: td占几行的高度
			colspan: td占几列的宽度
		-->
			<td>1</td>
			<td>2</td>
			<td rowspan="2">3</td>
		</tr>
		<tr align="center">
			<td>4</td>
			<td>5</td>
		</tr>
		<tr align="center">
			<td colspan="3">6</td>
		</tr>
	</table>
</body>

3.表单：从显示的效果来看，加不加表单没有区别的。当将一些数据提交给后台的服务器程序，将数据放到表单中，提交表单就能提交这些数据了。表单包含了一些表单元素

表单元素：表单元素中的数据，通过提交表单才能交给后台服务器。

表单元素包括：输入框、下拉框、单选\多选框、文本域等。

（1）文本框：（type="text"）

    <body>
        <!-- 属性：
			id: 是这个标记在当前html文档中的唯一标识，可以编程通过id获得元素
			name: html文档中的元素的名字可以重复，表单元素在提交数据时，一定要有name
			maxlength:最多输入字符的个数
			value : 文本框的内容，即赋初值
			size:文本框的长度 （最好在css中设置的）
			placeholder：输入内容提示
			disabled：文本框不可使用的(不能输入，也不能提交)。这个属性不需要赋值，只要看有没有这个属性
			readonly：文本框只读（可以提交数据）。这个属性不需要赋值，只要看有没有这个属性
		-->
		<input type="text" id="text1" name="text1" maxlength="3" placeholder="请输入姓名">
    </body>

（2）密码框（type="password"）

和文本框属性是相同的

<body>
	<input type="password" maxlength="8" placeholder="请输入密码">
</body>

（3）单选框（type="radio"）

    <body>
        <!--
			同组的单选框 是互斥的
			单选框的name相同就是同组的
			属性：
			value：代表了单选框的值，只有选中的单选框的value才会提交给服务器
			checked: 如果单选框有checked属性，则被选中。
			也有disabled属性
		-->
		性别：<input type="radio" name="sex" value="1" > 男 <input type="radio" name="sex"value="0" > 女
    </body>

（4）多选框（type="checkbox"）

属性和单选框相同

<body>
    爱好：<input type="checkbox">足球 <input type="checkbox">篮球
		<input type="checkbox">羽毛球 <input type="checkbox">网球
</body>

（5）下拉框

select是下拉框标记，选项是option标记

    <body>
        <!--
			select的属性
				multiple:如果存在这个属性，下拉框就是多选的
			option的属性
				value: 选项的值
				selected: 是否选中，即默认选中
		-->
		学历：<select name="xl">
			<option value="">请选择</option>
			<option value="1">本科</option>
			<option value="2" selected>研究生</option>
			<option value="3">专科</option>
		</select>
    </body>

（6）隐藏项（type="hidden"）

有些要提交的给服务器的数据，不想显示，则隐藏起来。例如修改页面的id值

<input type="hidden" name="sno" value="101">

（7）表单按钮

提交按钮：如果按钮在一个表单中，点击这个按钮就会提交当前所在的表单

<input type="submit" value="保存">

重置按钮：如果按钮在一个表单中，点击这个按钮就会重置表单中所有表单元素的值

<input type="reset" value="重置">

普通按钮：与表单无关

<input type="button" value="确定">

aigo-2021

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
html的标记和标记中的属性

1.超链接<body >  <a href="test2.html">百度</a> <!-- target属性：打开资源的目标（当前窗口、新窗口、父窗口、指定窗口等）默认 target = "_self" target="_blank" : 在新窗
复制链接

扫一扫