HTML与CSS学习笔记(1)
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、<;(左尖括号);>;(右尖括号); ;(空格)
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)的更多相关文章
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
- HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...
- HTML+CSS学习笔记(5)- 与浏览者交互,表单标签
HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...
- HTML+CSS学习笔记(4) - 认识标签(3)
HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...
- HTML+CSS学习笔记(3)- 认识标签(2)
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...
- HTML+CSS学习笔记(2) - 认识标签(1)
HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...
- HTML+CSS学习笔记(1) - Html介绍
HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...
- css学习笔记四
广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...
- CSS学习笔记:溢出文本省略(text-overflow)
原文:CSS学习笔记:溢出文本省略(text-overflow) 在CSS3中,text-overflow属性的基本语法如下: clip:表示不显示省略文本,简单的裁切. ellipsis:表示对象文 ...
随机推荐
- LG3119 「USACO2015JAN」Grass Cownoisseur
问题描述 LG3119 题解 显然,如果有个环,一定是全部走完的. 所以缩点,缩出一个 \(\mathrm{DAG}\) . 只能走一次反向,于是在正图和反图上各跑一次,枚举边,取 \(\mathrm ...
- 微信小程序云开发-从0打造云音乐全栈小程序
第1章 首门小程序“云开发”课程,你值得学习本章主要介绍什么是小程序云开发以及学习云开发的重要性,并介绍项目的整体架构,真机演示项目功能,详细介绍整体课程安排.课程适用人群以及需要掌握的前置知识.通过 ...
- ESP8266 LUA脚本语言开发: 外设篇-GPIO输入检测
咱使用 GPIO0 https://nodemcu.readthedocs.io/en/master/modules/gpio/#gpioread 第一种 GPIO设置为输出的状态下读取引脚状态 gp ...
- CF-1132 C.Painting the Fence
题目大意:现在有n个栅栏板,p个工人,每个工人可以涂一段区间的栅栏板,问如果雇佣p-2个工人,最多可以涂多少块栅栏板. 做法:先求出q个工人能涂得最多木板数,并统计每个木板被涂的次数.求被涂一次的木板 ...
- 【ECNU619】白网吧(差分)
点此看题面 大致题意: 给你\(n\)个区间,求最多有多少个区间重叠,以及平均每个点被多少个区间覆盖. 第一个询问 这个应该可以直接离散化+差分,即我们先把每个区间右端点加\(1\),然后对于一个离散 ...
- AtCoder Grand Contest 037
Preface 这篇咕了可能快一个月了吧,正好今天晚上不想做题就来补博客 现在还不去复习初赛我感觉我还是挺刚的(微笑) A - Dividing a String 考虑最好情况把每个字符串当作一个来看 ...
- keras.preprocessing.text.Tokenizer
说明:num_words的参数设置,对应着sequences_to_matrix方法返回的arrray的shape[1],用于约束返回数组的第2个维度.对texts_to_sequences(text ...
- 剑指offer:矩阵中的路径(递归回溯法DFS类似迷宫)
1. 题目描述 /* 请设计一个函数,用来判断在一个矩阵中是否存在一条包含某字符串所有字符的路径. 路径可以从矩阵中的任意一个格子开始,每一步可以在矩阵中向左,向右,向上,向下移动一个格子. 如果一条 ...
- linux (centos)增删改查用户命令
1,查看用户 cat /etc/passwd 2,删除用户 userdel 用户名 3,查看组 cat /etc/group 4,删除组 groupdel 组名 5.查看系统中有哪些用户: cut - ...
- rpc和webservice的关系简述
RPC(Remote Procedure Call,远程过程调用)是一个很大的概念.它是一种通过网络从远程计算机程序上跨语言跨平台的请求服务.RPC能省略部分接口代码的开发,可以跨机器之间访问对象(J ...