初学html的单词笔记

font-size: 文字大小
color：顏色
solid：边框线
text-align: 間距
center：文字放在中間
<head> 网页头部
<title> 网页标题
<link> 引用
<style> 样式
<em> 强调斜体
<strong> 自己加粗
<span> 是一个区块标签，它类似div，class标签，定义一个小块元素，只不过这个标签签是没有语义的
<br/> 相当于回车
<hr/> 加分割线
<blockquote> 长引用
  空格
<addreass> 斜体
<code> 代码为一行代码时
<pre> 代码为多行代码时
<q> 双引号
<ul><li> 没有前后顺序
<ol><li> 有序列表
<div> 逻辑部分
<div id="版块名称">…</div> 每一板块具有唯一性
<table> 表格的开始
<tbody>当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。
<tr> 表格的一行
<td> 表格一单元格
<th> 表格表头
<caption> 标题内容
text-shadow：阴影可以同时上多个颜色
-webkit-gradient(linear,10% 10%,100% 100%,color-stop(0.14,#35b550),color-stop(0.5,#8aca8c),color-stop(1,#2d85ca)) 颜色渐变功能

<table summary> 标题摘要
<body bgcolor="blue">(设置背景颜色）
<body background="……jpg">（设置背景图片）
div.class 寻找用于class德尔div
div .class 寻找div里面的class

<body background="……jpg" background-repeat:repeat-x：background-position：x轴 y轴(图片的位置)>
repeat-x:水平铺展
repeat-y：垂直平铺
repeat：水平垂直平铺
no-repeat：不平铺

table{
margin:0 auto; 让表格居中
}
ul{list-style:none;margin:0;padding:0;}
li{float:left;display:inline;margin-right:8px;}

<a href="" target_blank>文本</a>打开新窗口
<a href="" target_self>文本</a> 在本窗口打开
<a href="" target_parent>文本</a>父窗口
<a href="" target_top>文本</a> 整个浏览器窗口

邮箱地址： malito 例：<a href="mailto:yy@imooc.com">发送</a>
抄送地址：cc= 例：<a href="mailto:yy@imooc.com？cc=dsdsa@imooc.com">发送</a>
密件抄送 bcc= 例：<a href="mailto:yy@imooc.com？bcc=dsdsa@imooc.com">发送</a>
多个收件人、抄送、密件抄送人 ; 例<a href="mailto:yy@imooc.comp;ppdsdsa@imooc.com">发送</a>
邮件主题 snnject= 例：<a href="mailto:yy@imooc.com？subject=发送邮件">发送</a>
邮件内容 body= 例：<a href="mailto:yy@imooc.com？body=欢迎来到慕课网">发送</a>

<form>
<form method="post/get两种穿线方式" action="网址">
<label for="控件id名称">
<input type="text（显示）/password（密码）/submit（提交按钮）/radio(单选）/checked（多选）/reset（重置）/ button(默认按钮没有任何效果)/file（上传文件）
/email（邮箱）/url（网址）/number（数字）/number（滑块）/image（图片）"

name="名称"
maxlength="20":锁定text和password的最大字符，默认无限大
size="5"：默认宽度
value="显示当前文本"
disabled="disabled" 锁定
readonly="readonly" 只读 />

</form>

内联式的css
<style type="text/css">
p{

display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。
visibility:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。
word-spacing:50px：单词间距；
letter-spacing:20px: 字母间距；
border-radius: 50px; 边界半径
overflow:hidden; 溢出隐藏；
display：inline-block：内联块；
clear：both; 清除浮动
line-height:2em; 设置行间距（行高）
border:1px solid red; 添加边框样式
color:red; 设置文字颜色
background:pink; 上背景色
a{display:block;} 内联元素a转换为块状元素
border-radius:8px; 使边框变圆
line-height:40px; 行高
max-height:20px 设置元素的最大高度。
opacity （css3）透明度
vertical-align:middle：垂直居中；
vertical-align：垂直对齐；
white-space:pre 空白会被浏览器保留"
z-index:100 优先级（只在相对和绝对布局有用
nth-of -type() 同级数列选中

frameborder:1 1有边框 0无边框
background-repeat:repeat-x; 重复方式：x轴重复；no-repeat 不重复
background-position:3px center; 背景位置水平位置垂直位置

font-size:20px; 设置文字字号
font-family:"微软雅黑"; 设置字体样式
font-weight:bold; 设置字体加粗
font-weight:normal; 设置字体变细
font-style:italic; 设置为斜体样式；

text-decoration:underline：文字设置下划线；
text-decoration:none 删除下划线
text-decoration:line-through：删除线；
text-indent:2em：缩进；（注意：2em的意思就是文字的2倍大小。）
align——表示左右居中——left，center，right 控制位置
valign——控制上下居中——left，center，right
boeder:1px solid #000 下划线

在ul里面white-space: nowrap; 不遇到《br/>不会换行
no-repeat 不重复

transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate

ul li{list-style:none;
padding:0;
margin:0; }

a:hover img{filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8;}
filter 设置平台IE半透明效果样式，值1-100，值越小越透明，设置IE8以前的透明使用
opacity 设置IE半透明效果样式，值0.1-1，值越小越透明，设置IE8以后版本的透明使用
-moz-opacity 对非IE浏览器设置，比如火狐，语法与IE相同

none不使用项目符号
disc实心圆，默认值
circle空心圆
square实心方块
decimal阿拉伯数字
lower-roman小写罗马数字
upper-roman大写罗马数字
lower-alpha小写英文字母
upper-alpha大写英文字母

鼠标经过它时候的效果：
a:link {color: #FF0000} /* 未访问时的状态 */；
a:visited {color: #00FF00} /* 已访问过的状态 */；
a:hover {color: #FF00FF} /* 鼠标移动到链接上时的状态 */；
a:active {color: #0000FF} /* 鼠标按下去时的状态 */；

}

display属性值:

none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为行内元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row 此元素会作为一个表格行显示（类似 <tr>）。
table-column-group 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column 此元素会作为一个单元格列显示（类似 <col>）
table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption 此元素会作为一个表格标题显示（类似 <caption>）
inherit 规定应该从父元素继承 display 属性的值。

</style>

内联式的css span style="color:red" 这里文字是红色。</p>
外部式的css <link href="aaa" rel="stylesheet" type="text/css" /> 新建一个文件文件名需和href一样

标签选择器： p{color:red;}
类选择器： .a{color:red;} <span class="a"> stress为变量，前面要加英文句号（.）可多次使用
ID选择器： #a{color:red;} <span id="a"> ID唯一性，前面加# 具有唯一性
子选择器； p>span{color:red;} <p><span>aaa</span>saaa</p> 用于选择指定标签元素的第一代子元素。(即右边的值会变化)
后代选择器： p span{color:red;} <p><span>aaa</span>saaa</p> 用于选择指定标签元素下的后辈元素（选取从左边到右边所有的值）
通用选择器： * {color:red;} 它的作用是匹配html中所有标签元素
伪类选择器： a:hover{color:red;} <a href="http://www.imooc.com"> 鼠标滑过的状态来设置字体颜色
分组选择器： p,h1{color:red;} 同时运用多个元素

权值规则：
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。
p{color:red!important;}!important具有最高值

三种定位方式position
absolute绝对定位:让它去哪就去哪
relative相对定位:人走了,但是心还在那里.
fixed固定定位: 不管水怎么流,船还是被栓在那里.在浏览器中的位置是固定的，不会因浏览器中的滚动条滚动而变化。
clip: rect(0px, 78px, 156px, 0px); 剪切定义用于其它定位上面（左上右上右下左下）

多次动画

a{ width:20px（%）; 宽
height：20px（%）：高
float:left; fudong
margin:（0px 0px 0px 0px ）上右下左距离在为顶块元素用auto即可居中
background：red 背景颜色
box-shadow:1px 1px 15px red; 盒子的阴影（宽高盒子本身阴影颜色）
text-shadow; 文字的阴影（宽高文字本身阴影颜色）
animation:a 5s; 动画多少秒完成
animation-iteration-count:infinite; 多次运行 }
@keyframes a 可以设置帧数
{0% {background:#fff; height:20px;} 初始
25% {background:#4285f4; height:60px;} 变长
50% {background:#079246; height:300px;} 变长
100% {background:#fff;height:20px;} 回到原来帧数的变化}

一次动画

a{
display:inline-block;
width:20px;
height:20px;
text-align:center;
border-style（边框样式）常见样式有：dashed（虚线）| dotted（点线）|solid（实线）。
margin:2px;
box-shadow:1px 1px 8px;
border:4px solid #586;
border-radius:8px; 圆角

a:hover{
background-color:#990；
border:4px solid #586;
border-radius:8px;
transition: box-shadow 1s, background 1s；
}

盒模型

（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。
padding 内编剧、
margin 外边距
width 内容宽度
border 边框

border-bottom:1px solid red;下
border-top:1px solid red; 上
border-right:1px solid red; 右
border-left:1px solid red; 左边框

*{ margin:0; padding:0; }
em { font-style:normal; }
li { list-style:none; }
a { text-decoration:none; }
img { border:none; vertical-align:top; }
table { border-collapse:collapse; }
input,textarea { outline:none; }
textarea { resize:none; overflow:auto; }
body { font-size:12px; font-family:"微软雅黑"; }

CSS 规定的定位机制有三种，分别是标准文档流、浮动及绝对定位。

W3C标准：
1、结构化标准语言（HTML和XML）
2、表现标准语言（CSS）
3、行为标准化语言（DOM和ECMAScript）
倡导结构、样式、行为分离

CSS的三种定位机制：
1、标准文档流（Normal flow）
-- 从上到下，从左到右，输出文档内容；
-- 由块级元素和行级元素组成
块级元素：（1）从左到右撑满页面，独占一行；（2）触碰到页面边缘时，会自动换行；（3）常见的块级元素：div、ul、li、dl、dt、p...
行级元素：（1）能在同一行内显示；（2）不会改变HTML文档结构；（3）常见的行级元素：span、strong、img、input...
块级元素和行级元素都是盒子模型。
2、浮动（Floats）
3、绝对定位（Absolute positioning）

盒子3D模型分为五层
第一层border 第二层 content+padding 第三层 background-image 第四层 background-color 第五层 margin
盒子模型分为边框 border 内边距 padding 外边距 margin 内容content。

margin的auto属性原理:(浏览器的宽度-外包含层的宽度)/2=外边距时不能在使用浮动及定位

float属性三个值:left-左浮动<br>
right-右浮动<br>
none-不浮动
特点:元素会左移,右移,知道触碰到容器为止.但却仍会出于标准文档流中.只对下一个有用

清除浮动的常用方法：
1、clear属性——常用clear：both；clear：left；或者clear：right。
2、同时设置width：100%（或固定宽度）+overflow（移出属性）:hidden；（一般情况下对受到浮动影响的元素设置这些属性）；
空标签无意义(如<br />)，不建议使用此方法清除浮动。

自适应的布局
<meta name="viewport" content="width=device-width, initial-scale=1" />

如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。

除了用html标签加载CSS文件，还可以在现有CSS文件中加载。

菜单
<html>
<ul>
<li class="main">菜单
<ul>
<li>子菜单</li>
<li>子菜单</li>
</ul>
</li>

初学html的单词笔记的更多相关文章

初学MySQL基础知识笔记--01
本人初入博客园,第一次写博客,在今后的时间里会一点点的提高自己博客的水平,以及博客的排版等. 在今天,我学习了一下MySQL数据库的基本知识,相信关于MySQL的资料网上会有很多,所以我就不在这里复制 ...
初学Java语法（笔记）
2015-12-30
初学MySQL基础知识笔记--02
查询部分 1> 查询数据中所有数据:select * from 表名 2> 查询数据中某项的数据:eg:select id,name from students; 3> 消除重复行: ...
初学cdq分治学习笔记（可能有第二次的学习笔记）
前言骚话本人蒟蒻,一开始看到模板题就非常的懵逼,链接,学到后面就越来越清楚了. 吐槽,cdq,超短裙分治....(尴尬) 正片开始思想和普通的分治,还是分而治之,但是有一点不一样的是一般的分治在 ...
初学java集合框架笔记
List接口常用方法: 方法名说明 boolean add(Object o) 在列表的末尾顺序添加元素, 起始索引位置从0开始 void add(int index,Object o) 在 ...
[开发笔记]-初学WPF之自学笔记
一:动态加载背景图片代码: 在窗体加载时,Window_Loaded 方法中: #region 测试动态加载背景图片 /* 1.图片右键属性: 复制到输出目录:选择“如果较新则复制” 生成操作选择 ...
初学redux笔记，及一个最简单的redux实例
categories: 笔记 tags: react redux 前端框架把初学redux的一些笔记写了下来分享一个入学redux很合适的demo, 用redux实现计数器这是从阮一峰老师git ...
Python初学
经同学推荐,学习了下Python语言,看Python的介绍,它本身是一个面向对象的解释型脚本语言,我初看到这句话的时候就在想,一个脚本语言还搞成面向对象?有这个必要么?原谅我肤浅了一把. 它还被俗称为 ...
初学VUE2.0
初学VUE2.0 (个人笔记,写完后发现好乱....下期使用markdown书写.) 概述 webstorm添加对VUE的支持 http://www.jianshu.com/p/142dae4f8b5 ...

随机推荐

ISO/OSI七层网络参考模型、TCP/IP四层网络模型和教学五层网络模型
一.说明直接的原因是昨晚<计算机网络(自顶向下方法)>到货了,以为能讲得有些不一样,但看完整本也就是老调地讲过来讲应用层.传输层.网络层.网络接口层.感觉比之谢希仁的<计算机网络& ...
summer_19th,Nov 2018
一.内存管理: Cpython解释器的垃圾回收机制一个没有绑定任何变量名的值被称为垃圾,即该值的引用计数为零. 二.变量值的三个特点: id: 内存地址 type: 数据类型值总结:id相同,值 ...
pycharm搭建开发配置，远程调试，数据库配置，git配置等
1 开发环境搭建 1.1 简介使用虚拟机作为代码运行环境,本地使用pycharm进行代码编辑,使用远程调试功能进行debug. 1.1 安装centos虚拟机环境: 1.操作系统: 2.网络配置: ...
UVa LA 2965 - Jurassic Remains 中间相遇，状态简化难度: 2
题目 https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_pr ...
ssm框架整合中的双亲容器
SSM中Spring双亲容器的构造过程和XML加载顺序 Spring的父子容器问题和坑 Spring使用父子容器实现了很多功能,比如在Spring MVC中,展现层Bean位于一个子容器中,而业务层和 ...
Saiku通过iframe嵌入web页面（六）
Saiku通过iframe嵌入系统页面前提: Saiku已安装好,并且配置了数据源,熟练了saiku的基本使用. 一.将整个Saiku嵌入页面在web项目中,新建index.jsp页面,内容如下: ...
vue-router-1-安装与基本使用
npm install vue-router import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) / ...
3.1 Makefile
安装make 安装make sudo apt-get install make make -v
查看json数据更新情况
#! python3 # -*- coding:utf8 -*- #主要为读取excel中接口地址,打开网页爬取url页面中数据,解析json,检查是否符合逻辑(正常) import requests ...
Python的网络编程--思维导图
Python的网络编程--思维导图

初学html的单词笔记

初学html的单词笔记的更多相关文章

随机推荐

热门专题