前端学习笔记HTML
结构标签
!DOCTYPE HTML
位于HTML文档的第一行，他表示html使用哪一种规范来编码
html
告知此文档是一个html文档
- 每个html文档中只能有一对html标签，包含这文档的开始和结束，在它们之间包含这头部（head）和主体（body）
head
文档的头部标签
- 它是所有头部标签的容器，比如可以包含 meta、title、base 等标签
meta
用来设置网页的字符编码，一般是UTF-8
title
用来设置网页的标题
<head>
<meta charset="UIF-8">
<title>这是网页的标题</title>
</head>
link
链接元素
- 链接css文件 rel="stylesheet"不能删除
- herf 需要链接的CSS文件路径
- link的type默认值是text/css，可以省略不写
<link rel="stylesheet" herf="css/csstype.css" type="text/css">
body
网页中显示的所有元素都是他的后代元素，包含网页的所有内容
属性
title
鼠标移动到元素上时显示详细信息
文本标签
h
- 标题标签，从h1到h6
- h1标签最大，也是网页中最重要的标签，搜索引擎搜索是看中h1标签
- 一个网页最好只有一个h1标签
<body>
<h1>我是h1标签</h1>
</body>
p
表示一个段落
strong
表示元素强调
<body>
<p>我在这里是表示<strong>强调<strong>的</p>
</body>
pre
表示原文本格式不被改变，如有5个空格，有回车，都不会进行改变
code
表示代码格式，说明这一段是代码
br
表示换行
img
图片标签，用于展示图片
必要属性
- src
- 显示图片的URL
- alt
- 文本的替代文字（当图片未能成功加载出来时）
<body>
<img src="https://www.w3school.com.cn/i/eg_tulip.jpg" alt="我是占位字符">
</body>
a
超链接标签
- 未被访问的a标签显示为蓝色，被访问的a标签显示为紫色
- 默认的target是_self（覆盖当前窗口局打开）
- 可以通过#name方式来定位锚点，若单独为#则会回到网页顶部
必要属性
- herf 用来显示跳转的链接（可以网页链接、图片链接、邮件链接、下载链接等）
常用属性
- target
- _self 在本页跳转
- _blank 在新界面打开
- _top 在最顶层的界面打开
- _parent 在父界面打开
<body>
<a herf="#two"><a>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p name="two">我是段落4</p>
<p>我是段落5</p>
<p>我是段落6</p>
<p>我是段落7</p>
......
<p>我是段落30</p>
<a herf="#">回到顶部</a>
</body>
iframe
用于在网页中嵌套其他链接
必要属性
- src 需要显示的URL
- frameborder 是否显示边框
<body>
<iframe src="http://www.baidu.com" frameborder = "1"></iframe>
</body>
base
页面上所有链接的默认地址，包括 a、img、link、form 标签中的 URL。
必要元素
- herf 链接地址
div
一般作为网页的父容器，把其他元素包住，代表一个整体
- 用于把网页分割为多个独立部分
列表
有序列表 (ol、li)
有序列表，直接子元素只能是li
<ol>
<li>奥迪A6</li>
<li>奥迪A6</li>
<li>奥迪A6</li>
</ol>
无序列表（ul、li）
无序列表，直接子元素只能是li
<ul>
<li>奥迪A6</li>
<li>奥迪A6</li>
<li>奥迪A6</li>
</ul>
相关样式
- list-style-type 改变前面圆点样式
定义列表 (dl、dt、dd)
定义列表，直接子元素只能是dt、dd
- dt （列表中每一项的项目名）
- dd （列表中每一项的具体描述，是对dt的描述、解释、补充）
- 一个dt后面一般紧跟着1个或多个dd
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
表格 （table tr td）
表格 由tr td组成
- caption 表格头部标签
table常用属性
一般不使用，用css代替
- border 边框的宽度
- cellpadding 单元格内部的间距
- cellspacing 单元格之间的间距
- width 表格的宽度
- align 表格的水平对齐方式，left center right
tr常用属性
一般不使用，用css代替
- valign 单元格垂直对齐方式 top middle bottom baseline
- align 单元格水平对齐方式 left center right
td常用属性
一般不使用，用css代替
- valign 单元格垂直对齐方式 top middle bottom baseline
- align 单元格水平对齐方式 left center right
- width 单元格的宽度
- height 单元格的高度
- rowspan 单元格可跨越的行数 （合并单元格）
- colspan 单元格可跨越的列数 （合并单元格）
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
表单
form
标签用于为用户输入创建 HTML 表单。
表单能够包含 input元素，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
表单用于向服务器传输数据。
常用属性
- action 用于提交表单数据请求的URL
- method 请求方式（get、post）
- target 跳转方式（参考a标签的target）
- enctype 规定了在向服务器发送表单数据之前如何对数据进行编码
有3中取值
- application/x-www-form-urlencoded （默认编码方式）
- multipart/form-data （文件上传时必须使用这个值，并且method必须为post）
- text/plain （普通文本传输）
- accept-charset （规定表单提交时使用的字符编码）
input
用于收集用户信息
根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
常用属性
- type input的类型
- text：文本输入框 （明文）
- password：文本输入框 （密文）
- radio：单选框
- checkbox：复选框
- button：按钮
- reset：重置
- submit：提交表单数据给服务器
- file：文件上传
- hidden：隐藏域
- maxlength 允许输入的最大字数
- placeholder 占位字符
- readonly 只读
- disabled 禁用
- checked 默认选中
当type为radio和checkbox时才可以用
- autofocus 当页面加载时自动聚焦
- name 名字
提交数据给服务器时可以区分数据类型
- value 取值
- form 设置所属的form元素（填写form元素的id）
一但使用了此属性，input元素即使不写在form元素内部，它的数据也可以提交到服务器
textarea
多行文本输入框
文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。
select、option
下拉选择框
button
按钮
和input的按钮基本没有区别
label
表单元素标题 通过id来关联input
fieldset
表单元素组
<form>
<fieldset>
<legend>health information</legend>
height: <input type="text" />
weight: <input type="text" />
</fieldset>
</form>
legend
fieldset的标题
<legend>我是标题</legend>
浙公网安备 33010602011771号