html学习打卡楼

喵丞相兮

于 2022-05-17 20:50:33 发布

分类专栏：学习打卡楼第二阶段：为期3个月文章标签： html 学习

本文链接：https://blog.csdn.net/qq_29429607/article/details/124789472

版权

学习打卡楼第二阶段：为期3个月专栏收录该内容

1 篇文章 0 订阅

订阅专栏

2022年5月15日

背景颜色与背景图：<body>的属性→<body bgcolor = "red" background = "相对路径">

表格：

表：<table> 属性：划线border；长宽：width、height→<table border = 1px width = 50%>

行：<tr> 格：<td>

格居中：<th>

合并单元格：<td>的属性rowspan、colspan→<td roespan = "3">、<td colspan = "5">

其他标签：<thead>、<tbody>、<tfoot>

<html>
    <head></head>
    <body border = 1px width = 50%>
        <tr>
            <td>第一行第一格</td>
            <td>第一行第二格</td>
        </tr>
        <tr>
            <th>第二行第一格：居中</th>
            <td>第二行第二格</td>
        </tr>
        <tr>
            <td>第三行第一格</td>
            <td rowspan = 2>第三/四行第二格</td>
        </tr>
        <tr>
            <th>第四行第一格：居中</th>
        </tr>
        <tr>
            <td colspan = 2>第五行第一/二格</td>
        </tr>
    </body>
</html>

图片：<img src = "相对路径"> 属性：width/height→<img src = "相对路径" width = 120px>

超链接：<a href = "地址" ></a> 属性：target→取值：_blank、_self、_top、_parent

<html>
	<head>
		<title></title>
	</head>
	<body bgcolor = gray>
		<a href = "https://www.csdn.net/">CSDN</a>
	</body>
</html>

列表：

无序列表：<ul><li> 属性：type→取值：circle、square、disc→<ul type = disc>

有序列表：<ol><li> 属性：type→取值：1/A/a/Ⅰ→<ol type = disc>

2022年5月17日

表单：

请求：request

响应：response

请求格式：url?name=value&name=value

post：在url提交时，不显示name=value
get：在url提交时，显示name=value

<html>
	<head>
		<meta charset="utf-8">
		<title>喵兮的猫咪信息汇总</title>
	</head>
	<body>
		<form action = "http://localhost:8080/cat/save/" method = "get">
			猫咪信息文件<input type = "file" ><br>
			猫咪品种<input type = "hidden" name = "品种" value = "橘猫"/><br>
			猫咪品种<input type = "text" name = "品种" value = "美短" readonly/><br>
			猫咪品种<input type = "text" name = "品种" value = "美短" disabled/><br>
			
			猫咪姓名<input type = "text" name = "name" maxlength = "2" /><br>
			撸猫密码<input type = "password" name = "pwd" /><br>
			猫咪性别
			<input type = "radio" name = "gender" checked />公猫
			&nbsp;&nbsp;
			<input type = "radio" name = "gender" />母猫<br>
			猫咪特征
			<select name = "characteristic" multiple = "multiple" size = 4>
				<option value = "longer" selected />长毛
				<option value = "shorter" />短毛
				<option value = "big" selected />大型
				<option value = "litter" />小型
				<option value = "changtui" selected />长腿
				<option value = "duantui" />短腿
				<option value = "cute" selected />淘气
				<option value = "smart" />乖巧
			</select>
			<br>
			主人描述
			<textarea name = "describe" rows = 10 cols = 40 maxlength="2000"></textarea>
			<br>
			<input type = "submit" value = "提交">
			&nbsp;&nbsp;
			<input type = "reset" value = "重置">
		</form>
	</body>
</html>

元素的id属性：每个元素都有id属性，唯一不可重复

DOM树

图层：<div>、<span>→布局

<div>：默认独占一行，842×21px

<span>：不会独占一行