【学习的网站是主要是W3school，还加上一些其他搜索学习到的内容，仅在博客做个人整理】

HTML

一、标签——尖括号围成的关键词，成对出现。

※使用时必须符合标签嵌套规则

1.声明

（1）<!DOCTYPE html>：HTML5文档类型声明

（2）对于中文网页需要使用 <meta charset="utf-8"> 声明编码

2.链接

　　<a>：链接 【在href属性中指定链接的地址】，在标签里添加文本标签或图片标签。

  • 　　target属性：target="_blank"时会在新窗口打开文档
  • 　　name属性：规定锚（anchor）的名称。使用命名锚（named anchors）时，可以直接跳至页面中的某个链接。

3.布局

  • <div>：块元素，以新行开始和结束。组合其他HTML元素，常与CSS一同使用，可用于对大的内容块设置样式属性。
  • <span>：内联元素，不会以新行开始和结束。

4.文本

  • <title>：文档标题
  • <h1> - <h6>：html标题
  • <body>：可见的页面内容
  • <p>：普通段落
  • <strong>：粗体文本，强调强调内容
  • <b>：粗体文本
  • <em>：强调内容，浏览器用斜体文本展示
  • <i>：斜体文本
  • <hr /> ：创建水平线
  • <br /> ：不产生新段落的情况下【换行】
  • <pre>：定义预格式化的文本，保留空格和换行。
  • <abbr title="etcetera">etc.</abbr>：定义缩写或首字母缩略语。把鼠标移至缩略词语etc.上时，可展示完整版本"etcetera"。
  • <q>：定义短的引用。会为 <q> 元素包围引号
  • <blockquote>：定义块引用，插入换行和外边距
  • <del>：删除线
  • <ins>：下划线

5.多媒体

  • <img />：图像 【图像的名称和尺寸是以属性的形式提供的】，源属性src="图像URL地址"，替换为本属性alt="xxx"
  • <video>：定义视频内容
  • <audio>：定义声音内容

　　　　子标签<source>：定义文件所在地

　　　　子标签<track>：定义轨道

6.序列化列表

（1）<ul>无序列表标签

（2）<ol>有序列表标签

　　有序、无序列表项均始于 <li>

（3）<dl>自定义列表标签

7.表格

　　<table> 定义 HTML 表格。
　　　　<tr>：定义表格中的行
　　　　<th>：定义表格中的表头
　　　　<td>：定义表格中的数据（table data）

8.输入表单

定义用户输入

（1）<from>：块级元素，属性name、action、method、enctype

（2）<input>：type属性、checked预选、name、value页面所显示的值

　　type的值类型：

  • text：文本框
  • password：密码框
  • checkbox：复选框
  • radio：单选框
  • button：按钮
  • submit：提交，将表单数据发送到<form>标签中action属性所指值的网页中/向表单处理程序（处理输入数据的脚本的服务器页面）提交
  • reset：重置
  • hidden：

（3）<datalist>：为 <input> 元素规定预定义选项列表。其id属性必须与<input>标签中的list属性值相同

（4）<select>：下拉列表，属性name

　　子标签<option>：属性name、value、selected

（5）<textarea>：文本域

（6）<fieldset>：绘制一个带标题的框

　　子标签<legend>：表示标题

9.画布

<canvas>

 

二、元素——从开始标签到结束标签的所有代码。

  • 大多数HTML元素可拥有属性
  • 大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）

三、属性——提供了有关 HTML 元素的更多的信息

※以名称/值对的形式出现：xxx=“xxx”（若属性值中含有双引号则外围必须使用单引号）

※属性在开始标签中规定。

【HTML参考手册】http://www.w3school.com.cn/tags/index.asp

1.大多数元素都有的属性名称：

  • id
  • class

2.<style> HTML样式 元素属性名称：

  • background-color：背景颜色
  • font-family：文本字体系列
  • color：文本颜色
  • font-size：文本字体尺寸
  • text-align：文本水平对齐方式

3.<table>元素属性名称：

  • border：表格边框

CSS

一、样式表

1.外部样式表——当样式需要被应用到很多页面时

定义外部CSS文件，在<head>标签中使用链接式<link>：

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

2.内部样式表——单个文件需要特别样式时

<head>标签中创建一个<style>标签，其中添加CSS代码：

<head>

<style type="text/css">

body {background-color: red}

p {margin-left: 20px}

</style>

</head>

3.内联CSS

在相关标签中使用style属性：

<p style="color: red; margin-left: 20px">

This is a paragraph

</p>

二、语法

1.选择器——需要改变样式的HTML元素

（1）派生选择器：

只有<li>元素中的<strong>元素适用：

li strong {

    font-style: italic;

    font-weight: normal;

  }

（2）id选择器

以#定义，只能在每个HTML文档中出现一次

（3）类选择题

以.定义

类名的第一个字符不要使用数字

2.语法——由属性和值构成，由冒号":"分开

  • color（颜色）:值（red）、十六进制颜色值（#FF0000）、RGB值（rgb(255,0,0)）
  • background（背景颜色）:
  • font-size（字体大小）:
  • font-family（字体样式）:
  • font-style（）
  • font-weight
  • margin（）
  • padding（）

HTML基础知识个人总结的更多相关文章

  1. .NET面试题系列[1] - .NET框架基础知识(1)

    很明显,CLS是CTS的一个子集,而且是最小的子集. - 张子阳 .NET框架基础知识(1) 参考资料: http://www.tracefact.net/CLR-and-Framework/DotN ...

  2. RabbitMQ基础知识

    RabbitMQ基础知识 一.背景 RabbitMQ是一个由erlang开发的AMQP(Advanced Message Queue )的开源实现.AMQP 的出现其实也是应了广大人民群众的需求,虽然 ...

  3. Java基础知识（壹）

    写在前面的话 这篇博客,是很早之前自己的学习Java基础知识的,所记录的内容,仅仅是当时学习的一个总结随笔.现在分享出来,希望能帮助大家,如有不足的,希望大家支出. 后续会继续分享基础知识手记.希望能 ...

  4. selenium自动化基础知识

    什么是自动化测试? 自动化测试分为:功能自动化和性能自动化 功能自动化即使用计算机通过编码的方式来替代手工测试,完成一些重复性比较高的测试,解放测试人员的测试压力.同时,如果系统有不份模块更改后,只要 ...

  5. [SQL] SQL 基础知识梳理（一）- 数据库与 SQL

    SQL 基础知识梳理(一)- 数据库与 SQL [博主]反骨仔 [原文地址]http://www.cnblogs.com/liqingwen/p/5902856.html 目录 What's 数据库 ...

  6. [SQL] SQL 基础知识梳理（二） - 查询基础

    SQL 基础知识梳理(二) - 查询基础 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5904824.html 序 这是<SQL 基础知识梳理( ...

  7. [SQL] SQL 基础知识梳理（三） - 聚合和排序

    SQL 基础知识梳理(三) - 聚合和排序 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5926689.html 序 这是<SQL 基础知识梳理 ...

  8. [SQL] SQL 基础知识梳理（四） - 数据更新

    SQL 基础知识梳理(四) - 数据更新 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5929786.html 序 这是<SQL 基础知识梳理( ...

  9. [SQL] SQL 基础知识梳理（五） - 复杂查询

    SQL 基础知识梳理(五) - 复杂查询 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5939796.html 序 这是<SQL 基础知识梳理( ...

  10. APP测试入门篇之APP基础知识(001)

    前言        最近两月比较多的事情混杂在一起,静不下心来写点东西,月初想发表一遍接口测试的总结,或者APP测试相关的内容,一晃就月底了,总结提炼一时半会也整不完.放几个早年总结内部培训PPT出来 ...

随机推荐

  1. JS定义函数的2种方式以及区别简述（为什么推荐第二种方式）

     无意中看到了阮一峰大神多年前的一篇博客: 12种不宜使用的Javascript语法    看到第9条的时候受到了启发,感觉之前没怎么理解清楚的一些问题好像突然就清晰了,如下图 可能光这样看,有些小伙 ...

  2. Vue(day3)

    一.Vue中的ajax:vue-resource和axios vue-resource是Vue实现异步加载的官方库,即Vue中的ajax.在Vue2.js之后vue-resource将不再更新维护,所 ...

  3. shell if条件判断中：双中括号与单中括号的区别

    电脑重装了系统,登录虚拟机的shell脚本需重写,在为编写的脚本命名时发现存在同名脚本,才想起来是连接公司服务器的登录脚本,不想写俩脚本,怕记混了,那就整合一下.代码如下: #!/bin/bash#z ...

  4. Python爬虫入门教程 46-100 Charles抓取手机收音机-手机APP爬虫部分

    1. 手机收音机-爬前叨叨 今天选了一下,咱盘哪个APP呢,原计划是弄荔枝APP,结果发现竟然没有抓到数据,很遗憾,只能找个没那么圆润的了.搜了一下,找到一个手机收音机 下载量也是不错的. 2. 爬虫 ...

  5. 【Android Studio安装部署系列】二十七、Android studio修改项目名称和包名

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 概述 实际项目开发中可能碰到项目名称写错了或者需要修改,而且包名可能也想要修改,那么如何操作呢. 本文是在Android Studio3. ...

  6. Linux最小系统移植之早期打印CONFIG_EARLY_PRINTK

    请先参考先前博文:  Linux最小系统移植之早期打印CONFIG_DEBUG_LL  , 因为eraly_printk其实就是对printch()封装的 一. 必要选项(在上面链接选中的前提下再新增 ...

  7. RabbitMQ消息队列（一）-RabbitMQ的优劣势及产生背景

    本篇并没有直接讲到技术,例如没有先写个Helloword.我想在选择了解或者学习一门技术之前先要明白为什么要现在这个技术而不是其他的,以免到最后发现自己学错了.同时如果已经确定就是他,最好先要了解下技 ...

  8. 极光推送经验之谈-Java后台服务器实现极光推送的两种实现方式

    原创作品,可以转载,但是请标注出处地址http://www.cnblogs.com/V1haoge/p/6439313.html Java后台实现极光推送有两种方式,一种是使用极光推送官方提供的推送请 ...

  9. 个人博客制作如何选择前端模板 thinkcmf后台加载新模板 CSS js文件

    我们的博客后台已经搭建好了,接下来我就要选择一个合适的模板做自己的博客,首先要定位你的博客是做什么用的,是属于什么行业,根据自己博客的定位选择适合的模板. 如果你是设计师,又会前端设计开发,那就可以自 ...

  10. 生鲜配送管理系统_升鲜宝V2.0 供应商协同系统设计思想及设计效果展现（一）

    生鲜配送管理系统[升鲜宝]V2.0 供应商协同系统小程序设计思想及操作说明(一)     生鲜供应链企业,最重要的二个方面,其中一个是客户服务(销售订单)    另外一个就是供应商的管控,只有做好了这 ...