重学全栈笔记 — 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是设置此文本框 必须 填写的作用
label
标签<label> xx </label> <button> xx </button>
使得两个标签进行绑定
示例:
<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 得到所有主流浏览器的支持