导图社区 HTML 基础知识整理笔记
内容包含HTML,css,JavaScript,http 等基础知识。
编辑于2020-09-08 11:47:28Web
HTML
html概述
超文本标记语言 (英语:Hypertext Markup Language,简称:HTML ) 是一种用来结构化 Web 网页及其内容的标记语言。网页内容可以是:一组段落、一个重点信息列表、也可以含有图片和数据表
基本结构
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>My test page</title> </head> <body> <p>This is my page</p> </body></html>
<head> 定义了文档的信息<title> 定义了文档的标题<base> 定义了页面链接标签的默认链接地址<link> 定义了一个文档和外部资源之间的关系<meta> 定义了HTML文档中的元数据<script> 定义了客户端的脚本文件<style> 定义了HTML文档的样式文件
<meta> 标签
<meta> 标签提供了元数据.元数据也不显示在页面上,但会被浏览器解析。
为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
为网页定义描述内容:
<meta name="description" content="免费 Web & 编程 教程">
定义网页作者:
<meta name="author" content="Runoob">
每30秒钟刷新当前页面:
<meta http-equiv="refresh" content="30">
增加自定义图标
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
基本标签
所谓语义化标签就是一种我们仅通过标签名就能判断出该标签内容的语义的标签
h1~h6
制作<h>标签的主要意义是告诉搜索引擎这个是一段文字的标题,起强调作用。
一般来说,<h1>用来修饰网页的主标题,<h2>表示一个段落的标题,<h3>表示段落的小节标题
一般来说,每个网页只能拥有一个<H1>标签
<h1>代表最重要的,<h6>代表相对最不重要的
<p>文字</p>
段落标签
<a href="#" target="_blank">这是会在新窗口打开的一个链接</a>
<a> 标签定义超链接
<img src="图片地址" alt="对图像的文本描述">
<img>:图像嵌入元素
<br>
换行
div
span
文本格式化标签
<small> 定义小号字
<b> 定义粗体文本
<em> 定义着重文字
<i> 定义斜体字
<strong> 定义加重语气
strong和em具备语义化,b和i不具备语义化
<sub> 定义下标字
<sup> 定义上标字
<ins> 定义下划线
<del> 定义删除字
列表
<ol type=" "> 定义有序列表
<ul> 定义无序列表
<li> 定义列表项
表格 <table>
<table border="1" cellspacing="2"> <olspan> 单元格跨两行</olspan> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table>
标签 描述 <table> 定义表格 <th> 定义表格的表头 <tr> 定义表格的行 <td> 定义表格单元 <caption> 定义表格标题 <colgroup> 定义表格列的组 <col> 定义用于表格列的属性 <thead> 定义表格的页眉 <tbody> 定义表格的主体 <tfoot> 定义表格的页脚
border="1"
边框
cellspacing="1"
单元格间距="1"
colspan="2"
单元格跨两行
<caption>表格标题</caption>
表单 <form>
<form> 定义供用户输入的表单 <input> 定义输入域 <textarea> 定义文本域 (一个多行的输入控件) <label> 定义了 <input> 元素的标签,一般为输入标题 <fieldset> 定义了一组相关的表单元素,并使用外框包含起来 <legend> 定义了 <fieldset> 元素的标题 <select> 定义了下拉选项列表 <optgroup> 定义选项组 <option> 定义下拉列表中的选项 <button> 定义一个点击按钮 <datalist>New 指定一个预先定义的输入控件选项列表 <keygen>New 定义了表单的密钥对生成器字段 <output>New 定义一个计算结果
<form action="提交地址" method="提交方式">
<form action="https://www.baidu.com/s?" method="get" > <input type="text" name="wd"> <input type="submit" value="搜索" /> </form>
type 属性
传统类型
text 定义单行的输入字段,用户可在其中输入文本
password 定义密码字段。该字段中的字符被掩码
file 定义输入字段和 "浏览"按钮,供文件上传
radio 定义单选按钮
checkbox 定义复选框
hidden 定义隐藏的输入字段
button 定义可点击按钮(多数情况下,用于通过JavaScript启动脚本)
image 定义图像形式的提交按钮
reset 定义重置按钮。重置按钮会清除表单中的所有数据
submit 定义提交按钮。提交按钮会把表单数据发送到服务器
新增类型
color 定义调色板
tel 定义包含电话号码的输入域
<form action="#"> <input type="tel" placeholder="请输入11位手机号码" pattern="\d{11}"> <input type="submit"> </form>
email 定义包含email地址的输入域
url 定义包含URL地址的输入域
search 定义搜索域
number 定义包含数值的输入域
<input type="number" min="0" max="10" step="0.5" value="6" />
range 定义包含一定范围内数字值的输入域
<input type="range" min="0" max="10" step="0.5" value="6" />
max 规定允许的最大值 min 规定允许的最小值 step 规定合法的数字间隔 value 规定默认值
date 定义选取日、月、年的输入域
month 定义选取月、年的输入域
week 定义选取周、年的输入域
time 定义选取时,分的输入域
datetime 定义选取时间、日 月、年的输入域(UTC时间)
datatime-local 定义选取时间、日 月、年的输入域(本地时间)
value属性格式
date YYYY-MM-DD time hh:mm:ss.s datetime YYYY-MM-DDThh:mm:ss:sZ datetime-local YYYY-MM-DDThh:mm:ss:s month YYYY-MM week YYYY-Wnn
YYYY=年 MM=月 DD=日 hh=小时 mm=分钟 ss=秒 s=0.1秒 T=日期与时间之间的分隔符 Z=Zulu时间的时区 Wnn=W周数,从1月的第一周开始是1,直到52
css
JavaScript
主题
主题
主题