重学全栈笔记 --- html（下）

最新推荐文章于 2024-06-13 11:24:43 发布

quokka56

最新推荐文章于 2024-06-13 11:24:43 发布

阅读量771

点赞数 19

文章标签：笔记 html 前端

本文链接：https://blog.csdn.net/quokka56/article/details/135908112

版权

重学全栈笔记 — html（下）

ps：主页（上）已发

表格

表格（`<table>`,`<thead>`,`<tbody>`,`<tfood>`,`<th>`,`<tr>`,`<td>`）

<table>
		<thead>
				<tr>
						<th>列标题1</th>
						<th>列标题2</th>
				</tr>
		</thead>
		<tbody>
				<tr>
						<td>行1，列1</td>
						<td>行1，列2</td>
				</tr>
				<tr>
						<td>行2，列1</td>
						<td>行2，列2</td>
				</tr>
		</tbody>
		<tfoot>
				<tr>
						<th>列1</th>
						<th>列2</th>
				</tr>
		</tfoot>
</table>

<tfoot>元素 内部必须 包含 一个或多个 <tr>标记。

示例展示：

列标题1	列标题2
行1，列1	行1，列2
行2，列1	行2，列2
列1	列2

表格标题

表格的标题很简单，可以使用 <caption> </caption>双标签，进行标题的标注

示例展示：

列标题1 列标题2
行1，列1 行1，列2
行2，列1 行2，列2
列1 列2

表格合并属性（rowspan纵向合并、colspan横向合并、cellspacing、cellpadding）

示例：

横向合并: <td colspan="2">123</td>
纵向合并: <td rowspan="2">123</td>
单元格之间的距离：<table cellspacing="10">
单元格内容与空白之间的距离： <table cellpadding="10">

列表

无序列表 ul （list-style-type属性）

ps：list-style-type属性参数值可以改变 ul 前面的样式，例如：disc（小正方形）、circle（空心圆）等……。

代码：
<ul>
		<li> 11 </li>
		<li> 22 </li>
</ul>
示例：

11
22

有需列表 ol (start属性、type属性)

ps：
start属性：起始值、
type属性：可以更改序列的样式，参考值如：“A”、“a”、"I"等……。

代码：
<ol>
		<li> 11 </li>
		<li> 22 </li>
</ol>
示例：

11
22

区块

<div>

是 HTML内的元素容器，一个块级元素

<span>

行内元素，没有什么特定的含义，可以作为文本容器使用

表单

表单的作用

表单的作用是用来收集用户的信息，产生交互发送至服务端

表单基本用法：（form表单、radio单选框、checkbox复选框、select下拉列表、submit提交）

ps: required是设置此文本框必须填写的作用

示例：

<form  action="定义目标 URL"  method="表单提交的方法">
		<label for = "name"> 姓名 </label>
		<input type = "text"  id="name"  name="name"  required>
		
	    <!-- 单选按钮 -->
   	 <label>性别:</label>
  	  <input type="radio" id="male" name="gender" value="male" checked>
       <label for="male">男</label>
  	  <input type="radio" id="female" name="gender" value="female">
   	 <label for="female">女</label>
   	 
	<!-- 复选框 -->
  	  <input type="checkbox" id="subscribe" name="subscribe" checked>
 	  <label for="subscribe">订阅推送信息</label>

   	 <!-- 下拉列表 -->
   		 <label for="country">国家:</label>
    	<select id="country" name="country">
        <option value="cn">CN</option>
        <option value="usa">USA</option>
        <option value="uk">UK</option>
   		 </select>

    <!-- 提交按钮 -->
    <input type="submit" value="提交">
</form>

还有很多可以测试一下，例如<textarea>、<optgroup>等……。

表单提交的方法（post方法、get方法）

post 方法：指的是 HTTP POST方法，表单数据会包含在表单体内然后发给服务器。用> 于提交敏感数据，如账户名、密码等……。

get 方法：默认值，指的是HTTP GET方法，表单数据会附加在 action 属性的 URL 中，
并以? 作为分隔符，一般用于不敏感的数据传递，比如分页等……。

框架（iframe）

框架的作用

框架的作用是可以在同一个浏览器窗口中显示不止一个页面。

框架的使用

<iframe src= "URL" width="400" height="300" frameborder="0">

框架的示例

点击在此页面中展示一个定义长宽的页面

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p>
		<a href="https://www.runoob.com" target="iframe_a" rel="noopener">RUNOOB.COM</a>
</p>

颜色

1. rgba展示

rgba( 0,0,0,0.3) 前三个是“rgb”，正常的黄绿蓝三色，最后的“a”指代的是透明度，满为“1”，“rgb”的满为：“255”

2. 16进制展示（三位16进制颜色值、六位16进制颜色值）

#00FFFF 蓝色，例如： #000000 黑色（六位16进制颜色值），可以简写为“#000”（三位16进制颜色值）

脚本

脚本的简介示例（script、noscript）

<script> </script> 里面存放 JavaScript 等客户端脚本，也可以通过 src 属性指向外部脚本文件
<noscript> </noscript> 定义了不支持脚本浏览器输出的文本

文本的空格

`$nbsp`

示例：无法展示，相当于空格的样式

XHTML

个人总结 ps: ：总之一点，XHTML是强制性必须合理化、规范化的 HTML

XHTML 指的是可扩展超文本标记语言
XHTML 与 HTML 4.01 几乎是相同的
XHTML 是更严格更纯净的 HTML 版本
XHTML 是以 XML 应用的方式定义的 HTML
XHTML 是 2001 年 1 月发布的 W3C 推荐标准
XHTML 得到所有主流浏览器的支持