本文主要分享几个网页前端的几个基础知识点，用于零碎的html知识学习，同时也是在实践中的一些心得。最后给出了几个小例子。
1. 网页编程初识
- 掌握基本的html标签以及CSS语法
- 学会查看网页的源代码F12
- 生活中多总结一些基本的美好的东西
2. 页面定制CSS代码中的选择器
-
#这是id选择器的标志 -
.这时class选择器的标志
3. div标签的用法
解释
<div></div>主要是用来设置涵盖一个区块为主，所谓的区块是包含一行以上的数据，所以在<div></div>的开始之前与结束后，浏览都会自动换行，所以夹在<div></div>间的数据，自然会与其前后文隔开而自成一区快。
案例
<div>普通内容</div>
<div style="font-size:16px">我字体大小为16px</div>
<div style="color:#F00">我字体颜色为红色</div>
<div style="background:#000; color:#FFF">我背景为黑色字体为白色</div>
<div style="border:1px solid #F00; height:60px">布局设置边框和高度</div>
4. 样式与页面分离基本思想
设计网页时，我们将页面和样式分开写：
样式
#my_style_design{
position: fixed; /*固定定位*/
right: 0;
top: 50%; /*贴着右边，垂直位置50%*/
height: 100px;
width: 100px; /*尺寸 100 x 100*/
transform: translate(0, -50%); /*通过位移，保证浮动窗口的垂直居中*/
box-shadow: 0 0 3px 1px rgba(180, 180, 180, 0.5);
background-color: white; /*加些背景色和阴影，以便区分*/
}
网页
<div id="my_style_design">
<! 网页内容 !>
</div>
从上面可以看出，样式和网页是通过id="my_style_design"和#my_style_design联系在一起的，也就是说网页上的<div></div>使用的样式为my_style_design。
5. script标签初识
使用<script></scrip>元素的方式有两种：
-
直接在页面中嵌入JavaScript代码
-
包含外部JavaScript文件
方法1
<script type="text/javascript">
function hello(){
alert("hello");
}
</script>
方法2
<script type="text/javascript" src="外部文件的代码.js"></script>
6. 案例
段落
代码
<p style="background:#FFB6C1 ; padding: 10px 10px 10px 10px; border: 1px dashed #F4A423; font-family: 幼圆; front-size: 16px;">
人最宝贵的东西是生命。生命对每个人来讲只有一次。一个人的生命应该这样度过：当他回首往事时，不会因虚度年华而悔恨，也不会因碌碌无为而羞耻。在临死的时候，他能够说：我的整个生命和全部精力，都已献给了世界上最壮丽的事业——为人类的解放事业而斗争。<br>
——［俄］奥斯特洛夫斯基
</p>
展示
人最宝贵的东西是生命。生命对每个人来讲只有一次。一个人的生命应该这样度过：当他回首往事时，不会因虚度年华而悔恨，也不会因碌碌无为而羞耻。在临死的时候，他能够说：我的整个生命和全部精力，都已献给了世界上最壮丽的事业——为人类的解放事业而斗争。
——［俄］奥斯特洛夫斯基
最后，给大家推荐一个前端学习进阶内推交流群685910553（前端资料分享），不管你在地球哪个方位，
不管你参加工作几年都欢迎你的入驻！（群内会定期免费提供一些群主收藏的免费学习书籍资料以及整理好的面试题和答案文档！）
如果您对这个文章有任何异议，那么请在文章评论处写上你的评论。
如果您觉得这个文章有意思，那么请分享并转发，或者也可以关注一下表示您对我们文章的认可与鼓励。
愿大家都能在编程这条路，越走越远。
网友评论