html基础笔记与html5代码展示
HTML 学习
一 、基本标签
VSCode 默认快捷键
!自动生成代码片段
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>
1.1 文档声明 Doctype
< !docType html >
1.2 html标签对 html
其中lang=“zh-CN” 表示中文
1.3 head页头
| head里标签 | 解释 |
|---|---|
| title | 标题 |
| meta | 为搜索引擎提供信息 |
| link | 引入外部css文件,js文件和设置logo rel=“stylesheet” type=“text/css” href=“mystyle.css” |
| style | css样式 |
| script | js代码 |
meta中的name属性
| 属性值name | 说明content |
|---|---|
| keywords | 网页的关键字(可多个) |
| description | 网页的描述 |
| author | 网页的作者 |
| copyright | 版权信息 |
| viewport | 网页视口大小比例 |
meta中的http-equiv属性
<!--定义网页所使用的编码-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!--简写 （中文编码）-->
<meta charset="utf-8" />
定义网页自动刷新跳转
<!--表示当前页面6秒后跳转百度页面-->
<meta http-equiv="refresh" content="6;url=http://www.baidu.com"/>
<!--30秒刷新当前页面-->
<meta http-equiv="refresh" content="30">
1.4 bod页身
注释 快捷键 ctrl+/
二、文本 text
2.1 基本标签 (Basic Tags)
| 标签 | 说明 |
|---|---|
| h | 标题1~6 |
| p | 段落（段落与段落有一定间距）paragraph 会自动换行 |
| br | 换行（不会有间距） |
| hr | 水平线 |
| div | 盒子标签（一行只能放一个大盒子）（小程序view） |
| span | 盒子标签（一行可以放多个小盒子） |
2.2 文本格式化 （Formatting）
| 标签 | 说明 |
|---|---|
| strong | 粗体 |
| em | 斜体 |
| sup、sub | 上标 和下标 |
| s、u | 中划线和下划线 |
| big、small | 大字号和小字号 |
标签可分为为 一般标签 和 自闭标签
< meta /> 、< link/> 、< br />、< hr />、< img />、< input />
也可以分为 块元素 和 行内元素
块元素（block）：独占一行，可容纳 块元素和行内元素 如div
行内元素（inline）：可同一行，不可容纳块元素，如span
2.3 特殊符号
空格符  ；(记住即可) 牛逼色胚
- 易输入的
| 特殊符号 | 说明 | 代码; |
|---|---|---|
"
|
双引号（英文） | " |
‘
|
左单引号 | &lsquo |
’
|
右单引号 | &rsquo |
×
|
乘号 | × |
÷
|
除号 | ÷ |
>
|
大于号 | > |
<
|
小于号 | < |
&
|
“与”符号 | & |
—
|
长破折号 | &mdash |
| | | 竖线 | | |
- 难输入的
| 特殊符号 | 说明 | 代码; |
|---|---|---|
§
|
分节符 | § |
©
|
版权符 | © |
®
|
注册商标 | ® |
™
|
商标 | &trade |
€
|
欧元 | &euro |
£
|
英镑 | £ |
¥
|
日元 | ¥ |
°
|
度 | ° |
三、列表 list
| 标签 | 说明 |
|---|---|
| 有序 ol (ordered list) | 有顺序，只能包含li |
| 无序 ul (unordered list) | 无顺序，只能包含li |
| 定义 dl (definition list) | dt用于添加要解释的名词，而dd用于添加该名词的具体解释。 |
HTML的精髓就在于标签的语义，要 语义化
四、表格 table
<table alian=center border="1" cellpadding="10" cellspacing="0" width="300"><caption>考试成绩表</caption><thead> <tr><th>姓名</th><th>语文</th><th>英语</th></tr></thead><tbody><tr><td>小明</td><td>80</td><td>80</td></tr><tr><td>小红</td><td>90</td><td>90</td></tr><tr><td>小杰</td><td>100</td><td>100</td></tr></tbody><tfoot><tr><td>平均</td><td>90</td><td>90</td></tr></tfoot></table>
标题：caption
表头：th
表行：tr
单元格：td
- 用 标签表示表格的头部区域，位于第一行
- 用 标签表示表格的主体区域，主要是用于放数据本体
- 用位于最下行
4.1 表格属性
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left,center,right | 规定表格相对周围元素的对齐方式 |
| border | 1或者" " | 规定表格单元是否拥有边框，默认为" "，表示没有边框 |
| cellpadding | 像素值 | 规定单元边沿于其内容之间的空白，默认1像素 |
| cellspacing | 像素值 | 规定单元格之间的空白，默认2像素 |
| width | 像素值或百分比 | 规定表格的宽度 |
4.2 合并表格
- 合并行：rowspan=“合并单元格的个数”
- 合并列：colspan=“合并单元格的个数”
五、图片 img
<img src="" alt="" />
- 绝对路径
- 相对路径
位图 jpg、png、gif
矢量图
六、超链接 link
<a href="链接地址" target="打开方式">文本或图片</a>
- _self 在原来窗口打开(默认值)
- _blank 在新窗口打开
跳转外部链接
跳转内部链接
跳转锚点链接
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>
七、表单 form
<form action="url地址" method="提交方式" name="表单域的名称"></form>
form属性
| 属性 | 说明 |
|---|---|
| name | 表单名称（以区分同页面多个表单） |
| method | 提交方式（get或post） |
| action | 提交地址（url地址） |
| target | 打开方式（_blank） |
| anctype | 编码方式（一般用于上传文件功能） |
<input type="表单类型" />
| type的属性值 | 说明 |
|---|---|
| text | 单行文本框 |
| password | 密码文本框 |
| radio | 单选框 |
| checkbox | 多选框 |
| button、submit、reset | 按钮 |
| file | 文件上传 |
7.1 单行文本框
<input type="text" value="单行文本框" size="50" maxlength="10"/>
- value：值
- size：长度
- maxlength：最多可输入的字符数
7.2 密码文本框
<input type="password" />
与单行文本框 相同，有value、size、maxlength
7.3 单选框
<input type="radio" name="gender" value="男" checked />男
<input type="radio" name="gender" value="女" />女
7.4 复选框
<input type="checkbox" name="fruit" value="苹果"/>苹果
<input type="checkbox" name="fruit" value="香蕉" checked/>香蕉
<input type="checkbox" name="fruit" value="西瓜"/>西瓜
7.5 按钮
<input type="button" value="普通按钮" />
<input type="submit" value="提交按钮"/>
<input type="reset" value="重置按钮" />
<button>按钮</button>
7.6 文件上传
<input type="file"/>
7.7 多行文本框
<textarea rows="行数" cols="列数" value="取值">默认内容</textarea>
7.8 下拉列表
<select><option>选项内容</option>……<option>选项内容</option>
</select>
select属性
| 属性 | 说明 |
|---|---|
| multiple | 设置下拉列表可以选择多项 |
| size | 设置下拉列表显示几个列表项，取值为整数 |
option属性
<option value="内容" selected>内容</option>
7.9文本标签lable
lable标签for属性与id属性相同
<lable for="sex"> 男 </lable>
八、框架 iframe
<iframe src="链接地址" width="数值" height="数值"></iframe>
<iframe src="https://www.itnanls.cn"></iframe>
九、HTML5
color
<input type="color" name="favcolor">
date
<input type="date" name="bday">
datetime
<input type="datetime" name="bdaytime">
datetime-local
<input type="datetime-local" name="bdaytime">
<input type="email" name="email">
month
<input type="month" name="bdaymonth">
number
<input type="number" name="quantity" min="1" max="5">
| 属性 | 说明 |
|---|---|
| disabled | 禁用 |
| max | 最大值 |
| maxlength | 最大字符长度 |
| min | 最小值 |
| pattern | 验证输入字段模式 |
| readonly | 输入值无法修改 |
| required | 输入值无法修改 |
| size | 输入字段可见字符数 |
| step | 输入数字间隔 |
| value | 输入字段默认值 |
range
<input type="range" name="points" min="1" max="10">
search
<input type="search" name="googlesearch">
tel
<input type="tel" name="usrtel">
time
<input type="time" name="usr_time">
url
<input type="url" name="homepage">
新属性
| 属性值 | 说明 |
|---|---|
| autocomplete | 自动提示以输入过的内容 |
| autofocus | 自动获取焦点 |
| height、width | 长、宽 |
| min、max | 小、大 |
| pattern | 正则 |
| placeholder | 提示 |
| required | 必须 |
HTML5图像
- < canvas >
- < svg >
html基础笔记与html5代码展示相关推荐
- 【unity shader/风格化水表面渲染/基础笔记】urp代码版05-焦散模拟
前言 前面4章完成了波浪动画.上色.岸边泡沫的生成.本章梳理水底的焦散模拟. 焦散模拟 我们可以使用类似的水纹的贴图作色散分离,或者直接使用分离的三通道贴图. 下面的代码设置了宏_DISPERSION ...
- 【unity shader/风格化水表面渲染/基础笔记】urp代码版01-水面与水底的深度判断
目录 1 场景搭建与实现思路 2 深度图获取与原理 获取方式 深度图计算原理 变换过程 3 重建世界坐标 采样深度图 重建方法1 重建方法2 4 结果 仅做学习,如有错误望指正 涉及的知识点:dept ...
- 【unity shader/风格化水表面渲染/基础笔记】urp代码版03-水表面颜色
前言 上一节生成了岸边的泡沫.本节主要梳理水表面的上色过程,这部分涉及半透明渲染和fresnel颜色 颜色 首先,岸边_ShallowCol和远离岸边_DeepCol的颜色应该有所区分.这里依旧利用上 ...
- 【unity shader/风格化水表面渲染/基础笔记】urp代码版02-岸边泡沫的生成
前言 上一节,达成了水面与水底的深度判断,结果用RawDepth表示.这一节梳理利用深度关系生成岸边的泡沫. 设计函数_getFoam(RawDepth) float sinWave = _getFo ...
- HTML5基础——笔记
HTML5基础--笔记 近几年来,互联网+.大数据.云计算'物联网'虚拟现实'人工智能.机器学习.移动互联网等IT相关新名词.新概念层出不穷,相关产业发展如火如荼.互联网+移动互联网已经深入到人民日常 ...
- Andrew Ng-机器学习基础笔记（下）-Python实现代码
目录 前言: 10. 应用机器学习的建议 10.1 决定下一步做什么 10.2 评估一个假设 10.3 模型选择和交叉验证集 10.4 诊断误差和方差 10.5 正则化和偏差/方差 10.6 学习曲线 ...
- HTML5、CSS3基础笔记
HTML5 & CSS3基础笔记 HTML html的基本格式 实体 meta标签 语义化标签-01 块和行内 语义化标签-02 列表 超链接介绍 相对路径 超链接的其他用法 图片标签 图片格 ...
- html5代码好学吗,0基础能学习Html5吗?Html5好学吗？
原标题:0基础能学习Html5吗?Html5好学吗? 0基础可以学习Html5吗?这两年一直是被挂在嘴边的话题,随着人们对用户体验的要求越来越高,前端开发技术难度越来越大,所以对于IT从业者来讲,前端 ...
- html5代码转换为视频,HTML5中的视频代码详解
摘要 腾兴网为您分享:HTML5中的视频代码详解,智学网,云闪付,易推广,小红书等软件知识,以及360win10,流量魔盒,fitbit,上港商城,安卓2.3.7,全民惠,五年级下册英语单词表图片,t ...
最新文章
- jquery设置属性值或移除属性
- 你们AI圈儿，已经引起了罗马教皇的警惕
- 素数-试除法和埃式筛选法模板
- Linux crond 每分钟，每小时，每天，每周，每月，每年 的表达式写法
- 四个变量的图表怎么做_PPT中的图表怎么做才高大上？4步帮你搞定！
- 系列TCP/IP协议-ARP与RARP
- android 5.1.1 sd卡权限,android - 适用于Android 5.1.1及更高版本的Cordova的外部存储路径（SD卡） - 堆栈内存溢出...
- jtm 一键安装mysql_MySQL数据实时增量同步到Redis
- jQuery第六章课后作业
- 四种常见的颜色模式及各自的特点？
- 7的整除特征 三位一截_7的倍数特征
- iphone13开箱验机全步骤
- vue笔记——本地应用
- 产品设计过程中的沉没成本和禀赋效应
- 字节跳动 2022年春招
- 20189216 2018-2019-2 《密码与安全新技术专题》第二次作业
- 8.遍历二叉树、线索二叉树、森林
- 你的Idea还可用吗？不妨试试另一个开发神器！
- 中鑫优配热点前瞻：循环经济+降解塑料+甲酸概念+高铁轨交
- 创意信息子公司作为华为合作伙伴 携产品登录华为云端展厅