html前端开发的20个知识点(个人建站总结出来的)

这是我自己平时在建站的时候,遇到的一些小技巧和重要的知识点,分享给大家

1.盒子的border 3要素:框形色

2.padding的颜色就是背景色,且是向外扩张

3.利用margin auto完成首页居中

4.上下相邻的普通元素(有的div设置了浮动,那就不是普通元素),上下边距,并非简单的相加,而是取其中较大的边距值,这种现象叫做

margin重叠

5.盒子模型是块状(div)布局分块用,span是内联 选择文字用

6.text-indent:20px;缩进20像素       ********

text-decoration:line-through;(删除线)

leteter-spacing:20px;(文字之间的距离)

line-height:(行高)

font-family:(字体)‘SimHei‘(黑体)

字体控制技巧:顺序之分

font:italic bold   23px/46px "SimHei";

style weight size height family

风格  粗细   大小 行高   字体

sans-serif  无衬线,seirf 有衬线(新宋体)

7.设置背景图片

background-image: url(small.jpg)

background-repeat: repeat-x/y/no-repeat;

background-attachment: fixed(固定);  //相对于浏览器固定于一个位置,随着页面的滑动而滑动

8.css选择器:id选择器  class选择器 标签选择器(如P标签,div标签) 派生选择器(元素之间的上下级关系来声明 伪类选择器  通配选择

9.CSS引入的4种方式

1)外部链接一个CSS文件,我们在HTML头部分表明:

<link href="css/my.css" rel="stylesheet" type="text/css"/>

2)头部直接写入css:<style type="text/css"> div{margin:0;padding:0;border:1px solid red;}</style>

3)外接多个css文件时:<style type="text/css"> @import url(my.css)<style>

4)直接在html标签里写入对这个标签的CSS控制,如:<div style="border:1px solid red;">测试信息</div>

第二个可以声明class 第三个 用float 浮动

10.插入图片 <img src="juhua.jpg" alt="花图" title="花图" />     34

搜索引擎用,  图片的文字说明

11.去除li小黑点   list-style-type:none;

初始化css后,写li,并用背景图片+padding,来完成li小图标的效果,且达到各浏览器兼容  36

12.在页面内添加3个锚点,并建立3个链接

<a href="31.anchor.html#p1">p1锚点</a>

<a href="31.anchor.html#p2">p2锚点</a>

<a href="31.anchor.html#p3">p3锚点</a>

<a name="p1"></a>

<p>p1</p>

<a name="p2"></a>

<p>p2</p>

<a name="p3"></a>

<p>p3</p>

13.CSS允许我们针对A便签的4种状态设置各自的CSS特性,叫做CSS伪类

a:link{color:gray;}

a:visited{color:orange;}

a:hover{color:purple;}

a:active{color:black;}

注意:顺序是lvha

active一般不必写

a:link一般简写成a:

字符实体 在html开发中,有一些字符,不适于直接写出,

如 &gt;&lt;&quot;&yen;&copy;

>   <    "    RMB  商标

14.css画圆角  border-radius:15px;(半径)

px:    width:300px;

heigth:300px;

border:1px solid red;

border-radius:150px;

(一个半径为150px的圆)

15overflow溢出处理:

overflow:visible;/auto;/hidden;/scroll;

16表单 :

在用户注册,在线报名等场合时,需要把用户的信息,填写并提交,这是要用到表单来收集用户的信息

<form action="http://www.baidu.com" method="post">这里插入以下的填写信息</form>

用户名:<input type="text" name="usename" />

密码:<input type="password" name="password" />

性别:男:<input type="radio" name="gender" value="男" />

女:<input type="radio" name="gender" value="女" />

爱好:  篮球<input type="checkbox" name="hobby" value="篮球" />

足球<input type="checkbox" name="hobby" value="足球" />

台球<input type="checkbox" name="hobby" value="台球" />

排球<input type="checkbox" name="hobby" value="排球" />

学历:<select name="xueli">

<option value="请选择">请选择</option>

<option value="大学">大学</option>

<option value="高中">高中</option>

<option value="初中">初中</option>

上传头像:<input type="file" name="pic" />

17.块级元素:就是一个方块,像段落一样,默认占据一行出现;

18.内联元素:又叫行内元素,顾名思义,只能放在行内,就像一个单词,不会造成前后换行,起辅助作用。

19.一般的块级元素诸如段落<p>、标题<h1><h2>...、列表,<ul><ol><li> 、表格<table>、表单<form>、DIV<div>和BODY<body>等元素。而内

联元素则如: 表单元素<input>、超级链接<a>、图像<img>、<span> ........ 块级无素的显著特点是:每个块级元素都是从一个新行开始显示

,而且其后的无素也需另起一行进行显示。

20.相同的元素,如li,在不同的浏览器下,显示的效果稍有不同,是因为,不同的浏览器对各元素的margin,border,font-size

等略有不同,如果想杜绝这种情况,我们通过css强制让所有元素的属性值都一样,这样,浏览器显示就一致了,减少了不兼容情况

的发生,这个过程叫做css初始化

时间: 2024-08-08 22:09:15

html前端开发的20个知识点(个人建站总结出来的)的相关文章

关于前端开发的20篇文档与指南-转

关于前端开发的20篇文档与指南 前端开发开发者CSSJavaScriptHTMLWeb 摘要:前端开发者中相信很多人会有两种感受:真的不知所措,这个行业到底有多少东西需要去学习:渴望更多,并迫不及待的为接下来的学习寻求一些思想方向.本文整理一些有用的信息,希望可以帮助相关领域的前端开发人员. 相信在2015年很多这个行业的人都会有这样的两种感受: 真的不知所措,这个行业到底有多少东西需要去学习: 渴望更多,并迫不及待的为接下来的学习寻求一些思想方向. 第一个来自于我们的个人感受,而第二个则是纯粹

关于前端开发的20篇文档与指南

相信在2015年很多这个行业的人都会有这样的两种感受: 真的不知所措,这个行业到底有多少东西需要去学习: 渴望更多,并迫不及待的为接下来的学习寻求一些思想方向. 第一个来自于我们的个人感受,而第二个则是纯粹的必要性了.所以本文整理一些有用的信息,希望可以帮助相关领域的前端开发人员. 1. I want to use 基于Can I use的数据和功能,这款应用给予你选择一组前端开发特性的能力,并会读取出一个全球性用户能够使用它的百分比. 2. Regulex JavaScript正则表达式的可视

纠正前端开发中容易出错知识点

扎实的基础有时候需要纵览群书,但针对编码领域,单靠纸上谈兵远远不够.思考,实践,再思考,再实践.累积到一定代码量,思路自然豁然开朗.重复的时间沉淀,将缔造更加强健高效的代码. 部分整理自网络,个人水平有限,望见谅. html 1)将input设为只读,使用readonly而非diabled disbled和readonly类似,会将输入框设置为不可输入状态,但是在html中,如果一个元素被设置为disabled,它的值就不会被发送到server端.因此,将元素设为只读时,只能使用readonly

前端开发必须知道的知识点

VSCode使用 https://www.jianshu.com/p/3cb39532c1fd 免费.好用的SQL可视化工具HeidiSQL https://blog.csdn.net/qq_35346390/article/details/79423466 mysql 安装图解 mysql图文安装教程(详细说明) https://www.cnblogs.com/whaben/articles/6687544.html git安装和使用教程 https://www.cnblogs.com/smu

SAE开发一个应用(不仅仅是建站)

参考http://jingyan.baidu.com/user/npublic/?un=944615045 http://sae.sina.com.cn/ 激活sae账户 登陆新浪云计算官方网站,网址是: http://sae.sina.com.cn/ 在首页右侧点击“登陆”按钮,跳转至新浪微博账号的开放平台的授权页面 在授权页面输入自己的新浪微博账户和密码[注:其他微博账户,如腾讯微博.网易微博等无法使用],然后自动跳转至信息填写页面 填写真实有效的个人信息,操作提交 填写系统发送的验证码 通

掌握11项技能,你就是优秀的前端开发工程师

导读: 你也许会觉得前端开发是一个很简单的工作,对呀,你就是刚刚从网页设计转型过来的.但当你深入其中时,一定会发现好像前端开发不是那么简单,光网站性能优化.响应式.框架就让你焦头烂额, 确实,做前端开发就是先易后难,想成为一个优秀的前端开发,没有那么简单. 不过,天下事难则不会,会则不难,你只需要掌握11项技能就可以成为前端"大拿",下面,就告诉你这11项技能是什么?以及每项技能的要点,最后是相关的专业图书. 入门必备的技能: 第1项技能:HTML超文本标记语言: 技能要点: HTML

掌握这11项技能,你就是优秀的前端开发工程师

导读: 你也许会觉得前端开发是一个很简单的工作,对呀,你就是刚刚从网页设计转型过来的.但当你深入其中时,一定会发现好像前端开发不是那么简单,光网站性能优化.响应式.框架就让你焦头烂额, 确实,做前端开发就是先易后难,想成为一个优秀的前端开发,没有那么简单. 不过,天下事难则不会,会则不难,你只需要掌握11项技能就可以成为前端"大拿",下面,就告诉你这11项技能是什么?以及每项技能的要点,最后是相关的专业图书. 入门必备的技能: 第1项技能:HTML超文本标记语言: 技能要点: HTML

献给那些前端学习迷茫的人 -----前端开发必备的11项技能!!!

你也许会觉得前端开发是一个很简单的工作,对呀,你就是刚刚从网页设计转型过来的.但当你深入其中时,一定会发现好像前端开发不是那么简单,光网站性能优化.响应式.框架就让你焦头烂额, 确实,做前端开发就是先易后难,想成为一个优秀的前端开发,没有那么简单. 不过,天下事难则不会,会则不难,你只需要掌握11项技能就可以成为前端"大拿",下面,就告诉你这11项技能是什么?以及每项技能的要点,最后是相关的专业图书. 入门必备的技能:   第1项技能:HTML超文本标记语言: 技能要点: HTML文件

什么是HTML5前端开发?HTML5前端要学哪些技术?

什么是HTML5前端开发?前端开发一般指网页开发,前端开发是从网页制作上演变过来的,网页上软件化的交互形式都是基于前段技术实现的.程序员指从事程序开发.维护的专业人员,其中程序员可以分为设计和编码两个部分. HTML5前端的发展前景可观,可以从事的工作也很多,比如:web前端开发工程师.HTML5开发工程师.web APP开发工程师.Java开发工程师等. 那么想要学好HTML5前端开发,那么需要掌握的专业技术有哪些? 第1阶段:前端页面重构:PC端网站布局.HTML5+CSS3基础项目.Web