前端HTML5CSS3基础知识点

HTML语言

ctrl+B 将文字加粗

ctrl+1 /2 /3 标题

ctrl+shift + i 插入图片

不是编程语言编程语言都会有自己的语法结构 html语言不是编程语言它是标记语言

一组标签 --》特定功能—》浏览器里的渲染引擎

html   hyper  超  Text  文本  markup 标记 language语言文本  .txt 文字  字符
超文本  不仅仅只有文字  图片 视频 音频 链接形式：  闭合标签（双标签）<>开始标签  </>结束标签<标签关键字></标签关键字>
<html></html> 根标签
<head></head> 头部标签  对浏览器说话非闭合标签 （单标签）<meta charset="UTF-8">  chartset = "UTF-8"  属性名 = ”属性值“

浏览器默认字体字体大小 16px

编码

ASCII 字母+西文+符号 <128 8位二进制 256个数据第一位0 后7位 128个数据

ASCII扩展 8第一位用了 256

GBK(6000个汉字) GB2312（10000汉字） GB18030 （繁体字） 0-127 ASCII +扩充

Unicode 万国码全球所有字符（1：01110111 这是一个汉字还是字母）

UTF-8（解决问题） UTF-16

常用文本标签

1:加粗字体的标签: <b>有效内容</b>  <strong>加粗</strong>  唯一差别：strong 语义化  （权重）
2：斜体标签     <i>斜体</i>       <em>斜体</em>（语义化）
3：删除标签  （中划线）  <del>语义的</del>  <s></s>
4：下划线 <u></u>  underline
5:水平线  <hr> <hr color="red" width="300px"  align="left">
color 颜色
width  宽度
align  对齐方式  left 左  right右  center 中心居中对齐

无形当中最有形（90%）

span  小容器  图标文字
div    大盒子 大容器 大图大的内容  没有默认属性  默认样式

常用

1:段落标签(大段文字)
<p></p> paragraph    特点：上下外间距（16px）
2：标题标签
hi  h1--h6   h1在当前界面只有一个  h1会包裹logo 权重大
3：插入图片的标签  (本质是文字)
<img src="地址" alt="图片找不到文字的提示" ># 解决图片下间隙问题 ： 1：改变对齐方式 ---》vertical-align:middle（中线）top  bottom baseline(只要不是基线都可以解决)图片路径：
绝对路径 ：不建议  c://a/b/a.jpg  网上的图片路径https://m.360buyimg.com/babel/jfs/t1/14767/35/9502/98915/5c8074faE4aa55aa9/0f1a568b3e5bd8f6.jpg
相对路径：本地路径同级目录  图片和当前文档是一个文件下上一级  跳出几个文件夹 一个../  2个../../ 下一级

文本属性（css 样式语言）

设置标签属性  ： 1：开始标签 <   属性名=“属性值”>  默认属性自定义样式属性   style="属性名:属性值；属性名:属性值;属性名：属性值； "# style自定义样式集合（1）字体属性  字体颜色 : color:red/yellow/green 字体家族: "宋体" "楷体"  font-family: "微软雅黑"  字体粗细： font-weight: 100-900  100最细 900最粗  400normal 正常字体形态：font-style: 斜体  italic / 正常 normal font:  形态 粗细  字体大小 家族

ps

1:视图–》标尺点中标尺鼠标右键设置单位为像素

2：左侧工具栏标尺鼠标拽着拉动值在菜单栏

3：选区也可以测量

4：切图 6个切片在你切的的图片上画轮廓

点击文件 —》存储为web格式选图片后缀 (phg-8) --》命名–——》存储（！！！切换成选中的切片）

在桌面有文件夹 images 里面有你切下来的图片

5：吸管粘贴 #f5f5f5

前端HTML5CSS3基础知识点相关推荐

前端css基础知识点之PC端项目-规范
前端css基础知识点之PC端项目-规范 1 文件管理文件名用英文命名 css文件夹 reset.css(常用的浏览器样式) public.css(公共的样式.比如页面的头部尾部.重复使用字体.字号等 ...
前端css基础知识点之opacity——透明度
前端css基础知识点之opacity--透明度 opacity opacity:num /*num 0到1*/ 兼容性 ie9及以上和标准浏览器都支持特点设置opacity的元素的所有后代会一起具 ...
前端css基础知识点之sprite——雪碧（精灵）
前端css基础知识点之sprite--雪碧(精灵) css sprite css精灵或css雪碧把网页中一些背景图片整合到一个大文件中,然后利用 background-image.backgroun ...
开发工程师必备————【Day17】前端HTML基础知识点
今日内容简介前端简介 HTTP超文本传输协议 HTML简介 head内常见标签 body内常见标签前端简介 1.前端与后端 (1) 前端与用户直接打交道的操作界面都可以称之为是前端 (2)后端( ...
前端JavaScript基础知识点
JavaScript基础阶段说明 JavaScript基础 Web API JavaScript高级 ##第一天重点内容变量的声明及使用数据类型类型转换运算符 JavaScript的组成 E ...
web前端工程师基础知识点
看了一个web培训的大纲,感觉这些确实涵盖了在开发过程当中的一些知识点,特此总结了一下.同时也是第一次尝试了使用markdown这个编辑器,感觉不错. 特此推荐一下 HTMLXHTML Dreamwe ...
前端工程基础知识点--Browserslist (基于官方文档翻译）
总结不出更好的了,感觉官方文档已经写得够清楚了,翻译的不好,请大家斧正简介 browserslist 是在不同的前端工具之间共用目标浏览器和 node 版本的配置工具.它主要被以下工具使用: Aut ...
前端JavaScripts基础知识点轮播图
1.index.html <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
前端JavaScripts基础知识点
1放大镜 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8 ...