一.HTML基础相关
1.基本结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
</body>
</html>
2.常用标签
- 标题标签 <h1>~<h6> 其中<h1>对应的字体最大
- 段落标签 <p>
- 换行标签br和分割线标签hr
- 格式化标签 设置字体加粗倾斜下划线等
- div(被div包裹的内容，以分块的形式横向排列在网页上)，span(对行内元素进行组合，纵向排列在网页上)
- 图片img图片标签，src显示图片的属性，width、height宽高属性，alt图片无法显示时代替图片显示的文字属性，title鼠标停留在图片上显示的文字属性
- 列表(ul无序列表、ol有序列表、dl描述列表)
- 超链接，a超链接，href链接地址，title鼠标悬停显示的文字，target网页打开方式(_black在新窗口打开,_self在当前窗口打开)，id=“value”定义页面中的书签，href=“#value”链接到书签
- 表格，table定义表格，tr行td表格元素th表格头
- 表单，插入标签input、下拉标签select、输入多行信息textarea、form表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
<h1>标题标签h1</h1>
<h2>标题标签h2</h2>
<h3>标题标签h3</h3>
<h4>标题标签h4</h4>
<h5>标题标签h5</h5>
<h6>标题标签h6</h6>
<p>段落标签p</p>
<p>这是第二段落</p>
<hr/>
hr分割线标签<br/>
br换行标签
<b>字体加粗</b>
<strong>字体加粗，加强语义</strong>
<i>字体倾斜</i>
<em>字体倾斜，加强语义</em>
<s>删除线</s>
<del>删除线，加强语义</del>
<u>下划线</u>
<ins>下划线加强语义</ins>
<q>加双引号</q>
<sub>下标</sub>
<sup>上标</sup>
<hr/>
<span>span:</span>
<span>对行内元素进行组合，纵向排列在网页上</span>
<hr/>
<div>div:</div>
<div>被div包裹的内容，以分块的形式横向排列在网页上</div>
<br/>
<b>img图片标签，src显示图片的属性，width、height宽高属性，alt图片无法显示时代替图片显示的文字属性，title鼠标停留在图片上显示的文字属性</b>
<br/>
<img src="icon.png" width="30px" height="30px" alt="加载失败..." title="ICON">
<br/>
<h3>列表</h3>
<h5>描述列表,超链接书签定位</h5>
<ul>
<a href="#A"><li>Gradle从入门到实战</li></a>
<a href="#B"><li>Rxjava</li></a>
</ul>
<ul>
<li style="list-style-type: circle">ul无序列表(可配置列表标识:disc默认圆点,circle空心圆,square方块,none不显示)</li>
<li style="list-style-type: square">ol有序列表(1默认按数字排序,A/a按字母排序,I/i按罗马字母排序)</li>
<li>li有序无序列表的项</li>
<li>dl描述列表</li>
<li>dt描述列表的项</li>
<li>dd描述列表的项的内容</li>
</ul>
<h5>有序列表,通过start可设置列表开始位置</h5>
<ol type="A" start="3">
<li>hello</li>
<li>world</li>
</ol>
<h5>描述列表</h5>
<dl>
<dt>RxJava</dt>
<dd>-Java VM上使用可观测的序列来组成的异步的基于事件的程序库</dd>
</dl>
<h5>a超链接，href链接地址，title鼠标悬停显示的文字，target网页打开方式(_black在新窗口打开,_self在当前窗口打开)，id=“value”定义页面中的书签，href=“#value”链接到书签</h5>
<a href="index.html" title="index.html" target="_blank">index</a>
<ul>
<li id="A">Gradle从入门到实战</li>
<ol>
<li>基础1</li>
<li>基础2</li>
<li>基础3</li>
<li>基础4</li>
<li>基础5</li>
</ol>
<li id="B">RxJava</li>
<ol>
<li>基础1</li>
<li>基础2</li>
<li>基础3</li>
<li>基础4</li>
<li>基础5</li>
</ol>
</ul>
</body>
</html>
二.CSS基础相关
1.选择器
- 语法结构 选择器 {属性：值；属性：值}
- 元素选择器，为页面中某一类标签指定统一的css样式 (h1{font-size:20px})
- 类选择器，对指定的标签进行样式设置，可以进行相同标签的差异化设置(h1.kai{}只对h1标签下的class=kai的内容生效)
- 并集选择器(h1,span{font-family:Kai;})
- id选择器，id选择器只能被一个标签引用(<p id="kai"> #kai{})
- 通配符选择器，设置页面中所有元素的样式(*{})
- 后代选择器，给某个元素所包含的元素定义样式(div p {font-size:20px})
- 子代选择器，给某个元素所包含的第一级元素定义样式(ul>li{}设置ul标签下第一级标签li的样式)
- 伪链接选择器，用于给链接设置各种状态的样式(a:link超链接默认样式，a:visited超链接访问过了，a:hover鼠标悬停样式，a:active选定的链接)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入css样式 -->
<link rel="stylesheet" href="test.css">
<style>
/*只对h1标签下的class=kai的内容生效*/
h1.kai {
font-family: Kai;
}
/*class类选择器*/
.color {
color: #888888;
}
/*id选择器*/
#cu {
font-weight: bold;
}
/*通配符选择器，全局有效*/
* {
font-style: italic;
}
/*给某个元素所包含的元素定义样式*/
div p {
font-weight: bold;
}
ul>li {
font-weight: bold;
}
</style>
</head>
<body>
<h1 class="kai">望庐山瀑布</h1>
<span id="cu">[唐]</span> <span class="color">李白</span>
<div><p>日照香炉生紫烟，遥看瀑布挂前川。</p></div>
<div><p>飞流直下三千尺，疑是银河落九天。</p></div>
<ul>
<li id="A">Gradle从入门到实战</li>
<ol>
<li>基础1</li>
<li>基础2</li>
<li>基础3</li>
<li>基础4</li>
<li>基础5</li>
</ol>
<li id="B">RxJava</li>
<ol>
<li>基础1</li>
<li>基础2</li>
<li>基础3</li>
<li>基础4</li>
<li>基础5</li>
</ol>
</ul>
<a href="index.html" title="index.html" target="_blank">index</a>
</body>
</html>
2.常用属性
- 字体样式(color颜色，font-size字号大小px，font-style默认斜体等，font-family字体楷体宋体等，font-weight粗细100的整数倍最大为900)
- 文本样式(line-height设置行间距，text-align设置水平位置居中等，text-indent设置首行缩进单位em，text-decoration:None(无)、line-through(删除线)、overline(上画线)、underline(下划线))
- 背景样式(background-attachment背景图片是否跟随页面滑动、background-color、background-repeat、background-image、background-position)
- border 盒子的边框、padding/margin内外边距
- 定位属性 position 定位方式、top/bottom/right/left
- static:静态定位(默认)
- relative:相对定位
- absolute:绝对定位
- fixed:固定定位
- z-index属性值谁大谁在上，值相同后面覆盖前面
- float 浮动和定位相似，作用是让盒子放置在指定的位置
- FlexBox布局让内容元素在一个方向上伸缩的摆放(display:flex)
- 伸缩方向与换行row-横向，column-纵向，wrap-内容一行放不下，可换行显示
- flex 数值大小表示在盒子中的比例大小
三.javascript相关
1.HTML中引用javascript
<script type="text/javascript" src="jspath"/>
//打印
console.log("");
//弹窗提示
alert("");
2.数据类型
- 常量(const a = 1)、变量(let a;)
- 基本数据类型和对象
- 数字(分为精确值和近似值，其中近似值分为双精度和浮点值) var a=1；var b = 1.2；
- 布尔(true、flase) var a = false;
- 字符串 var str = "aaa";
- undefined 表示此处应该有值，但却没有赋值(变量声明了还没赋值直接打印会输出undefined )
- null
- Array 数组 var cars=["Saab","Volvo","BMW"];
- 对象 var car = {type:"Fiat", model:500, color:"white"};
3.闭包也是函数的一种，是一种可以去取其他函数局部变量的一种函数，也可以理解为定义在函数内部的函数
网友评论