再学习之HTML+CSS

由于之前在一两天之后学完了html和css,现再重新温习一遍。
1.html属性为html元素提供更多的信息,属性总是以名称/值的形式出现,得要有引号。
This a link

我是h6

我是h5

我是h2


一般h1对应36px

h2对应30px;

h3对应24px;

h4对应18px;

h5对应14px;

h6对应12px;

普通文本为16px,一般也就能用到h3罢了。

html的注释方法<!–内容–>

浏览器中连续的空格被当做一个空格,换行被当做一个空格,两者叠加也被当做一个空格。

HTML的文本格式化:
定义各种字体:
粗体:粗体
大号字体:大号字体
着重文字:着重文字
斜体:斜体
小号字体:小号字体
加重语气:加重语气
下标:下标
上标:上标
插入字:插入字
删除字:删除字

HTML计算机输出标签:
计算机代码:计算机代码
键盘码:键盘码
计算机代码样本:即使按季代码样本
打字机代码:打字机代码
变量:变量
预格式文本:

预格式文本

HTML应用、术语定义:
缩写:define first alphabet缩写
首字母缩写:首字母缩写
地址:

地址
文字方向:文字方向
长的引用:

长的引用

短的引用:短的引用
引用、引证:引用、引证
定义项目:定义项目

HTML标签语义话,大多数的标签都是有具体语义的,如果仅仅为了改变样式,应该用样式表来改变样式,而HTML表达语义。

样式,外部样式表、内部样式表、内连样式表
外部:head里插入

<link type=”text/css” rel=”stylesheet” href=”style.css”>

超链接我就是超链接
属性target=”_blank”新窗口打开
属性target=”_top”跳出框架到首页去
锚(anchor)先设定锚,然后就能指定锚了
<a name=”anchor”>锚</a>设定锚
指定锚<a href=”#anchor”>指定锚</a>
创建电子邮件链接:
发送邮件
<a href=”mailto:conanskyforce@163.com?subject=Hello&bcc=conansky163@163.com&body=Are20%You20%Ok”>

插入图像:

<img src=”xxx.jpg” alt=”this is a pic”/>

表格:<table>、<th>、<tr>、<td>

一行一列

一行二列

二行一列

二行二列



<table>:定义表格
<caption>:定义标题
<th>:定义表头
<tr>:定义行
<td>:定义列

块级元素(block level element)和内联元素(inline element)
块级元素会以新行和新列来开始和结束如<h1>、<p>、<ul>、<table>、<div>
内联元素不会新行开始如<b>、<td>、<a>、<img>、<span>

HTML表单和输入:<form>
输入<input>
类型为文本域type=”text”,<input type=”text” name=”name”>:
name:
类型为单选按钮type=”radio”,<input type=”radio” name=”sex” value=”female”/>:

male

female
类型为复选按钮type=”checkboxs”,<input type=”checkboxs” name=”car” />

volve

benz

bmw
文本域:<textarea>

表单动作属性和确认按钮
<form name=”input” action=”xxxx.asp” method=”get”>
<input type=”text” name=”name”/>
<inupt type=”submit” value=”提交按钮”/>

user:


框架,浏览器中显示不止一个页面
<frameset>
<frame src=”aaa.html”/>
<frame src=”bbb.html”/>
<frameset/>
iframe用于网页内显示网页
<iframe src=”aaa.html” width=”” height=””><iframe>

216web安全色被用来确保:当计算机使用 256 色调色板时,所有的计算机能够正确地显示所有的颜色。

000000

000033

000066

000099

0000CC

0000FF

003300

003333

003366

003399

0033CC

0033FF

006600

006633

006666

006699

0066CC

0066FF

009900

009933

009966

009999

0099CC

0099FF

00CC00

00CC33

00CC66

00CC99

00CCCC

00CCFF

00FF00

00FF33

00FF66

00FF99

00FFCC

00FFFF

330000

330033

330066

330099

3300CC

3300FF

333300

333333

333366

333399

3333CC

3333FF

336600

336633

336666

336699

3366CC

3366FF

339900

339933

339966

339999

3399CC

3399FF

33CC00

33CC33

33CC66

33CC99

33CCCC

33CCFF

33FF00

33FF33

33FF66

33FF99

33FFCC

33FFFF

660000

660033

660066

660099

6600CC

6600FF

663300

663333

663366

663399

6633CC

6633FF

666600

666633

666666

666699

6666CC

6666FF

669900

669933

669966

669999

6699CC

6699FF

66CC00

66CC33

66CC66

66CC99

66CCCC

66CCFF

66FF00

66FF33

66FF66

66FF99

66FFCC

66FFFF

990000

990033

990066

990099

9900CC

9900FF

993300

993333

993366

993399

9933CC

9933FF

996600

996633

996666

996699

9966CC

9966FF

999900

999933

999966

999999

9999CC

9999FF

99CC00

99CC33

99CC66

99CC99

99CCCC

99CCFF

99FF00

99FF33

99FF66

99FF99

99FFCC

99FFFF

CC0000

CC0033

CC0066

CC0099

CC00CC

CC00FF

CC3300

CC3333

CC3366

CC3399

CC33CC

CC33FF

CC6600

CC6633

CC6666

CC6699

CC66CC

CC66FF

CC9900

CC9933

CC9966

CC9999

CC99CC

CC99FF

CCCC00

CCCC33

CCCC66

CCCC99

CCCCCC

CCCCFF

CCFF00

CCFF33

CCFF66

CCFF99

CCFFCC

CCFFFF

FF0000

FF0033

FF0066

FF0099

FF00CC

FF00FF

FF3300

FF3333

FF3366

FF3399

FF33CC

FF33FF

FF6600

FF6633

FF6666

FF6699

FF66CC

FF66FF

FF9900

FF9933

FF9966

FF9999

FF99CC

FF99FF

FFCC00

FFCC33

FFCC66

FFCC99

FFCCCC

FFCCFF

FFFF00

FFFF33

FFFF66

FFFF99

FFFFCC

FFFFFF



 

<!doctype>声明

<!doctype html>html5声明

HTML头部元素<head>里的元素有:

<title>标题

<base>新窗口打开标签

<link>链接样式表、JavaScript等

<meta>描述文档、定义关键词,

<meta name=”keywords” content=”html,css,xmlx”/>

<meta name=”author” content=”Kai.Huang”/>

<meta http-equiv=”Refresh” content=”300;url=xxx.html”/ >300秒刷新页面,并重新定向xxx.html

<meta charset=”utf=8”/>设置支持中文

<script>内部脚本

<style>内部样式表

 

HTML实体字符

空格:&nbsp;

小于号:&lt;

大于号:&gt;

和号:&amp;

版权:&copy;

注册商标:&reg;

 

HTML统一资源定位符URL(Unicode Resource Locator)

schme://host.domain:port/path/filename

服务类型://定义域主机默认(www).域名:端口默认(80)/服务器路径/资源名称

http:超文本传输协议(hypertext transport protocol)

https:安全超文本传输协议(hypertext transport protocol safety)

ftp:文件传输协议(file transport protocol)

URL以ASCII字符集来传送信息。ASCII字符集之外的字符要先转换为ASCII格式。

今天在重新复习一下FreeCodeCamp的一百多个小codegame:

border-radius:50%圆形框

<input type=”text” placeholder=”占位”>

两种提交按钮:

<button type=”submit”>submit</button>

<input type=”submit” value=”submit”/>

<input type=”text” name=”url” placeholder=”xxx.com” required=”required”>必填项目

checked=”checked”→对于单选、复选

selected=”selected” select option→对于下拉菜单

样式继承:

!important>内联样式>内部样式表最下边一个

bootstrap响应式设计:

<link rel=”stylesheet” href=”//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css”/>

图片添加class为img-responsive属性,完美适配屏幕大小。

button class=”btn”属性,bootstrap自带的按钮风格(其实就是Twitter的),bootstrap其实就是Twitter的轮子吧

class=”btn btn-block”按钮变为块属性

class=”btn btn-block btn-primary”按钮变为块属性+基本蓝色(Twitter风格)

块级元素放在一行:整体在div class=”row”属性下,每一项div class=”col-xs-4”,一行十二格,占4格,共3列

bootstrap内置css:

text-primary文本蓝色风格

btn-primary蓝色like按钮

btn-info淡蓝色info按钮

btn-danger红色删除按钮

img-responsive图片响应式

bootstrap十二栅格布局:

class属性:col-xs-*很小的屏幕布局(手机)

class属性:col-md-*:中等屏幕大小(pad?)

bootstrap图标库:

<link rel=”stylesheet” href=”//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css”/>

图标库中i为图标

<i class=”fa fa-thumb-up”>like</i>

<i class=”fa fa-info-circle”>info</i>

<i class=”fa fa-trash”>delete</i>

<i class=”fa fa-paper-plane”>submit</i>

div class=”well”这个框有井效果(凹框)

JQuery:

<script>
$(document).ready(function() {
$(“button”).addClass(“animated bounce”);//$(选择)button(元素),add(添加)Class(属性)animated(动画)bounce(跳动)

$(“.well”).addClass(“animated shake”);//$(选择).well(well类),add(添加)Class(属性)animated(动画)shake(震动)

$(“#target3”).addClass(“animated fadeout”)//$(选择)#target3(id为target3),add(添加)Class(属性)animated(动画)fadeout(渐消)

$(“#target1”).css(“color”,”red”);//$(选择)#target1(id为target1),add(添加)css(属性)color(颜色)red(红色)

$(“#target1”).prop(“disabled”, “true”);//$(选择)#target1(id为target1),prop(属性)disable(不可选)true(真)

$(“#target4”).html(“<em>#target4</em>”);//$(选择)#target4(id为target4)的html的内容被<em>#target4</em>代替

$(“#target4”).remove( );//$(选择)#target4(id为target4)的元素被移除

$(“#target2”).appendTo(“#right-well”);//$(选择)#target2(id为target2)的元素被移动到id为right-well的div中

$(“#target5”).clone().appendTo(“#left-well”)//$(选择)#target5(id为target5)的元素复制,然后移动到id为left-well的div中

$(“#target1”).parent().css(“background-color”,”red”)//$(选择)#target1(id为target1)的元素,的父元素,设定样式,背景颜色为红色

$(“#right-well”).children().css(“color”,”orange”)//$(选择)#right-well(id为right-well)的元素,的子元素,设定样式,颜色为橙色

$(.target:nth-child(n))选择器//类元素(.target)的子元素,2n-偶数,2n+1基数,n为2第二个子元素

$(“.target:even”).addClass(“animated shake”)//target属性为偶数的元素,添加效果,震动;odd为奇数

$(“body”).addClass(“animated hinge”)//给body元素添加 hinge(折挂)动画效果

</script>

$(bling)符号来选择元素,然后添加操作。

.addClass添加class属性

.css改变css样式

.prop改变属性(可选不可选)

.html改变选中者的内容

.remove()移除选中者

.appendTo()把元素从一个div移动到另一个div中

.clone()克隆元素

.parent()选中元素的父元素

.children()选中元素的子元素

element:nth-child(n)第n个element元素的子元素

freecodecamp第一个项目爱因斯坦简单主页:

https://codepen.io/conanskyforce/pen/yJKpRg