html个人笔记
HTML
1.1常用编辑器
dreamweaver、sublime、webstorm、Hbuilder、vscode
1.2 浏览器内核
分为渲染引擎和JS引擎
渲染引擎:它负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入CSS 等),以及计算网页的显示方式,然后会输出至显示器或打印机
JS引擎:JS引擎则是解析Javascript语言,执行javascript语言来实现网页的动态效果
- IE: Trident
- Firefox: Gecko
- Chrome: Webkit 到 Blink
- Safari: Webkit
- Opera: Presto 到 Webkit 到 Blink
1.3 标签
<!-- 四类八种 -->
<b>粗体</b><strong></strong>
<i>斜体</i><em></em>
<s>删除线</s><del></del>
<u>下划线</u><ins></ins>
<img src="图片路径" alt="出错显示信息">
<a href="跳转链接" target="目标窗口的弹出方式">文本或图像</a>
<!-- 锚点定位 -->
<a href="#one"></a>
<p id="one">段落</p>
<ul>
<li></li>
<li></li>
</ul>
1.4 表格
<table align="center" border="1" cellspacing="0" cellpadding="10" width="900">
<caption>年中工资报表</caption>
<thead>
<tr>
<th colspan="2">区域办事处</th>
<!-- <th>岗位</th> -->
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">abc</td>
<td>abc</td>
</tr>
<tr>
<!-- <td>abc</td> -->
<td>abc</td>
</tr>
</tbody>
</table>
- 合并单元格的步骤是?
1.先判断是跨行(rowspan)还是跨列(colspan)
2.把属性名和合并的行数写在第一个要合并的单元格上
3.把多余的单元格注释掉 - table布局的缺点是?
a.太深的嵌套,比如table> tr> td>h3,会导致搜索引擎读取困难,而且,最直接的损失就是大大增加了冗余代码量。
b.灵活性差,比如要将tr设置border等属性, 是不行的,得通过td
c.代码臃肿,当在table中套用table的时候, 阅读代码会显得异常混乱
d.混乱的colspan与rowspan,用来布局时,频繁使用他们会造成整个文档顺序混乱。
e.不够语义化
1.5 表单
<!--
action 提交的地址
method 提交的方式
name 表单名字
-->
<form action="https://www.baidu.com" method="GET" name="form1">
<!--
label 标记标签 (获取焦点 label for与input id)
input 控件标签 size 长度
-->
<div>
<label for="user">姓名</label>
<input type="text" id="user" value="默认值">
</div>
<!-- 密码框 -->
<div>
<label for="pwd">密码</label>
<input type="password" id="pwd" size="30">
</div>
<!--
单选框,name一样具有单选效果
默认单选框内容:
checked="checked"
checked=true
checked
-->
<div>
<input type="radio" name="sex" checked><span>男</span>
<input type="radio" name="sex"><span>女</span>
</div>
<!-- 多选框 -->
<div>
<input type="checkbox" checked><span>1</span>
<input type="checkbox"><span>2</span>
<input type="checkbox" checked><span>3</span>
</div>
<!--
组合标签
默认选择内容,selected,同checked
-->
<div>
<span>家庭住址</span>
<select name="" id="">
<option value="">石家庄</option>
<option value="" selected>迁安</option>
</select>
</div>
<br>
<!-- row 长 cols宽 -->
<div>
<span>多行文本框</span>
<textarea name="" id="" cols="30" rows="7"></textarea>
</div>
<br>
<input type="reset" value="重新设置">
<input type="button" value="普通按钮">
<input type="submit" value="提交按钮">
</form>
1.6 HTML5
<header>头部标签</header>
<!-- 导航标签 -->
<nav>
<ul>
<li><a href="#">导航标签链接1</a></li>
<li><a href="#">导航标签链接2</a></li>
</ul>
</nav>
<section>小节标签</section>
<section>
<!-- 侧边栏标签aside -->
<aside>
<ul>
<li> <a href="\"></a> 侧边栏</li>
</ul>
</aside>
</section>
<section>
<!-- 文章标签 -->
<article></article>
</section>
<footer>尾部标签</footer>
<!-- 进度条标签 -->
<progress max="600" value="100"></progress>
1.7 HTML5-form
<form action="#" method="GET" name="form-1">
<!-- h5新增选择框 -->
<span>选择</span>
<input type="text" list="l1">
<datalist id="l1">
<option value="op3"></option>
<option value="op4"></option>
<option value="op5"></option>
</datalist>
<button>h5普通按钮</button>
<section>
<!--
placeholder:占位符
required:不能为空
autofocus:自动获取焦点
autocomplete:自动完成
-->
<label for="user">姓名</label>
<input type="text" id="user" name="user" placeholder="占位符" required autofocus autocomplete="off">
</section>
<section>
<!-- maxlength -->
<label for="pwd">密码</label>
<input type="password" id="pwd" name="pwd" placeholder="占位符" maxlength="6" minlength="3">
</section>
<!-- 新增的table属性 -->
<section>
<label for="">邮箱</label>
<input type="email" autocomplete="off">
</section>
<section>
<label for="">地址</label>
<input type="url" name="" id="">
<input type="color">
</section>
<section>
<label for="">搜索框</label>
<input type="search" placeholder="输入搜索内容">
</section>
<section>
<label for="">时间</label>
<input type="time" name="" id=""><br>
<label for="">日期</label>
<input type="date" name="" id=""><br>
<label for="">月份</label>
<input type="month" name="" id=""><br>
<label for="">周</label>
<input type="week" name="" id="">
</section>
</form>
1.8 HTML5-media
<!--
控件:controls
循环:loop
静音:muted
-->
<audio src="" controls loop="loop" muted="muted"></audio>
<audio controls>
<source src="">
</audio>
<video src="" controls loop="loop" muted="muted" width="200" height="300"></video>
<!-- video双标签,同audio -->
html个人笔记的更多相关文章
- git-简单流程(学习笔记)
这是阅读廖雪峰的官方网站的笔记,用于自己以后回看 1.进入项目文件夹 初始化一个Git仓库,使用git init命令. 添加文件到Git仓库,分两步: 第一步,使用命令git add <file ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- SQL Server技术内幕笔记合集
SQL Server技术内幕笔记合集 发这一篇文章主要是方便大家找到我的笔记入口,方便大家o(∩_∩)o Microsoft SQL Server 6.5 技术内幕 笔记http://www.cnbl ...
- PHP-自定义模板-学习笔记
1. 开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2. 整体架构图 ...
- PHP-会员登录与注册例子解析-学习笔记
1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...
- NET Core-学习笔记(三)
这里将要和大家分享的是学习总结第三篇:首先感慨一下这周跟随netcore官网学习是遇到的一些问题: a.官网的英文版教程使用的部分nuget包和我当时安装的最新包版本不一致,所以没法按照教材上给出的列 ...
- springMVC学习笔记--知识点总结1
以下是学习springmvc框架时的笔记整理: 结果跳转方式 1.设置ModelAndView,根据view的名称,和视图渲染器跳转到指定的页面. 比如jsp的视图渲染器是如下配置的: <!-- ...
- 读书笔记汇总 - SQL必知必会(第4版)
本系列记录并分享学习SQL的过程,主要内容为SQL的基础概念及练习过程. 书目信息 中文名:<SQL必知必会(第4版)> 英文名:<Sams Teach Yourself SQL i ...
- 2014年暑假c#学习笔记目录
2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...
- JAVA GUI编程学习笔记目录
2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...
随机推荐
- 1.5 PHP基础+1.5.1 访问数据库
PHP作为流行的网站开发语言,具有上手简单,运行速度快的特点,它和javascript类似,无需定义变量类型,免去了使用者要对变量类型转换的烦恼,当然了,这就要求我们要对变量类型隐式转换过程予以关注. ...
- WPF 基础 - xaml 语法总结
Attribute 与 Property 之间的区别 Property 对应着抽象对象身上的性状: Attribute 是针对标签的特征: 往往一个标签具有的 Attribute 对于它所代表的对象的 ...
- Vue3手册译稿 - 深入组件 - 自定义事件
本章节需要掌握组件基础 emit我译成发射,觉得发射这个词比较形象的形容将子组件事件发射出来的一个动作. 事件名 像组件和props,事件名也会进行自动转换,如果你在子组件里发射一个驼峰命名的事件,你 ...
- gtk---实现一个登录界面
输入框 如果在GTK+中需要输入一个字符串,可以使用输入框,这是一个单行的输入构件,可以用于输入和显示正文内容. 输入框的基本操作函数 1.gtk_entry_new(void); 这是新建一个输入框 ...
- 事件 on
$(选择器).on(事件名称,事件的处理函数) 事件名称:js事件去掉on的部分,例如js中onclick,这里就是click 例如:<input type="button" ...
- IPFS挖矿靠谱吗?
IPFS是一个旨在创建持久且分布式存储和共享文件的网络传输协议,前景广阔且实用意义大,为区块链行业提供了一种新的可能.而IPFS挖矿挖出的FIL,则是在IPFS技术的基础上,对维护IPFS网络的用户的 ...
- windows使用vscode设置免密登录linux服务器
秘钥原理解释 id_rsa.pub是公钥,部署在服务器上 id_rsa是私钥,放在windows本地 本质上它们都是个文本文件 操作流程 生成秘钥对(windows和linux均可) ssh-keyg ...
- 深入理解Java并发框架AQS系列(三):独占锁(Exclusive Lock)
一.前言 优秀的源码就在那里 经过了前面两章的铺垫,终于要切入正题了,本章也是整个AQS的核心之一 从本章开始,我们要精读AQS源码,在欣赏它的同时也要学会质疑它.当然本文不会带着大家逐行过源码(会有 ...
- Android学习之CoordinatorLayout+FloatingActionButton+Snackbar
CoordinatorLayout •简介 CoordinatorLayout 协调布局,可以理解为功能更强大的 FrameLayout 布局: 它在普通情况下作用和 FrameLayout 基本一致 ...
- 【linux】驱动-9-设备树插件
目录 前言 9. Linux设备树插件 9.1 格式 9.2 设备树插件的编译和加载 9.2.1 单独使用dtc工具编译 9.2.2 内核dtc工具编译设备树插件 9.2.3 加载设备树插件 9.2. ...