【学习的网站是主要是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. MySQL学习(三)主备分库分表和恢复数据 --- 2019年2月

    1.MySQL主备切换 readonly 设置对超级(super)权限是无效的,而用于同步更新的线程,就拥有超级权限. 建议在做主备数据库的时候,将备用数据库设置为只读.(反向用readonly来判断 ...

  2. Hadoop系列001-大数据概论

    本人微信公众号,欢迎扫码关注! 大数据概论 1.大数据概念 大数据(big data),指无法在一定时间范围内用常规软件工具进行捕捉.管理和处理的数据集合,是需要新处理模式才能具有更强的决策力.洞察发 ...

  3. mysql error 2005 - Unknown MySQL server host 'localhost'(11001)

    有的时候偶尔会出现这个问题 2005 Unknown MySQL server host 'localhost' (11001),刚开始重启电脑ok了,但是不能每次出现这个问题就重启电脑吧,太麻烦了, ...

  4. Python爬虫入门教程 44-100 Charles的安装与使用-手机APP爬虫部分

    1. 第二款抓包工具Charles安装与使用 Charles和Fiddler一样,也是一款抓包工具,比Fiddler界面更加清晰,支持多平台 1.1 官方网址 https://www.charlesp ...

  5. 《前端之路》之 初识 JavaScript

    01 初识 JavaScript 作为在码农圈混迹了 四五年的老码畜来说,学习一门新的语言,就仿佛是老司机开新车一样 轻车熟路. 为什么会这么快呢? 因为各种套路啊- 任何一种计算机语言的最开始都是和 ...

  6. 从零开始学习PYTHON3讲义(十二)画一颗心送给你

    (内容需要,本讲使用了大量在线公式,如果因为转帖网站不支持公式无法显示的情况,欢迎访问原始博客.) <从零开始PYTHON3>第十二讲 上一节课我们主要讲解了数值计算和符号计算.数值计算的 ...

  7. Asp.Net MVC Https设置

    1.   IIS设置 1.1 创建SSL证书 点击左侧菜单栏顶部,点击“功能视图”里的“服务器证书”: 点击“创建自动签名证书”创建自动签名证书: 1.2 设置SSL证书 点开网站,在“功能视图”里点 ...

  8. Excel自动换行、Export2Excel 自动换行

    1需求:导出excel后自动换行显示. 2插件:Export2Excel 3.测试 listToExcel() { import('@/vendor/Export2Excel').then(excel ...

  9. MyBatis缓存策略

    MyBatis 提供了一级缓存和二级缓存策略,一级缓存是作用在SqlSession级别上的,而二级缓存则是作用在Mapper级别上的( 即作用在 namespace上),MyBatis 默认是开启的一 ...

  10. dubbo-源码分析Provider

    Dubbo provider启动原理: 当我们的dubbo启动我们的spring容器时spring 初始化容器的时候会查找META-INF/spring.handles文件查找对应的Namespace ...