HTML5/CSS3/JS笔记
HTML笔记:
前言: HTML无非就是围绕标签、属性、属性值这三个词展开的. (标签也可以叫做元素, 元素的内容是开始标签与结束标签之间的内容)
*常规标签
<标签 属性1="属性值1" 属性2="属性值2"></标签> # 一个标签可以没有属性也可以有多个属性, 属性和属性之间不分先后顺序.
*空标签
<标签 属性1="属性值1" 属性2="属性值2" /> # 空标签没有结束标签, 用"/"代替.
*HTML标题: <h1>这是一个标题</h1> 最重要的(字体最大)
<h2>这是一个标题</h2> 次重要的
<h3>这是一个标题</h3> 次之
注: 浏览器会自动地在标题的前后添加空行。
*align属性: left, right, center(默认是align="left"左对齐)
*HTML段落: <p>这是一个段落</p> //用p标签不仅会换行, 而且上下都会有一行的间距.
*换行: <br> //用br换行标签, 只会换行, 不会有间距.
*空格:   # 右键折叠(folding), 折叠所有, 再展开所有, 空格部分就会全部被折叠起来.
*pre元素: <pre>内容</pre> , 其作用是使pre包裹的内容保持原始格式(主要是保持空格和换行)
*绝对路径和相对路径
绝对路径(与html文档的位置无关):
1. 服务器中的位置: http://www.baidu.com/animal/panda.png
2.本地存储中的位置: D:/picture/animal/panda.png
相对路径(与html文档的位置有关):
1.同一个目录下: ./文件名 或 直接写文件名
2.在当前目录的下级目录下: ./xxx/文件名
3.在当前目录的上级目录下: ../文件名
4.在当前目录的上上级目录下: ../../文件名
*链接: <a href="http://www.runoob.com">这是一个链接</a>
*图像: <img src="/images/logo.png" width="200" height="100" > 注: 路径不区分斜线的方向.
<img src="/images/logo.png" width="25%" height="100" > 注: 图片的宽度属性可以设置百分比, 但是高度是不定的所以不能设置百分比.
*title属性: 当鼠标移动到一个元素上的时候会显示提示说明文字.
*音乐: <embed src="/static/music.mp3" hidden="true" autostart="true" loop="true"> # <body></body>中添加
注: hidden=true代表隐藏播放 , autostart=true代表自动播放 , loop=true代表循环播放
*水平线: <hr> 标签在 HTML 页面中创建水平线。
*注释: Ctrl+/
*加粗: <b> 内容 </b>
*斜体: <i> 内容 </i>
*加下划线: <u>内容</u>
*<ul></ul> : 无序列表
*<ol></ol>: 有序列表
*<li></li> : 列表内的列表项
*html函数格式: {% 循环 %} {{ 内含变量 }} {# 注释 #}
*<meta></meta>: 标签提供关于HTML文档的元数据, 元数据不会显示在页面上，但是对于机器是可读的, 典型的情况是，meta元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据, 标签始终位于head元素中.
*<link></link>: 外链标签, 作用是将较长较多的文件内容放到另一个文件然后再引用进来, 比如一个CSS选择器要设置的属性和属性值太多, 为避免在html文件中占用太多位置, 在另外写一个css文件, 然后再外链到这个html文件里面来.
*HTML布局: 一般用div来进行网页布局, 不建议使用老式的table布局.
CSS笔记:
*标签分类: 1.块级元素; 块级元素默认独占一行, 块级元素可以自定义设置宽度和高度, 不设置宽高的时候默认与父级元素一样宽高, 块级元素一般作为其他元素的容器.
==>常见的块级元素有: div, di, dt, dd, ol, ul, li, fieldset, (h1-h6), p, form, hr, colgroup, col, table, tr, td等
2.内联元素; 始终以行内逐个进行显示, 内联元素不能设置宽度和高度.
3.内联块级元素; 在内联中的块级元素也可以设置宽度和高度.
*CSS选择器: 选择器一般在head内, 写在<style type="text/css">选择器</style> , 选择指定body内的标签, 对其内容进行修饰配置.
选择器格式: xxx{属性1:属性值1; 属性2:属性值2...;} # 属性与属性值之间用冒号相连, 每个属性要空一格并以分号结尾, 由于标签的属性太多了, 不用刻意记, 需要用到的时候查一下就行.
例: <style type="text/css">
p{background-color:red; height:200px; width:300px;} # 该选择器对p标签内块级元素的背景颜色、宽度和高度属性设置对应的属性值.
div{background-color:yellow;} # 该选择器对div标签内块级元素的背景颜色属性设置对应的属性值.
</style>
1.标签选择器 2.id选择器 3.class选择器 4.*通配符(全局选择器) 5.交集选择器 6.并集选择器(群组选择器) 7.后代选择器 8.子选择器 9.伪类选择器
常用的有: 标签选择器 ==> 语法: 标签名称{属性1:属性值1 属性2:属性值2;}
id选择器 ==> 语法: #id名{属性:属性值;}
class选择器 ==> 语法: .class类名{属性:属性值;}
并集选择器 ==> 语法: 标签1, 标签2, 标签3{属性:属性值;} # 标签123...是并集关系, 不是嵌套关系.
后代选择器 ==> 语法: 父元素 子元素{属性:属性值;} # 子元素是嵌套在父元素内的, 例如:div里面嵌套p.
*通配符(全局选择器) ==> 语法: *{属性:属性值;}
*选择器的权重: 在有多个选择器指向同一个块级元素的时候, 就有一个选择器的优先级的问题了.
id选择器 > class选择器 > 标签选择器
JavaScript笔记:
*常用的两个输出语句用法: 1.html内容显示document.write() 2.提示信息显示alert()
*onclick事件的基本用法: 例<input type="button" value="计算面积" onclick="alert('矩形的面积为:'+s');">
*var声明变量: 例 var x=100; 也可同时定义多个变量: var x=100, y=200, z=300;
*typeof(): typeof运算符可以查询数据类型, 其返回值可能有number, string, boolean, object, function, undefined
*字符串的连接: 可以使用"+"进行字符串的连接.
*null和undefined的区别: null是已定义并初始化, 只是值为空值; 而undefined是未定义或未初始化, 连空值都没有.
HTML5/CSS3/JS笔记的更多相关文章
- HTML5&CSS3练习笔记(二)
HTML5&CSS3 练习CSS3伪选择器使用 1.first-line 格式:元素:first-line 说明:设置同一个标签下所有行内容的第一行的样式,例如: <table st ...
- HTML5+CSS3学习笔记（二） 页面布局：HTML5新元素及其特性
HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <head ...
- HTML5+CSS3学习笔记（一）
HTML5+CSS3概述 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就是HTML ...
- 用HTML5/CSS3/JS开发Android/IOS应用框架大全
现在人人都想成为安卓/IOS应用开发工程师.其实,安卓/IOS应用可以用很多种语言来实现.由于我们前端开发工程师,对HTML5/CSS/JavaScript的网络编程已经相当熟悉了.所以,今天大家将会 ...
- HTML5+CSS3学习笔记（一） 概述
HTML5+CSS3概述 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就 ...
- Web前端/全栈核心(html5/css3/js/vue/react/angular/es6/node)观看笔记
a标签中的超链接,需要加 http:// 否则会出现页面找不到. iframe中添加a标签,a标签中的target属性可以控制即将打开的页面,在那个位置显示. _blank 在新窗口中打开被 ...
- HTML5&CSS3读书笔记
Hi All, 分享一下我学HTML5 摘抄的读书笔记(我用的还是英文,因为一些新的东西还是来自于欧美国家,希望大家习惯于看一些英文材料): 1. Difference between Section ...
- html5+css3学习笔记-prefixfree前缀补全插件
虽然现代浏览器支持CSS3,但是一些过往的版本或是目前有些CSS3属性的应用还是离不开前缀的.一些牛逼且执着于web技术且乐于分享的仁兄(Lea Verou)就搞了个名叫prefixfree.js的插 ...
- MiracleSnow网页设计HTML5+CSS3+JS全套视频教程
终于把这套课程讲完了,虽然时间隔了很长,但也算有始有终了,这是在YY讲课中我自己录的,讲了网页设计的基础,这也是我第一次给那么多人讲课,讲的不好多多包涵. 前几次视频和课件是分开的,后几次都打包在一起 ...
随机推荐
- 面试官：为什么 TCP 三次握手期间，客户端和服务端的初始化序列号要求不一样？
大家好,我是小林. 为什么 TCP 三次握手期间,客户端和服务端的初始化序列号要求不一样的呢? 接下来,我一步一步给大家讲明白,我觉得应该有不少人会有类似的问题,所以今天在肝一篇! 正文 为什么 TC ...
- Spring Security OAuth2 完全解析 (流程/原理/实战定制) —— Client / ResourceServer 篇
一.前言 本文假设读者对 Spring Security 本身原理有一定程度的了解,假设对 OAuth2 规范流程.Jwt 有基础了解,以此来对 SpringSecurity 整合 OAuth2 有个 ...
- python极简教程04：进程和线程
测试奇谭,BUG不见. 大家好,我是谭叔. 这一场,主讲python的进程和线程. 目的:掌握初学必须的进程和线程知识. 进程和线程的区别和联系 终于开始加深难度,来到进程和线程的知识点~ 单就这两个 ...
- LabVIEW生成.NET的DLL——C#下调用NI数据采集设备功能的一种方法 [原创www.cnblogs.com/helesheng]
LabVIEW是NI公司的数据采集设备的标准平台,在其上调用NI-DAQmx驱动和接口函数能够高效的开发数据采集和控制程序.但作为一种图形化的开发语言,使用LabVIEW开发涉及算法和流程控制的大型应 ...
- Docsify使用指南（打造最快捷、最轻量级的个人&团队文档）
前言 网上关于动态文档生成工具有很多如:Docsify. VuePress.Docute .Hexo这些都是一些非常优秀的文档生成工具,本章主要介绍如何快速使用Docsify搭建一个快捷.轻量级的个人 ...
- Teamcenter无法创建多余账号怎么办？
西门子的产品Teamcenter,用户账号的许可是命名的许可类型,数量是限定的:例如,账号许可购买了25个,那么活动账号已经达到25了,再创建第26个账号将无法创建.没办法创建多余的账号,怎么办? 当 ...
- Three.js之绘制物体的边框及修改lineWidth
本博文主要记录如何使用three.js绘制物体的边框及修改其lineWidth.three.js是个技术点比较多,查询资料又比较少的框架,单单就这个修改lineWidth就是一个坑.先放一个动态的效果 ...
- Parallel.For实现
static class MyParallel { //4.0及以上用Task, Task的背后的实现也是使用了线程池线程 //static List<Task> tasks = new ...
- k8s 基于RBAC的认证、授权介绍和实践
在K8S中,当我们试图通过API与集群资源交互时,必定经过集群资源管理对象入口kube-apiserver.显然不是随随便便来一个请求它都欢迎的,每个请求都需要经过合规检查,包括Authenticat ...
- PC端实用正版软件推荐
首先介绍一下背景,我本人是一个软件工程师,所以对电脑上很多软件使用都有要求,这里将个人觉得好用的一些软件分享给大家: 1. Typora 对于长写本地笔记.网络博客的人,对 MarkDown 格式应该 ...