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. bzoj一句话题解

    发现好多人都在搞这个...本人也想来试试(Solved刚到70就搞这个靠不靠谱啊喂).会更新的.嗯. 1000-1029 1000 A+B problem (这个还需要一句话吗?). 1001 狼抓兔 ...

  2. redux、immutablejs和mobx性能对比（三）

    四.我的结论 通过第三部分的数据数据分析,我觉得我们可以得到以下结论: 无论是在开发环境还是测试环下页面的首次加载速度结果都是:redux>immutablejs>mobx,但是他们之间的 ...

  3. WinForm实现Rabbitmq官网6个案例-Publishe/Subscribe

    代码: namespace RabbitMQDemo { public partial class PublishSubscribe : Form { private string exchangeN ...

  4. 简析 Tomcat 、Nginx 与 Apache 的区别

    简析 Tomcat .Nginx 与 Apache 的区别 本文讲的是简析 Tomcat .Nginx 与Apache的区别, 经常在用 apache 和 tomcat 等这些服务器,可是总感觉还是不 ...

  5. 安卓app开发-02-安卓app快速开发

    安卓app开发-02-安卓app快速开发 上一篇介绍了安卓 app 开发的工具和环境配置,本篇不涉及编程技术,适合小团队快速高效开发 APP制作流程 当有一个APP创意,该如何实现呢?是花数十万找AP ...

  6. 线性表的Java实现--链式存储（单向链表）

    单向链表(单链表)是链表的一种,其特点是链表的链接方向是单向的,对链表的访问要通过顺序读取从头部开始. 链式存储结构的线性表将采用一组任意的存储单元存放线性表中的数据元素.由于不需要按顺序存储,链表在 ...

  7. 毕向东_Java基础视频教程第21天_IO流（1）

    第21天-01-IO流(对象的序列化) ObjectInputStream与ObjectOutputStream 被操作的对象需要实现Serializable接口(标记接口) 非必须, 但强烈建议所有 ...

  8. Python中的基础数据类型

    Python中基础数据类型 1.数字 整型a=12或者a=int(2),本质上各种数据类型都可看成是类,声明一个变量时候则是在实例化一个类. 整型具备的功能: class int(object): & ...

  9. centos6.3_gcc安装软件及流程

    分享链接下载文件上传安装即可 链接:https://pan.baidu.com/s/15eUhm9LTUdHDPkXOyRb9Tg 密码:tohr # 文件内置安装脚本,直接安装即可 [root@lo ...

  10. java冒泡排序-选择排序-插入排序-使用API中文文档直接调用函数

    import java.util.Arrays; public class ArrayDemo2_3 { public static void main(String []args) { //---- ...