H5前端学习之一HTML和CSS基础认识
前言
我是一个转行的前端小白,大专非计算机专业毕业,所以对计算机很不擅长,但是对信息技术的好奇,让我对技术党尤为崇拜,既然好奇代码和崇拜技术,不如成为它!所以我来学习了当前教主流的——前端。初学前端,刚刚接触基础的HTML和CSS内容,下面对我第一星期的学习做个总结和分享,如果内容有不恰当的地方大家可以和我交流、请多多指教。 本周主要学习了HTML和入门认识即:HTML基础(标签和表单)、CSS(css基础+核心三大属性)。下面将详细讲解前端是做什么的?由哪些部分组成呢?这些专业名词是什么意思?可以用来做什么?让我们小白学习者有个初步概念。 # 一、H5前端是什么? 我们多数听到的是前端这个岗位名称,而在行内其实多数都叫H5,那么H5是什么呢?它是HTML(超文本标记语言)的第五个版本,常用于网页开发、小程序、软件、APP、小游戏和后端相关的制作等等,日前我们在PC端和移动端能看到的大多都是需要前端技术作为主力来实现。H5由三部分组成:网页结构HTML+网页美化CSS+网页交互JavaScript;由此可见,我们需要学习的技术也是三类缺一不可。如果想跟我学习操作的话需要下载一个编辑器这里推荐vscode,不用问为什么就是好用!
提示:学习过程中多实操才能将知识点掌握牢固喔~~~跟着小星星开启学习之旅吧!
一、HTML基础
前面我们提到了HTNL用于表现页面的结构,也就是文字图片等的排版,那么我们具体说说都有哪些内容需要html书写吧!
A.表单
我们回想一下,当我们在进入新的网页或者APP时首先会进入一个界面让我们注册,输入手机号或者用户名、密码验证码等的信息,这其实就是form表单,用来收集信息。它的书写如下:
<form action="设置提交的目的地网址" method="设置提交方式"><input type="" placeholder="" name="" value="">
</form>
提示:代码为什么这样写我后面会解释
1、method="设置提交方式"有两种:method=“get”,method=“post”
get是获取数据,post是传送信息;
get | post |
---|---|
在数据传送的时候,用户可以在地址栏上看到传送的过程 | 在数据传送的时候,用户不可以在地址栏上看到传送的过程 |
安全性比较低 | 安全性比较高 |
传送的数据比较小 | 传送的数据比较大 |
两者相比较,显而易见更推荐post,但是不排除有的项目较小用get比较方便。
2.1、type=“类型”:
type 引号内可以写text文本框、password密码框、submit“提交”按钮、button单纯的按钮、reset“重置”按钮;
2.2、placeholder=“书写提示信息”:
比如:请输入名字或者邮箱或者QQ,type选择的是password这里写:请输入密码
2.3、name=“必须填写,如果不写,那么数据传送的时候接收不到”;
2.4、value=“值”:
当使用text和password必须给初始值,submit、button、reset用于修改文本。
B.标签
进入网页后我们可以浏览内容,内容的形式丰富多彩,有文字、段落、表格、图片等等,文字还有很多形式:比如加粗、下划线等等。那么这就是标签,对文字和段落有排版的作用:
HTML的语法:
1、常规标签/双标签(<标记 属性=“属性值"></标记>)
2、单标签/空标签(<标记 属性=“属性值"/>)
1、文字:
- 文本标签:
<h1></h1>....<h6></h6>
- 段落
<p> </p>
- 加粗
<b></b>,<strong></strong>有加粗和强调的作用
- 倾斜
<i></i>,<em></em>有加粗和倾斜的作用
- 上标
<sup></sup>
,下标<sub></sub>
- 下划线
<u> </u>
- 删除线
<del></del>,<s></s>
- 强制换行:
<br>,<br/>
- 平行线:
<hr>
2、段落:
2.1、段落用三种列表来书写表达:
无序列表 | 有序列表 | 自定义列表 |
---|---|---|
<ul><li>列表项1/2/...n<li/><ul/>:默认有圆点,list-style:none[没有前面小圆点]、inside[小圆点在li字里面] <ul> type=“circle”空心圆 / disc 实心圆/ square 实心方形>
|
列表项1列表项2...列表项n,常见的样式操作: <ol> type="A" start="4"> 那么是以A为标注的第四个字母开始则为D.E.F开头 type="1/A/a/l/i"<ol/>按照"text"内写的字母排序。
|
<dl><dt>被解释对象具有唯一性<dt/><dd>解释的内容 可以多个</dd> </dl>
|
2.2、如果每个段落的形式不一样时,我们班需要分区域处理,一般用<div></div>
来划分。
2.3、文本节点:
a、特殊名词的突出:名字、书名、电视剧名称等,我们用<span></span>
来书写。
b、block:选择器在读取书写的标签时,会给他们加一个类型
block:『块级元素,可以独自占据一行』
inline:『只有把父元素宽度撑满后才能换行显示』
2.4、最后我们还有一种标签是,特殊字符:
3、图片
网页文章出了有文字段落以外,还有图片:
<img src="" width="" height="" title="" alt="">
在代码中我们用“img”引入图片,添加在src引号中,引用方式主要是两种:
3.1、相对路径:是指相对于电脑或者文件而言,也就是依附:
a、当前文件和目标文件在同一目录src="目标文件的名字.扩展名"
b、当前文件和目标文件所在的文件夹在同一目录 src="目标文件所在的文件夹名字/目标文件的名字.扩展名"
c、当前文件所在的文件夹和目标文件在同一目录 src="../目标文件的名字.扩展名" ../后退1步 ../../后退2步 ../../../后退3步
3.2、绝对路径:不依附任何,固定存在的,例如:某D盘:\12.jpg,网站名,网站下载的图片等。
3.3、width和height属性的单位可以不写,默认的单位是px像素;
3.4、title="设置鼠标悬停上去之后的提示信息";
3.5、alt="设置图片丢失之后的信息"。
4、超链接
最后,网页还有链接,就是我们看到图片或者文字时点击进去就可以跳转到另一个界面,这就是超链接的作用,既省去页面很多空间还能与用户有参与感:
<a href="" title="" target=""></a>
href路径也是添加照片的另外一种引入方式:
4.1、相对路径:同上↑abc
4.2、绝对路径:同上↑
4.3、title="设置鼠标悬停上去之后的提示信息";同上↑
4.4、target 设置窗口的打开方式:
a、target="_self" 在原窗口更新并打开窗口;
b、target="_blank" 新窗口打开。
注意:图片和超链接内容一定要在站点里面,不要出站点,否则照片或链接不会被识别。(专业名词:站点类似于“文件夹”)
二、CSS基础
我们说过CSS用于页面的美化,也就是文字图片等的修饰,接下来具体说说文本图片都可以如何修饰,来达到页面的美观吧!
A.CSS的三种引入方式
1、行内样式(内联样式):<标签 style=“width:200px; height:200px;”></标签>
2、内部样式:在head里面创建<style > ... </style>
这是常规书写;
3、外部样式:
3.1、先在body里面创建想要修饰的对象 <p></p>
;
3.2、在外面新建一个css文件,例如:demo.css;
3.3、在css文件里面书写修饰过程;
3.4、通过link或者import把HTML文件和css文件进行连接:
a、<link href="" rel="stylesheet" type="text/css">
推荐★
link是HTML的语法,在页面加载的时候是HTML结构和CSS样式同时加载的,没有兼容问题。
b、<style>@import url();</style>
import是CSS的语法书写,先加载HTML结构,之后再加载CSS,在网速比较慢的时候会出现闪烁问题,import是CSS2.1提出的,对于IE5以下不兼容。
提示:引入方式不是强制要求,依个人习惯和项目大小自行选择。
B.选择器
- 基本选择器:
a、通配符:*{ } 权重是0。例如: *{margin:0;padding:0;} 清除所有标签自带的间距
b、类型选择器(标签选择器):权重是1。语法: div{} p{} 等等。。
c、class选择器:权重是10。语法: .box{},class的属性值可以是多个 class=“名字1 名字2”(要求:不能是数字开头,不建议使用中文,符号可以用“-”或者“—”,其他特殊字符不可以)
d、id选择器:权重是100。语法 #box{},id的属性值只能是1个,命名规范 同上。
e、群组选择器:当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔。 - 层次选择器:
a、后代选择器:想要改变某个父元素下面所有的后代元素(包括儿子,孙子,重孙子。。例如 div p{} .box .a1{}
b、子选择器:想要改变某个父元素下面所有的儿子元素的时候,父元素>子元素{} 例如 ul>li{} .box>p{}
c、相邻兄弟选择器:想要改变某个元素后面紧挨着的元素时。 某某1+某某2{} 例如 div+p{} 改变的是p
d、通用兄弟选择器:想要改变某个元素后面所有的元素的时候 某某1~某某2{} 例如 div~p{} - 伪类选择器:
a、::before {content: "内容"/url(图片的地址)}
,在上面的选择器内容之前的操作
b、::after{content: "内容"/url(图片的地址)}
,在上面的选择器内容之后的操作
c、::first-letter: div::first-letter/div:first-letter,定义对象内第一个字符的样式,注:该伪元素只能用于块元素
d、::first-line: div::first-line/div:first-line,定义对象内第一个字符的样式,注:该伪元素只能用于块元素
e、::selection: div::selection ,选中之后的样式 只支持这background color属性 - 属性选择器:
C.权重
1、权重大小排列: 继承 <自带样式<*[0] < 标签[1] < class[10] < id[100] < 行内样式权重值1000<! important
2、“继承”是最低的属性,只对文本有用 可以继承的元素有:color、 text-开头的、line-开头的、font-开头的。color、font-size、text-align、line-height、list-style、letter-spacing。
3、当修饰样式的时候,如果对于同一个标签设置了多次样式,可能会发生冲突,冲突之后的解析规则:
3.1、规则1:权重相同的时候,谁的CSS样式距离标签近就解析谁的(就近原则)
3.2、规则2:权重不同的时候,权重高的覆盖权重低的
4、方法二:***常用:加!important 代表把此权重提到最高,(后面样式出不来可以加上试试)
D.CSS的三大属性
a、文本的十一个属性:
- color颜色
- font-size 字体大小:12pt=16px「 font-size:0时 可以清除图片下面的小间距
- font-famliy字体:谷歌火狐默认微软雅黑,其他浏览器默认宋体
- font-weight加粗:bolder更粗的/bold加粗/100-900;100-500不加粗 600-900加粗
- font-style倾斜:italic斜体字/oblique倾斜的文字/normal常规显示
- text-align文本水平对齐:text-align:center「居中」文字水平位置
- line-height行高:当line-height的属性值等于height的属性值时元素会垂直居中,line-height:1;时、100%时,等同于和字号大小一样垂直
- font文字简写:简写font:italic 800 字号/行高px 字体;前俩可换位置,字号字体需同时存在。
- text-decoration文本修饰::none/underline下划线/overline上划线/line-through删除线)可删掉a u del s的线
- text-indent首行缩进:text-indent可以取负值;text-indent属性只对第一行起作用
- letter-spacing字间距,word-spacing词间距
b、 列表相关属性:
list-style:list-style:none; 去除列表符号,list-style:inside 在…内部
c、背景的五个属性
1、background-color背景颜色
2、background-image背景图片::url();背景图片,平铺占满容器且不占位置
3、background-repeat背景图片的平铺:background-repeat:no-repeat/repeat/repeat-x(以X轴横向平铺)/repeat-y(以Y轴横向平铺)
4、background-position背景图片的定位::right top等不限顺序,用数字表示时规则为:右+左- 下+ 上负,以容器为第四象限 ,也可以给负值;
5、background-attachment背景图片的固定: : scroll (滚动)/ fixed(固定,固定在浏览器窗口里面,固定之后就相对于浏览器窗口了。
总结
以上为本周我学习的内容,按照我的方式整理出来,算是对html和css的初步认识。下周学习浮动盒子模型、定位锚点透明、文本溢出、宽高自适应和BFC。
*下周见咯~~~~*
H5前端学习之一HTML和CSS基础认识相关推荐
- 零基础web前端学习之JavaScript 和css 阻塞
web前端学习之JavaScript 和css 阻塞,JavaScript 是客户端和服务器端的脚本语言,可以插入HTML 页函中, 并且是目前较热门的Web 开发语言.同时, JavaScript ...
- HTML 前端学习(3)—— CSS 选择器
HTML 前端学习(3)-- CSS 选择器 CSS 注释 CSS 语法结构 CSS 三种引入方式 行内式 link 引入 style CSS 基础选择器 id 选择器 类选择器 元素(标签)选择器 ...
- HTML 前端学习(4)—— CSS 属性相关
HTML 前端学习(4)-- CSS 属性相关 设置长宽 块级标签设置长宽 行内标签设置长宽 代码演示 演示结果 字体属性 字体样式 字体大小 字体颜色 字体粗细 代码演示 演示结果 文字属性 对齐方 ...
- 我的前端学习之路-----HTML+css(一)
(本条为个人学习随手笔记,以基础知识为主) 我的推荐练习网站:https://www.freecodecamp.org/learn (免费的前端练习网站,像是闯关,推荐指数★★★★★) 推荐学习网站: ...
- web前端入门到实战:css基础-定位+网页布局案例
position:static 忽略top/bottom/left/right或者z-index position:relative 设置相对定位的元素不会脱离文档流 position:fixed 不 ...
- 前端学习第三天——CSS
目录 1.CSS简介 1.html的局限性 1.2CSS-网页的美容师 1.3CSS语法规范 1.4CSS代码风格 2.CSS基础选择器 2.1CSS选择器的作用 2.2选择器分类 2.3标签选择器 ...
- 【前端学习】D3:CSS进阶
文章目录 前言 系列文章目录 1 CSS的三大特性 1.1 层叠性 1.2 继承性 1.3 优先级(*) 2 盒子模型 2.1 看透网页布局的本质 2.2 盒子模型(Box Model)的组成 2.3 ...
- 【前端学习之HTMLCSS】-- CSS第三篇 -- 选择器(上)
[前端学习之HTML&CSS]-- CSS第三篇 – 选择器(上) 文章目录 [前端学习之HTML&CSS]-- CSS第三篇 -- 选择器(上) 前言 选择器 简单选择器 1. ID ...
- 前端学习打卡1 HTML5基础
目录 相关视频--(p3-p60)[黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程] HTML简介 1.网页 1.1.什么是网页 1.2.什么是HTM ...
最新文章
- 美电信运营商Verizon推企业云计算服务
- Apache Doris在美团外卖数仓中的应用实践
- oracle查询第二个字为a,Oracle多表查询 - osc_yqnlq679的个人空间 - OSCHINA - 中文开源技术交流社区...
- Python基础学习四 函数
- 谷歌最强NLP模型BERT官方代码来了!GitHub一天3000星
- python现在时间减去过去时间等于20分钟怎么写_获取当前时间减去10分钟的话SQL语句怎么写...
- 一文讲清,MySQL事务隔离级别
- 火力发电厂与变电站设计防火标准_详细解析仓库防火设计标准
- Qt 小技术总结-持续更新
- Ubuntu 硬盘”分区“图文教程(用于光盘,U盘安装Ubuntu)
- 蒙特卡洛树搜索_蒙特卡洛树搜索与Model-free DRL
- 智能优化算法:黄金正弦算法 -附代码
- CCA (Canonical correlation analysis) 典型相关分析
- 20年前的人机大战,IBM“深蓝”耍了花招
- 动态生成icon图标
- UVALive 3713 Astronauts(2SAT)
- docker容器下载及配置
- 选一个适合自己的加密芯片,加密IC,如何才能真正的做到不被破解。
- 【IoU loss】IoU损失函数理解
- 创意APP如何盈利?怎么赚钱的?