html基本结构
<html>内容</html> html开始标记
<head>内容</head> html文件头标记
<title>内容</title> htmlhtml文件标题标记
<meta>内容</meta> 文件的元信息(网页的描述信息)，必须在head元素里
<body>内容</body> 文件主体部分

格式标记
<br> 强制换行标记
<hn> 标题标记：共6级，对应不同的大小
<font> 字体设置标记，设置字体格式，其中：
size 大小 color 颜色 face 字体 例如：<font size='7' color="red" face="宋体">
<b> 粗字体标记
<i> 斜字体标记
<sub> 文字下标字体标记 例如：2<sub>2</sub>
<sup> 文字上标标字体标记，用法与下标类似
<tt> 打印机字体标记
<cite> 引用方式的字体，通常为斜体
<em> 表示强调，通常为斜体
<strong> 表示强调，通常为粗体
<small> 小型字体标记
<big> 大型字体标记
<u> 下划线字体标记
<p> 换段落标记
<center> 居中对齐标记
<pre> 预格式化标记
<li> 列表项目标记：相当于列表中行
<ul> 无序列表标记
<ol> 有序列表标记：type属性表示排序类别
1 数字
A 字母
a 小写字母
I 大写罗马数字
i 小写罗马数字 i ii iii
<dl><dt><dd> 定义型列表
<hr> 对平分割线标记
<div> 分区显示标记：划分区域，为了美观

图像标记
<img> 图像标记，例如：
<img src='文件位置' width='宽' height='高' border='边框高度' alt='下行分解'>
单位：px, em, cm, mm

alt 有是三个作用：
1.图片加载成功后，鼠标移动到上面，会显示其指定的文字
2.图片加载失败后，用文字代替图片显示
3.搜索引擎通过其指定的文字来抓取图片

<img>为单标记

超链接
<a>标记基本语法 例如：
<a href='超链接地址' target='打开方式' name='页面锚点名称'>文字或者图片</a>
target属性值：
_blank 在新窗口打开链接
_self（默认值）在当前窗口打开链接
_parent 在父窗口打开链接
_top 在顶层窗口打开链接

表格
<table 属性1='属性值'...>表格内容</table>
width：表格宽度，值可以是像素(px)或父级元素百分比(%)
height：表格高度，值可以是像素(px)或父级元素百分比(%)
border：表格外边框的宽度
align：表格的显示位置，left居左显示 center居中显示 right居右显示
cellspacing：单元格的间距 默认为2px，单位为像素
cellpadding：单元格内容与单元格边框的间距，单位为像素
frame：控制表格最外层的四条线框：
void 无边框，above 仅顶部有，below 仅底部有，hsides 仅顶部和底部有
lhs 仅左侧有，rhs 仅右侧有，vsides仅左右侧有，border 全部都有
rules：控制单元格之间的分割线：
none（默认值）无分割先，all 全部有分割线，rows 仅行分割线
clos 仅列分割线，groups 仅行组与列组之间有分割线

<table>之后，<tr>之前，<caption> 指在表格中使用标题，align属性有四个值：
top 放在表格的上部，bottom 放在表格的下部
left 放在表格的左部，right 放在表格的右部

<tr>...</tr> 定义表格的行，可以嵌套多个<td>或<th>，常见属性：
bgcolor='颜色值' align='值' 设置垂直对齐方式：
top 顶端对齐，bottom 底端对齐 middle 居中对齐
valign='值' 设置水平对齐方式：
left 靠左对齐，right 靠右对齐，center 居中对齐

<td>和<th> 必须嵌套在<tr>内，成对出现，
<th> 表头标记，通常位于行首或列首，字体默认加粗
<td> 数据标记，默认不会加粗
两者属性一样：都是设置单元格
bgcolor 背景，align 对齐方式，valign 垂直对齐方式
width 宽度，height 高度，rowspan 所占行数，colspan 所占列数

css 层叠样式表，由选择器以及一条或多条申请构成
根据选择器的定义方式，将样式表的定义分为三种方式：
1.HTML标记定义：例如 p{属性:属性值;属性1:属性值1}，多个样式用;隔开
2.ID选择器定义：例如 #word{test-align:center;color:red;} #定义id
3.class选择器：例如 p.center{test-align:center;} .定义class

颜色属性
color:green 颜色名称
color:#ff6600 十六进制
color:#f60 简写方式
rgb(255,255,255) RGB方式 红(R),绿(G),蓝(B)
Rcolor:rgba(255,255,255,1)GBA方式 Alpha 透明度

字体属性
font-size 定义字体大小 例如：font-size:14px
font-family 定义字体 例如：font-family:字体1,字体2
font-weight 定义字体加粗，默认normal
1.名称 bold (粗),bolder (更粗),lighter (更细)
2.数字 100~900 400=normal 700=bold

背景属性
background-color 定义背景颜色
backgroud-image 定义背景图片 例如：backgroud-image:url(none)
backgroud-repeat 定义背景重复方式，省
backgroud-position 定义背景位置
横向上 left，right，center 纵向上 top，bottom，middle

文本属性
text-align 设置文本对齐方式 left，right，center
line-height 设置文本行高 取具体指或百分比
text-indent 行首缩进 例如：text-indent:50px
letter-spacing 设置字符间距 默认normal

列表
list-style-type 表明列表项标记，省
list-style-position 表明列表项中标记的位置，省
list-style-images 设置设置图像列表标记，省

HTML和CSS基础知识的更多相关文章

  1. 前端开发：css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  2. CSS基础知识之float

    前段时间写过一篇CSS基础知识之position,当时对float的理解不太准确,被慕课网多名读者指出(原文已修正,如有误导实在抱歉).现对float进行更深入的学习,在此把学习心得分享给大家. 浮动 ...

  3. (转)第一天　XHTML CSS基础知识 文章出处：标准之路(http://www.aa25.cn/div_css/902.shtml)

    欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础,也 ...

  4. CSS基础知识之position

    最近在慕课网学习了 网页布局基础 和 固定层效果 ,都是由声音甜美的 婧享人生 老师所录制,视频详细讲解了CSS中position的用法,在此把学习笔记分享给大家. CSS定位机制 标准文档流(Nor ...

  5. 【CSS】 CSS基础知识 属性和选择

    css基础知识 html的基本标签都是千篇一律的,为了能够个性化外观,就需要进行样式的调整,而css就是专门用来维护,管理样式的一种格式.在html中定义css有三种方法 1. 为标签添加style属 ...

  6. CSS基础知识01

    一.CSS基础知识介绍 1.css是cascading style sheet层叠式样式表的简写 2.css小用法 加粗:font-weight:bold;             正常用:norma ...

  7. 〖前端开发〗HTML/CSS基础知识学习笔记

    经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...

  8. Web学习篇之---css基础知识（一）

    css基础知识(一) 1.css样式: 载入css样式有下面四种: 1).外部样式 2).内部样式 3).行内样式 4).导入样式 <link href="layout.css&quo ...

  9. DIV+CSS专题：第一天　XHTML CSS基础知识

    欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准.   学习本系列教程需有一定html和css基础 ...

  10. HTML+CSS基础知识（2）选择器的使用、盒子模型的讲解、列表的使用

    文章目录 1.CSS基础知识 2.css样式 2.1.代码: 2.2 测试结果 3.CSS的语法 3.1 代码 4.块元素和行内元素 4.1 代码 4.2 测试结果 5.常用的选择器 5.1 代码块 ...

随机推荐

  1. Django2.0之后使用外键时遇到 __init__() missing 1 required positional argument: 'on_delete'

    1.Django2.0之后使用外键时遇到 __init__() missing 1 required positional argument: 'on_delete' 需要在外键创建时给on_dele ...

  2. BestCoder Round #93

    这么快两天就过去了啊……昨天是April Fool’s Day,但绝对是我过的所有April Fool’s Day里最没意思的一个…… 估计再不写就要忘了……还是写写吧= = 说好7:00到机房,然而 ...

  3. Tomcat部署路径空格问题

    web项目发布到tomcat下,如果tomcat安装目录为 C:\Program Files\tomcat6\webapps\... 当我们获取当前类的路径时,就会出现空格(%20)问题 C:\Pro ...

  4. GeoAnalytics Server学习笔记

    GA的输入数据源 输入源 存储形式 Spatiotemporal 时空型ArcGIS DataStore 物联网数据 (通过GeoEvent Server输出) 大数据共享目录BigDataShare ...

  5. html5 移动端开发

    移动端开发总结     目录 1.手机与浏览器 2.Viewport(视窗) 3. 媒体查询 4.px,em,rem,pt 5.设备像素比devicePixelRatio 6.移动web中的图标及字体 ...

  6. Bitmap到底占多少内存

    转至:Android 开发绕不过的坑:你的 Bitmap 究竟占多大内存? Bugly 技术干货系列内容主要涉及移动开发方向,是由 Bugly 邀请腾讯内部各位技术大咖,通过日常工作经验的总结以及感悟 ...

  7. Android知识点滴

    今天,把新作的布局状态魅族机上进行测试 发现了一个BUG,造成闪退. 看了下log,一个布局造成的. 开始分析这个布局造成这个问题的原因. 开始艰难的调试过程. 代码注释大法,发现这个问题是一个tex ...

  8. c#之委托详解(Delegate)

    一.委托的概念 在我们学习委托之前,我们来了解下,什么是委托呢? 官方概念:委托是一种安全地封装方法的类型,它与 C 和 C++ 中的函数指针类似.与 C 中的函数指针不同,委托是面向对象的.类型安全 ...

  9. React学习笔记（五）State&声明周期

    React学习笔记(五) 四.State&声明周期 可以为组件添加"状态(state)".状态与属性相似,但是状态是私有的,完全受控于当前组件. 局部状态就是只能用于类(定 ...

  10. Python学习---生成器的学习1210

    在Python中,这种一边循环一边计算的机制,称为生成器: 结论: 生成器本质是一个函数,不同于函数的是它生成的是一个对象,不执行函数内的代码 1.1. 列表生成器 列表生成器: 列表是直接生成数字在 ...