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. POJ P3667 Hotel——solution

    Description The cows are journeying north to Thunder Bay in Canada to gain cultural enrichment and e ...

  2. js 随机打乱数组

    假如有一个数组: var arr1=['a','b','c','d','e','f','g']; 需要将它进行随机打乱,网上好多都是用: arr1.sort(function(){ return 0. ...

  3. redis安装、配置、启停

    Redis is an open source (BSD licensed), in-memory data structure store, used as database, cache and ...

  4. PRINCE2的优势有哪些？

    PRINCE2之所以迅速发展的原因之一是许多企业认识到建立适合自己企业的项目管理标准是一项耗时耗财的工作. 他们至少要花费6-12个月.成千上万个工时来建立一套方法,而这只是最初的成本. 之后他们必须 ...

  5. PLSQL Developer V10 注册码

    PLSQL Developer V10 注册码(V10.0.3.1701可以使用)注册时间至:9999/12/31 License Number:999 Product Code:ljkfuhjpcc ...

  6. webpack学习笔记丁点积累

    webpack是什么? https://webpack.js.org/concepts/ https://code.tutsplus.com/tutorials/introduction-to-web ...

  7. 平台支持的从经典部署模型到 Azure Resource Manager 的 IaaS 资源迁移

    本文介绍如何才能将基础结构即服务 (IaaS) 资源从经典部署模型迁移到 Resource Manager 部署模型. 用户可以阅读有关 Azure Resource Manager 功能和优点的更多 ...

  8. 简说mvc路由

    首先我们通过在Global.asax中的Application_Start将路由信息注册到RouteTable的Routes静态属性中.如下代码所示: public class RouteTable ...

  9. cocos2dx加载骨骼动画，获取骨骼位置

    2015/05/13 需求: (1)希望在骨骼上绑定一个粒子特效 (2)获取骨骼的位置 (3)获取骨骼动画的大小 (4)lua 1. cocostudio动画编辑器 (1)绑定粒子特效(跟随骨骼的移动 ...

  10. Linux kill/pkill/killall命令详解

    kill kill(terminate a process)命令用来终止指定的进程, 对于一个后台进程就须用kill命令来终止,我们就需要先使用ps/pidof/pstree/top等工具获取进程PI ...