1、web三大核心技术？
HTML
CSS
JavaScript

2、HTML基本机构和属性
HTML:超文本 标记 语言

超文本：文本内容+非文本内容（图片、视频、音频等）

标记：<单词>

语言：编程语言

标记也叫做标签：
<header>
<footer>
写法分为两种：
单标签：<header>
双标签:<header></header>

创建标签的快捷键：tab+单词-><单词>

标签可以上下排列也可以嵌套。

HTML常见标签：http://www.xuanfengge.com/funny/html5/element/

标签的属性：来修饰标签的，设置标签当前的功能。
<标签> 属性="值"

3、HTML初始代码：

每个.html文件都有的代码叫做初始代码，要符合html文件的规范写法

！+tab键：可以快速创建html的初始代码：

<!DOCTYPE html> 文档声明：告诉浏览器这是一个html文件
<html lang="en"> html文件的最外层标签，包裹着所有html标签的代码 lang="en"表示是一个英文网站；lang="zh-CN"表示是一个中文网站。
<head> 输入网址的地方通常叫做head
<meta charset="UTF-8"> 元信息：是编写网页中的一些辅助信息（该语句表示采用国际编码，在网页上使用不同语言而不至于出现乱码情况）
<title>Document</title> 凡是跟页面头部有关系的标签都写在<head>标签里面（设置网页的标题）
</head>
<body>
显示网页内容的区域
</body>
</html>

4、html注释：

写法：<!--注释的内容--> 在浏览器中看不见，在代码中可以看见

意义：
1、可以先注释不用的代码，方便之后的使用
2、对开发人员进行提示

快速添加注释与取消注释：
1、ctrl+/
2、shift+alt+a

5、标题与段落？

标题->双标签：<h1></h1>.....<h6></h6>

在一个页面当中，h1标签最重要，并且一个.html文件中只能出现一次h1标签

h5、h6标签在网页中不常使用

段落：双标签：<p></p >

6、文本修饰标签：

强调：双标签：<strong></strong>

区别：1、写法与展示效果是有区别的：一个加粗一个斜体
2、strong的强调型较强，em较弱

下标：<sub></sub>
上标：<sup></sup>

删除文本：<del></del>
插入文本：<ins></ins>
一般情况下删除文本都是和插入文本配合使用的

7、图片标签

img：单标签
src：引入图片的地址
alt：当图片出现问题的时候可以显示一段友好的文字
title：提示信息
width\height:图片的大小

8、路径的引入？

绝对路径
相对路径

9、链接标签？

a：双标签<a></a>
href属性：链接的地址
target属性：可以改变链接的打开方式，默认方式为：在当前页面打开_self 新窗口打开_blank

base：单标签：作用是改变链接的默认行为

10、跳转锚点？

两种做法：
1、#号+id属性
2、#号+name属性（注意name属性加给的是a标签）

11、特殊字符？

1、&+字符
2、解决冲突啊，比如做有尖括号的冲突，添加多个空格
3、&lt；（左尖括号）；&gt；（右尖括号）；&nbsp；（空格）

12、列表标签？

1、无序列表：ul li 符合嵌套的规范，ul与li必须是相邻的中间不可以有其他标签
2、有序列表：ol li 一般用的比较少，可以用无序列表来替代
3、定义列表：dl dt dd 列表项需要添加标题和对标题进行描述的内容

注：列表之间可以互相嵌套，形成多层级的列表。

13、表格标签

table、tr、th、td、caption等

注：他们之间是有嵌套关系的，要符合嵌套规范。

语义化标签：thead、tbody、tfoot

注：在一个table中、tbody可以出现多次，但是thead和tfoot只能出现一次

align：left、center、right
valign：top、middle、bottom
拿到一个表格先观察有多少行，和多少列；一个tr便签表示一行，第一个tr标签（即第一行）里面的th标签是各列的标题；
tr标签里面的th标签或者td标签的个数决定了列数；之后再考虑合并行和列的问题。(可以这样记td是"弟弟"所以是非标题)

*关于合并行列的问题：合并行用rowspan="x";x表示合并的行数，注意合并行和列都是在合并行组合中的第一个单元格里面写rowspan或指责colspan；合并列用colspan="x";x表示合并的列数；具体操作见练习
*多说一点：①一对tr标签表示一行；②没对tr标签里面的th或者td标签的对数决定列数；
③合并行时，要在不同的tr标签对（即在不同的行内操作）里面，删除需要合并的th或者td标签，并在第一个元素里添加colspan属性。
④合并列时，只需要在同一对tr标签里面，删除需要合并的th或者td标签，并在第一个元素里添加colspan属性

14、表单标签？
form、input、textarea、select、label.....
input：单标签，有一个type属性决定是什么控件
还有一些常见的属性：
checked、disabled、name....(表格里面嵌套表单时，要注意表格的嵌套规则，表单没有嵌套规则)

15、div与span？
div：做一个区域划分的块
span：对文字进行修饰的，内嵌

16、CSS语法基础？
格式：
选择器{属性1：值1；属性2：值2} 最后一组属性可以不写样式

width：宽；
height：高；
background-color：背景色

长度单位：
1、px->像素
2、%->百分比
外容器1->600px 当前容器 50%->300px
外容器2->400px 当前容器 50%->200px

css注释：
/* css注释 */

17、CSS样式的引入方式？
1、内联样式(也叫行内样式，通过在标签内添加style属性来添加样式)
style属性
2、内部样式
style标签
区别：
内部样式的代码可以复用，符合W3C的标准，让结构和样式分开处理
3、外部样式
引入一个单独的css文件，name.css

通过link标签引入外部资源，rel属性指定资源跟页面的关系，href属性指定资源的地址
通过@import的方式引入外部样式，这种方式有很多问题，不建议使用

18、css中的颜色表示法？
1、单词表示法：red、blue.....

2、16进制表示法：

3、rgb三原色表示法：
rgb（255,255,255）
取值范围为0-255

HTML与CSS学习笔记(1)的更多相关文章

  1. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  2. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

  3. HTML+CSS学习笔记 (6) - 开始学习CSS

    HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...

  4. HTML+CSS学习笔记（5）- 与浏览者交互，表单标签

    HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...

  5. HTML+CSS学习笔记(4) - 认识标签（3）

    HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...

  6. HTML+CSS学习笔记（3）- 认识标签（2）

    HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...

  7. HTML+CSS学习笔记(2) - 认识标签（1）

    HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...

  8. HTML+CSS学习笔记(1) - Html介绍

    HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...

  9. css学习笔记四

    广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...

  10. CSS学习笔记：溢出文本省略（text-overflow）

    原文:CSS学习笔记:溢出文本省略(text-overflow) 在CSS3中,text-overflow属性的基本语法如下: clip:表示不显示省略文本,简单的裁切. ellipsis:表示对象文 ...

随机推荐

  1. SpringBoot(十八)_springboot打成war包部署

    最近在做项目的时候,由于使用的是springboot,需要打成war包.我就按照正常的思路去打包,结果部署后无法访问,一直报错404.后续问了问 公司同事,他给解决了.说大部分都是这个原因. 如果需要 ...

  2. 鲜贝7.3--pycharm切换

    在pycharm中切换python版本 打开软件会看到,这里有明显的红色提示错误.原因是当前使用的是python3.3,当执行print的时候,打印的文字需要小括号’()‘括起来. 在工具栏中找到这个 ...

  3. Note | 期刊答复（response）

    第一次TPAMI回复整理的经验. 190926:TPAMI中了,特回来补充. 简洁 尤其对于问答型问题,一定要在前三句话就回答审稿人的问题:yes or no. 不要绕弯子,专注于审稿人问题,解决就行 ...

  4. Linux应试技巧

    前言:此文是为了CSP-S第二轮认证所用系统NOI-Linux的写的,但其他的Linux系统也可以按照相同或类似的方法进行配置. 配置NOI-Linux 我大约是一个月以前由于比赛的原因才开始接触NO ...

  5. OpenCV Error: Unknown error code -10 (Raw image encoder error: Empty JPEG image (DNL not supported)) in throwOnEror 错误

    出现上面这样的错误可以肯定是传了空指针导致的, 刚开始出现这样的问题, 并且是概率性的, 网上找了一遍都没找到解决方案, 然后自己一行一行代码注释, 发现还是会出现这样的问题, 当时就懵逼了, 我从打 ...

  6. vue开发 element的select下拉框设定初值后，不能重新选择的问题

    问题描述: 用的element的select可多选的下拉选框,在回显后有初始值的情况下,不能修改,也不能再选择 如图,明明点击了一般内勤主管,但没有任何反应 <el-select v-model ...

  7. vue的双向绑定原理浅析与简单实现

    很久之前看过vue的一些原理,对其中的双向绑定原理也有一定程度上的了解,只是最近才在项目上使用vue,这才决定好好了解下vue的实现原理,因此这里对vue的双向绑定原理进行浅析,并做一个简单的实现. ...

  8. ElasticSearch简介（一）——基础

    基本概念 1.  Node 与 Cluster Elastic 本质上是一个分布式数据库,允许多台服务器协同工作,每台服务器可以运行多个 Elastic 实例. 单个 Elastic 实例称为一个节点 ...

  9. C# 随机 抽奖 50个随机码 不重复

    static List<int> Given50RandomNumbers() { List<int> intList = new List<int>(); for ...

  10. VS2019打开旧项目导致引用失效的解决方案

    用VS2019打开VS2015创建的MVC项目时所有引用全部失效: 解决方案: 打开项目的csproj文件,删除 Target节点,在重新打开项目. <Target Name="Ens ...