00_HTML入门第一天

HTML入门

body标记的常见属性：bgcolor 设置背景颜色；text 设置文本颜色；link 设置链接颜色；vlink 设置已经访问了的链接颜色；alink 正在点击的链接颜色；
meta是单标记
多个空格和回车会被视为一个空格
pre预格式化标记，保留预先编排好的格式，比如显示多个空格
ul 无序列表 ol 有序列表，有type属性，自定义排序符号，type属性值为（1,A,a,I,i),li的value属性值，自定义起始值

dl dt dd 对列表条目进行简短的说明

<dl>

<dt>软件说明1：</dt>

<dd>balabalabala</dd>

<dt>软件说明2：</dt>

<dd>balabalaballa</dd>

</dl>

文档标记
1. hn 标题标记，共有六级
2. font 字体设置标记，size属性，1-7，默认为3；face字体属性，如楷体（Kaiti），仿宋（Fangsong）；
3. b粗字体标记
4. i 斜字体标记
5. sub 文字下标字体标记
6. sup 文字上标字体标记
7. tt 打印机字体标记
8. cite 引用方式的字体，通常是斜体
9. em 表示强调，通常显示未斜体字
10. strong 表示强调，通常显示为粗体字
11. small 小型字体标记
12. big 大型字体标记
13. u 下划线字体标记
图像标记 <img src="文件路径" width="宽" height="高" border="边框宽度" alt="提示文字">
宽高单位：px、em、cm、mm；
alt属性：作用1 当网页上的图片加载完成后，鼠标移动到上面去，会显示这个图片指定的属性文字；
作用2 如果图像加载失败，会用文字来代替图像显示；
作用3 搜索引擎可以通过这个属性的文字来抓取图片）
链接标记 <a href="链接地址" target="打开方式" name="页面锚点名称">链接文字或者图片</a>
target属性值：_blank 在一个新窗口打开链接；_self（默认）在当前窗口打开链接；_parent 在父窗口打开页面；_top 在顶层窗口打开页面

表格

<table width="宽,默认单位为px,可加可不加" cellspacing="单元格与单元格的间距" cellpadding="单元格与内容的间距" border="同时设置表格和单元格的边框" align="left(默认)/bottom/right">

<caption align="top/bottom">表格标题</caption>

<tr bgcolor="背景颜色" align="left/right/center" valign="middle/top/bottom"> *align是水平对齐方式，valign是垂直对齐方式，valign默认

<td rowspan="设置单元格所占行数" colspan="设置单元格所占列数">第一列</td>

<td>第二列</td>

</tr>

</table>

*补充，th是表头

form表单
input输入框：size属性设置控件长度；maxlength属性设置输入框允许输入的最大字符数；
eq:maxlength="10"：表示输入框最多输入 10 个字符(中文也算一个字符)，超过之后将不能再输入；

size="5"：表示输入框只显示 5 个可见的字符，但可以输入无数多的字符；

radio 单选按钮；checkbox 复选框；两者都可以通过checked属性设置默认选中项，写法为checked="checked"或者直接checked
textarea多行文本域：cols和rows属性
菜单下拉文本域：
```
<select  name="addr" multiple>   *mutiple是多选属性

<option value="chengdu">成都</option>

<option value="shanghai">上海</option>

<option value="fujian">福建</option>

</select>
```
框架集frameset
```
<html>
<frameset rows="20%,10%,*" >
<frame src="top.html" noresize>  子框架1
<frameset cols="10%,*">  子框架2
<frame src="top.html" scrolling="no">
<frame src="top.html">
</frameset>
<frame src="top.html">  子框架3
</frameset>
</html>
*注意：frameset不能喝body同时存在
```
对于rows和cols属性，使用像素数或百分号分割窗口，*表示剩余部分，如果用“*，*，……”表示均分
frameborder 指定是否显示边框，0不显示，1显示；
border 设置边框宽度，默认为5个像素

frame是子窗口标记，用src属性指定网页地址，name设置子框架名称，noresize不能调整框架大小，
scrolling(可选值：auto/yes/no) 是否需要滚动条，frameborder 是否需要边框
补充 DOCTYPE声明：必须位于文档第一行，用来指定页面所使用的HTML的版本，html5中直接使用<!DOCTYPE html>就可以了

CSS入门

使用css的三种方式：1 内链样式表（）；2 嵌入式样式表（）；3 引入式
1、行内样式/内链样式表（在HTML元素的内部，利用style属性直接定义样式），
例： <body style="background-color: green;margin: 0;padding: 0;">

2、内部样式表/嵌入式样式表（在网页<head>标签中，利用style标签定义样式）
例：
```
body{

 　　    background-color: green;

           margin:0;

           padding: 0;

}
```
3、外部样式表/引入式样式表（将样式定义在另外一个样式表文件中）
例：
（a）通过<link>标签引入样式表：<link rel="stylesheet" type="text/css" href="my.css">

（b）通过@import导入样式表：
```
在html中

<style type="text/css">

@import url(CSS文件路径地址);

</style>

在css中

直接使用

@import url(CSS文件路径地址);
```
　　
选择器

.myclass p{} 选择myclass类下面的p元素
h1,h2,p{} 组合选择器，以逗号分隔
伪类选择器（a链接样式）：a:link 正常链接的样式；a:hover 鼠标放上去的样式；a:active 链接被选中时的样式；a:visited 访问过的链接的样式

CSS常见属性

颜色属性

color:green;

color:#ff0000;  每两位十六进制数分别表示红绿蓝的取值范围

color:rgb(255,0,0); rgb(红，绿，蓝)，每种颜色取值范围为0~255

color:rgba(255,0,0，0.8); rgb(红，绿，蓝,Alpha透明度)，每种颜色取值范围为0~255，透明度取值范围0~1,1为100%显示

字体属性

字体大小；font-size：px 设置一个固定的值/ %父元素的百分比/ smaller 比父元素更小/ larger 比父元素更大/ inherit 继承父元素

定义字体：font-family:serif,微软雅黑；（以逗号分隔多个字体，以确保字体不存在时直接使用下一个

字体加粗：font-weight:normal(默认值)/bold/bolder/lighter

字体样式：font-style:normal/italic/oblique(倾斜)/inherit

小型大写字母显示文本：font-variant:normal/small-caps/inherit

背景属性

body{

	/*background-color:rgb(0,0,0);*/

	background-image:url('0.jpg');

	background-repeat:no-repeat;

	background-position: left,top;

}

1、背景颜色：background-color

2、图片背景：background-image:url()

3、背景重复：repeat(默认，重复平铺满）/no-repeat(不重复)/repeat-x(向x轴重复）/repeat-y(向Y轴重复）

4、背景位置：background-position:X轴（left/right/center)、Y轴（top/bottom/center或者用数值表示)

文本属性

text-align:横向排列（left/right/center)

line-height:文本行高（% 基于字体大小/px固定值）

text-indent:首行缩进（% 基于父元素/px固定值，默认为0/inherit）

letter-spacing:字符间距（normal/px固定值，可以为负值/inherit）

word-spacing:单词间距（normal/px固定值，可以为负值/inherit）

direction:文本方向（ltr默认/rtl(right to left)）;

text-transform:文本大小写（none 默认/capitalize 每个单词首字母大写/uppercase 全部大写/lowercase 全部小写/inherit 继承

边框属性

 border-style:边框样式（none/solid 直线/dashed 虚线/dotted 点状/double 双线……）

还可以细分为：border-top-style,border-bottom-style,border-left-style,border-right-style

border-width:边框宽度（px固定值/thin 细/medium 中等/thick 中等/inherit 继承

border-color:边框颜色

还可以细分为：border-top-color,border-bottom-color,border-left-color,border-right-color

或者同一风格：四个值（上、右、下、左）/三个值（上、左右、下）/两个值（上下、左右）
简写方式：border:solid 2px red;样式、宽度、颜色

列表属性

list-style-type:标记的类型（disc 默认实心圆/none/circle 空心圆/square 实心方块/decimal 数字……

list-style-position:标记的位置（inside 标记放置在文本以内/outside，默认值，标记放置在文本以外/inherit);

list-style-image:url();设置图像标记

简写方式  list-style:type position url(image); image不存在时以type方式显示

如：ol{list-style:decimal inside url('0.jpg');}

DIV+CSS布局

div是块级元素，span是内联元素
margin和padding以border为界限，其中border和padding会增加盒子的宽高，margin是直接在盒子外围扩张

position定位

position定位：relative 正常定位/absolute 相对父元素定位（注意父元素的position要为relative)

fixed 根据浏览器窗口进行定位/static 没有定位

例如：

div{width: 100px;height: 100px;background-color: green;color: white;border:solid 1px black;margin: 10px;}

div.d1{position:relative;left: 20px;top: 20px;}
div.d3{position: fixed;left: 0;top: 0;}

z-index 层覆盖优先级
display显示属性：none/block/inline
float浮动属性

clear:both;浮动（当未定义浮动的元素紧挨着浮动元素的时候会受到影响，解决办法是专门定义一个清除浮动的div作为间隔）

<style type="text/css">

.main{width: 600px;height: 500px;border:solid 1px red;margin: 0 auto;}

.top{height:100px;background-color: pink;}

.left{height:100px;background-color: yellow;float: left;}

.right{height:100px;background-color: orange;float: right;}

.bottom{height:100px;background-color: blue;}

.clear{clear: both;}

</style>

</head>

<body>

<div class="main">

<div class="top">top</div>

<div class="left">left</div>

<div class="right">right</div>

<div class="clear"></div>

<div class="bottom">bottom</div>

</div>

</body>

overflow溢出处理：hidden/scroll 无论是否超出都添加滚动条/auto 当内容溢出时添加滚动条

兼容问题及高效开发工具
1. 　　测试工具：IE Tester、Multibrowser

div是块级元素，span是内联元素
margin和padding以border为界限，其中border和padding会增加盒子的宽高，margin是直接在盒子外围扩张

00_HTML入门第一天的更多相关文章

JAVA入门第一季（mooc-笔记）
笔记相关信息 /** * @subject <学习与创业>作业1 * @author 信管1142班 201411671210 赖俊杰 * @className <JAVA入门第一季 ...
Asp.Net MVC3 简单入门第一季（三）详解Controller之Filter
前言前面两篇写的比较简单,刚开始写这个系列的时候我面向的对象是刚开始接触Asp.Net MVC的朋友,所以写的尽量简单.所以写的没多少技术含量.把这些技术总结出来,然后一简单的方式让更多的人很好的接 ...
Asp.Net Web API 2(入门)第一课
Asp.Net Web API 2(入门)第一课前言 Http不仅仅服务于Web Pages.它也是一个创建展示服务和数据的API的强大平台.Http是简单的.灵活的.无处不在的.你能想象到几乎 ...
ElasticSearch入门第一篇：Windows下安装ElasticSearch
这是ElasticSearch 2.4 版本系列的第一篇: ElasticSearch入门第一篇:Windows下安装ElasticSearch ElasticSearch入门第二篇:集群配置 E ...
Docker 入门第一部分：定位和设置
目录 Docker 入门第一部分: 定位和设置 Docker概念镜像和容器容器和虚拟机准备你的Docker环境测试 Docker 的版本测试 Docker 安装回顾总结 Docker ...
leetcode 入门第一题 4ms？ 8ms? Two Sum
今天开启leetcode 入门第一题题意很简单,就是一个数组中求取两数之和等于目标数的一对儿下标 1.暴力 n^2 两个for循环遍历用时0.1s 开外代码就不用写了 2.二分 nlogn 我们 ...
[MVC.NET] Asp.Net MVC3 简单入门第一季
转自:http://www.cnblogs.com/fly_dragon/archive/2011/10/12/2208042.html 初识Asp.Net MVC2.0 初识Asp.Net MVC2 ...
Django入门第一步：构建一个简单的Django项目
Django入门第一步:构建一个简单的Django项目 1.简介 Django是一个功能完备的Python Web框架,可用于构建复杂的Web应用程序.在本文中,将通过示例跳入并学习Django.您将 ...
JMeter入门 | 第一个并发测试
JMeter入门 | 第一个并发测试背景近期我们组新来了一些新同事,之前从来没有用过JMeter做个并发测试,于是准备了一系列小教程去指引新同事,本章主要是新人入门体验教程,快速实现第一个接口并发 ...

随机推荐

Virtual Box配置CentOS7网络
1.先管理中配置两个网络最好的办法就是使用两块网卡,nat(虚拟机访问互联网,使用10.0.2.x段)和host-only(虚拟机和主机互相通信,使用192.168.56.x段) 2.接下来对Cen ...
css-翻页
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
Two Sum（两个数的相加）
2017.11.10题目描述:Given nums = [2, 7, 11, 15], target = 9, Because nums[0] + nums[1] = 2 + 7 = 9, retur ...
使用python写一个简单的C段扫
纠结C段查询N久..刚刚拿骚棒FD去抓御剑的包,发现emmm...申请了必应的Key 然后去拿必应API查.这里疼[心]原本也想去弄的.但是人懒. 然后就没有然后了. 代码: 生成IP段的脚本图1 # ...
lodash源码分析之缓存方式的选择
每个人心里都有一团火,路过的人只看到烟. --<至爱梵高·星空之谜> 本文为读 lodash 源码的第八篇,后续文章会更新到这个仓库中,欢迎 star:pocket-lodash gitb ...
Stars(树状数组)
http://acm.hdu.edu.cn/showproblem.php?pid=1541 Stars Time Limit: 2000/1000 MS (Java/Others) Memor ...
面试(2)-java-se-HashSet和TreeSet12
Set是java中一个不包含重复元素的collection.更正式地说,set 不包含满足 e1.equals(e2) 的元素对 e1 和 e2,并且最多包含一个 null 元素.正如其名称所暗示的, ...
Linux下C++/C的编译调试
这几天因为任务的原因我需要在ubuntu下编写程序.因此恶补了许多linux程序编写的知识.我分以下几个方面总结我所学的知识. gcc,g++,make命令的使用 gdb 调试 VScode的使用 c ...
[国嵌攻略][165][usb下载线驱动设计]
查看USB设备的生产商ID和设备ID 示例: lsusb Bus 001 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub 生产商ID是1d ...
国寿e店/人寿云参会云助理，不去公司就能刷脸考勤打卡？
自从2017年3月平安保险公司实行E行销打卡考勤以来,保险增员迅猛增加,保险业绩也随之水涨船高.年底开始中国人寿保险也陆续开始实行app考勤,有些需要连接公司指定WiFi,或在指定地点方可打卡考勤.不 ...

00_HTML入门第一天

HTML入门

CSS入门

00_HTML入门第一天的更多相关文章

随机推荐

热门专题