HTML学习笔记（未完）

最新推荐文章于 2024-10-08 22:29:57 发布

Оrdsh1ne

最新推荐文章于 2024-10-08 22:29:57 发布

阅读量172

点赞数

分类专栏：学习笔记文章标签： html

本文链接：https://blog.csdn.net/curryzzb/article/details/115023250

版权

学习笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML

我的第一个程序：

<!DOCTYPE html>
<html>
<head>
    <title>第一个程序</title>
</head>
<body>
    <h1>Hello World!</h1>
    <p>228!</p>
</body>
</html>

基础标签

!DOCTYPE(声明)

<!DOCTYPE html> 是一个声明，表示该文档是由 HTML5 进行编写的;
必须是 HTML 文档的第一行。

html(限制文档起始点)

html 元素用于告诉告诉浏览器其自身是一个 HTML 文档；
<html> 与 </html> 标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。

head(头部)

<head> 标签用于定义文档的头部，它是所有头部元素的容器；

body(主体)

<body> 标签定义文档的主体；
body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）。

title(文档的标题)

<title> 标签用于定义文档的标题。

h1~h6（标题）

<h1> - <h6> 标签可定义标题；
<h1> 定义最大的标题。<h6> 定义最小的标题。

p（段落）

<p> 标签用于定义一个段落；
浏览器通常将其内容显示在浏览器窗口的标题栏或状态栏上；
<title> 标签必须位于 **<head>**标签内部。

a(超链接)

**<a>**标签用于定义超链接，超链接可以让用户从一个网页跳转到另一个网页；
标签最重要的属性是 href 属性，它指定了链接目标的 URL。

eg：

<a href="http://bbs.fishc.com/forum.php">传送门</a>

img（图片）

<img> 标签用于向网页中嵌入一幅图像；
**<img>**标签有两个必需的属性：src 属性和 alt 属性；

属性	值	描述
alt	text	指定图像无法显示时的替代文本。
src	URL	指定显示图像的 URL。
width	px(pixels)、%	设置图像的宽度（像素或百分比）。
height	px(pixels)、%	定义图像的高度（像素或百分比）。
ismap	URL	将图像定义为服务器端图像映射。
longdesc	URL	指定包含长的图像描述文档的 URL。
usemap	URL	将图像定义为客户器端图像映射。

无结束标签（实际上无内容，空标签）。

eg：

 <img src="../img/logo.png"  alt="鱼C-Logo" />

style：

**<style>**标签用于为 HTML 文档定义样式信息。
style 元素可以出现在 HTML 文档中的各个部分，一个文档可以包含多个 style 元素。

属性	值	描述
`media`	screen、tty、tv、projection、handheld、print、braille、aural、all	指定样式适用的媒体。
`scoped`	scoped	指定样式的作用范围（如果使用该属性，则样式仅仅应用到 style 元素的父元素及其子元素）。
`type`	text/css	指定样式的类型。

pre：定义预格式化的文本

code：定义计算机代码文本。

var：用于定义程序的变量。

使用时将变量用标签包裹

kbd：用于定义键盘输入文本。

samp：定义样本文本。

em：呈现为被强调的文本。

引用：

q：表示引用，适用于较短的文本，会自己增加双引号。
blockquote：大段文本的引用，浏览器使用缩进的形式区分。
dnf：标签表现定义中的术语。
address：定义文档或文章的作者/拥有者的联系信息。
ruby：定义注音符号。
- ruby 元素需要与 rt元素和 rp元素搭配使用。
rt：定义注音符号
rp：用于定义不支持 ruby 元素的浏览器所显示的内容
bdo：修改默认的文本方向。
属性值描述
dir ltr、rtl 定义文字的方向（ltr -> left to right；rtl -> right to left）

属性	值	描述
dir	ltr、rtl	定义文字的方向（ltr -> left to right；rtl -> right to left）

格式化：

strong：定义重要的文本，会有加粗的效果
b：表示粗体
i：表示倾斜
del(delete)：用于定义文已被删除的文本。与 ins 标签配合使用，来描述文档中的更新和修正
ins(insert)
s：表示不再正确，的内容，会增加删除线
u：效果为增加下划线
mark：用于定义带有标记的文本，默认为黄色高亮标记
sup：用于定义下标文本
sub：用于定义上标文本
small：将指定文本变小

列表：

无序列表：
- 定义：使用ul标签来定义，类表中的项使用li包裹
- 默认为各项前加 ·
- ```
<ul>
	<li>apple</li>
	<li>water</li>
</ul>
```

有序列表：

定义：使用ol标签来定义,类表中的项使用li包裹
默认为各项前加 1.~~
属性值描述
reversed reversed 规定列表顺序为降序。(9, 8, 7, …)
start number 规定有序列表的起始值。
type 1、A、a、I、i 规定在列表中使用的标记类型。

属性	值	描述
reversed	reversed	规定列表顺序为降序。(9, 8, 7, …)
start	number	规定有序列表的起始值。
type	1、A、a、I、i	规定在列表中使用的标记类型。

<ol>
        <li>咖啡</li>
        <li>牛奶</li>
        <li>茶</li>
    </ol>
    <ol start="50">
        <li>咖啡</li>
        <li>牛奶</li>
        <li>茶</li>
    </ol>
    <ol start="10" reversed type="I">
        <li>咖啡</li>
        <li>牛奶</li>
        <li>茶</li>
    </ol>

表格：

定义标签：
- table：用于定义一个表格
- tr：table row，定义行
- th：table header cell，定义表头单元格
- td：table data cell，定义数据单元格

<table>
	<tr>    <!--定义第一行，元素用th包裹，表示表头-->
		<th>姓名：</th>  
		<th>年龄：</th>
	</tr>
	<tr>    <!--定义第二行，元素用td包裹，表示数据值-->
		<td>zzb</td>
		<td>19</td>
	</tr>
</table>

给表格添加边框：
- 增加css样式的border属性定义，
- ```
<style>
	table {
	border:1px solid black; /* 边框像素为1px，直线，黑色 */
	}
</style>
```
- border-collapse：可以合并边框
- caption：定义表格标题，通常这个标题会被居中于表格之上。
- padding属性可以调成单元格间距
规划表格：

thead 元素应该与和元素结合起来使用。
- thead：定义表格的表头。
- tbody：用于组合 HTML 表格的主体内容。
- tfoot：定义表格的页脚（脚注或表注）。加在table标签的最后。
单元格合并：
- colspan元素，横向合并单元格
```
<td colspan="4">1234</td> 
```
- rowspan元素，纵向合并单元格
- 两个元素的值表示跨越的格数。
- colgroup：<colgroup> 标签只能在table元素中使用。
- col：有span属性，表示跨几列

表单：

表单是HTML获取用户输入的手段。
使用form标签包裹，form标签用于为用户输入创建 HTML 表单。用于向服务器传输数据。
action属性：值为URL，规定当提交表单时向何处发送表单数据。
method属性：指定提交表单的方法（get，post）
autocomplete属性：设置自动填充，将值设置为off/on，可以关闭/打开自动填充。
target=“_blank”，会在新窗口弹出回复。

自动聚焦：autofocus，刷新之后光标会聚焦在这里。

<form action="welcome.php" method="get" autocomplete="off">
	账号：<input type="text" name="name" autocomplete="on"><br>
	密码：<input type="password" name="password">
</form>

button标签
禁用属性：disabled属性，可以在button，input标签中使用，起到禁用的作用，不会提交。
禁止修改：readonly属性，起到不可修改的作用，但仍会提交。
以上两个属性不需要值就可以生效。

label标签：隐式关联

<label> 标签为 input 元素定义标注（标记）。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。

fieldset：将表单内容的一部分打包

默认会增加黑色边框将对对应划分的部分框起来。
<legend> 标签用于为 fieldset 元素定义说明文字。

select标签和option标签

select：用于创建单选或多选菜单。name属性，指定下拉的菜单表的名称。
option：用于定义列表中的可用选项。
optgroup标签：将菜单中的选项分组

<select name="sex">
    <optgroup label="男"> <!--这里的label属性的值为该分组的名字-->
		<option value="male">男</option><!--选择后会将值返给select的name属性-->
    </optgroup>
    <optgroup label="女">
		<option value="female">女</option>
    </optgroup>
</select>

input标签：没有闭合标签

常与label属性关联
value属性：其值是input标签显示的内容。
type属性（值）：
- name ：在表单提交后引用表单数据，表单能在提交表单时传递该值
- submit：提交
- button：效果与button标签一样，input的值value为按钮显示的文字。
- reset：
- radio：单选框，互斥效果，互斥的元素的name属性值必须相同才能互斥。
- checkbox：复选框。
- 时间和日期：
  - time
  - date：包括年，月，日
  - month：年和月
  - week：年和星期
  - datetime-local：获取本地的时间信息
- search：搜索框，具体的搜索行为还是需要自己定义
- color：颜色选择框
- image：图片，需增加src和alt属性，src为图片的URL，alt则是代替文本
- hidden：隐藏input元素
- file：上传文件，必须将表单的提交属性设置为post，还需要指定表单的enctype属性，enctype属性规定了发送前的编码规则
  - entype属性：
    - 默认值为
```
enctype=“application/x-www-form-urlencoded”
```
    - 传输文件时需要将值修改为
```
enctype="multipart/form-data"
```
  - accept属性可以规定接收的文件类型。
  - multiple属性，通过该属性就可以同时上传多个文件
  - 文件上传限制大小：
```
<input type="hidden" name="MAX_FILE_SIZE" value="1024">
<label><input type="file" name="file" accept="image/*"></label>
```
- number：限制输入的必须是数字。
- 限定数字输入的范围：min，max和step（调整步调）
```
<label>年龄：<input type="number" name="age" min="0" max="120" step="1"></label>
```
- range：数值滚动条。
- email：邮箱
- tel：电话，可以使用正则表达式去规定格式
- url：网址

placeholder属性：

<label>年龄：<input type="number" name="age" min="0" max="120" step="1" placeholder="0~120"></label>

required属性：设定后用户必须要填写后才可以提交

<label>年龄：<input type="number" name="age" min="0" max="120" step="1" placeholder="0~120" required></label>

size属性：设置输入框的显示长度
maxlength属性：限制输入的最大长度

list 属性datalist元素：

功能实现输入框可以选择

<form>
    <label><input type="url" name="url" required size="30" list="urllist"></label> <!--list的值为datalist的id值-->
    <input type="submit" value="提交">
</form>
<datalist id="urllist"> <!--list通过这个id来关联-->
    <option value="www.baidu.com">百度</option>
    <option value="www.hao123.com">好213</option>
</datalist>

output：将计算结果输出显示（比如执行脚本的输出）。

textarea：接收多行文本输入

rows和cols指定行数和列数,值为字符数

<textarea name="satsth" rows="5" cols="30"><!--rows是行数， cols是列数-->
    宝剑锋从磨砺出，梅花香自苦寒来~
</textarea>