HTML语法(二)

最新推荐文章于 2024-04-16 22:49:44 发布

Zero. J

最新推荐文章于 2024-04-16 22:49:44 发布

阅读量313

点赞数

分类专栏： Java EE 文章标签： html

本文链接：https://blog.csdn.net/weixin_44161038/article/details/105291496

版权

Java EE 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML标签

1.行内标签和块级标签

<span>：行内标签，文本信息在一行展示，内敛标签，默认无样式。
<div>：块级标签，每一个<div><div/>占满一行，默认无样式。
结合CSS控制其样式。

2.语义化标签：为了提高程序的可读性

<header>：页眉。
<footer>：页脚。

3.表格标签

<table>：定义表格。
	<tr>：定义行。
	<td>：定义单元格。
	<th>：定义表头单元格。

<table>中的属性：
	 width：宽度
	 border：边框
	 cellpadding：定义内容和单元格的距离
	 cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
	 bgcolor：背景色
	 align：对齐方式

<tr>中的属性:
	 bgcolor：背景色
	 align：对齐方式

<td><th>中的属性：
	 colspan：合并列
	 rowspan：合并行
	
<caption>：表格标题，表格里面定义
	<thead>：表示表格的头部分
	<tbody>：表示表格的体部分
	<tfoot>：表示表格的脚部分
	（无样式，和语义化标签类似）

案例一：个人博客网站

	1.使用table来完成页面布局，最外层；
	2.如果某一行只有一个单元格，则使用
		<tr>
			<td>
			</td>
		</tr>
	3.如果一行有多个单元格，使用表格嵌套
		<tr>
				<td>
					<table></table>
				</td>
			</tr>

代码示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Ronin的博客</title>
</head>
<body>
<table width="100%" align="center">
    <tr>
        <td>
            <img src="../photo/博客素材/g1.jpg" width="100%">
        </td>
    </tr>
    <tr>
        <td>
            <table width="100%" align="center">
                <tr>
                    <td><img src="../photo/博客素材/g2.jpg"/></td>
                    <td><img src="../photo/博客素材/g3.jpg"/></td>
                </tr>
                <tr>
                    <td><img src="../photo/博客素材/g5.jpg"/></td>
                    <td><img src="../photo/博客素材/g4.jpg"/></td>
                </tr>
                <tr>
                    <td><img src="../photo/博客素材/g6.jpg"/></td>
                    <td><img src="../photo/博客素材/g7.jpg"/></td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</body>

</html>

4.表单标签
表单:用于采集用户输入数据的，和服务器进行交互。

<form>
	用户名：<input><br/>
	密码：<input>
</form>

<form>：用于定义表单，定义的是一个范围，代表采集用户数据的范围。
	属性：
		action：指定提交数据的URL。
		method：指定的提交方式，共有7种，主要讲两种
			1）不安全	get 请求的参数会在地址栏中显示，且参数大小有限制
			2）安全	    post	请求参数封装在请求体中，且参数大小没限制

<input>：输入标签，输入类型是由类型属性（type）定义的，可以通过type属性值，改变元素展示的样式
	属性：	
		name属性：表单中属性想要被提交，必须指定其name属性。
		type属性：
			  text 文本输入框，type的默认值；
			  password 密码输入框；
			  		1）placeholder 指定输入框的提示信息，placeholder="请输入密码"
			  radio 单选框 
			  		1）要想让多个单选框实现单选效果，每个单选框的name属性值必须一样；
			  		2）一般会给每个单选框提供value属性，指定其被选中所提交的值；
			  		3）checked属性，可以指定默认值。
			  checkbox 复选框
			  		1）一般会给每个复选框提供value属性，指定其被选中所提交的值；
			  		2）checked属性，可以指定默认值。
			  file 文件选择框；
			  hidden 隐藏域，用于提交一些信息； 		
			  color 取色器；
			  date 日期，另一种形式 datetime-local；
			  email 邮箱，这里会使用正则验证邮箱格式；
			  number 数字字段输入框
			  按钮：
			  		1）submit提交按钮  
			  		2）button 普通按钮  
			  		3）image 图片提交按钮，src属性指定图片的路径地址		  

<label>：元素定义标注，可以指定输入项的文字描述信息
	属性：
		for属性与<input>标签的id属性对应，label 元素不会向用户呈现任何特殊效果。
		不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。
		就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<select>下拉列表，<option>列表项
	<select name="city">
		<option>--请选择--</option>
		<option>北京</option>
		<option>上海</option>
		<option>西安</option>
	</select>

<textarea>文本域
	属性：
		rows 行数 
		cols 列数（每行字数）