本文主要分享几个网页前端的几个基础知识点,用于零碎的html知识学习,同时也是在实践中的一些心得。最后给出了几个小例子。

1. 网页编程初识

  1. 掌握基本的html标签以及CSS语法
  2. 学会查看网页的源代码F12
  3. 生活中多总结一些基本的美好的东西

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. 案例

6.1 段落

代码

<p style="background:#FFB6C1 ; padding: 10px 10px 10px 10px; border: 1px dashed #F4A423; font-family: 幼圆; front-size: 16px;">
人最宝贵的东西是生命。生命对每个人来讲只有一次。一个人的生命应该这样度过:当他回首往事时,不会因虚度年华而悔恨,也不会因碌碌无为而羞耻。在临死的时候,他能够说:我的整个生命和全部精力,都已献给了世界上最壮丽的事业——为人类的解放事业而斗争。<br>
——[俄]奥斯特洛夫斯基
</p>

展示

人最宝贵的东西是生命。生命对每个人来讲只有一次。一个人的生命应该这样度过:当他回首往事时,不会因虚度年华而悔恨,也不会因碌碌无为而羞耻。在临死的时候,他能够说:我的整个生命和全部精力,都已献给了世界上最壮丽的事业——为人类的解放事业而斗争。

——[俄]奥斯特洛夫斯基

6.2 图片

代码

<div>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542947868759&di=de9243408a5d905764ca952a7abea4eb&imgtype=jpg&src=http%3A%2F%2Fimg1.imgtn.bdimg.com%2Fit%2Fu%3D1410032331%2C102114236%26fm%3D214%26gp%3D0.jpg" width="542" height="338"/>
</div>

展示

6.3 表格

代码

<table class="tg">
<tr>
<th class="tg-xldj">内容</th>
<th class="tg-xldj">内容</th>
</tr>
<tr>
<td class="tg-xldj">&lt;<填写内容>&gt;</td>
<td class="tg-xldj">&lt;<填写内容>&gt;</td>
</tr>
</table>

展示

重量 断章
她把带血的头颅,放在生命的天平上,让所有的苟活者,都失去了——重量。 你站在桥上看风景,看风景的人在楼上看你。明月装饰了你的窗子,你装饰了别人的梦。

6.4 视频

代码

<video src="http://183.60.197.31/16/x/i/n/q/xinqvpqpthnadclnkdraroufbbcacm/hc.yinyuetai.com/C01B0166660C51A35C0E5612EB9BC5E3.mp4" controls width="200" height="200" poster="http://img18.3lian.com/d/file/201709/21/f498e01633b5b704ebfe0385f52bad20.jpg"></video>

展示

HTML使用的几个小知识点的更多相关文章

  1. 刚接触Linux,菜鸟必备的小知识点(一)

    身为一个将要大四的学生,而且还是学计算机的没有接触过linux简直是羞愧难当.这个假期做了一个软件测试员,必须要熟悉linux的操作,所以对于我这个菜鸟我也就说几点比较重要的小知识点吧. 第一.cd指 ...

  2. Java学习过程中的总结的小知识点(长期更新)

    Java学习过程中的总结的小知识点 (主要是自己不会的知识和容易搞错的东西) 计算某个程序运行的时间 long stime=System.currentTimeMillis(); copy3(file ...

  3. 【转】HTML5的小知识点小集合

    html5的小知识点小集合 html5知识   1.  Doctype作用?标准模式与兼容模式各有什么区别? (1).<!DOCTYPE>声明位于位于HTML文档中的第一行,处于<h ...

  4. AngularJS的小知识点

    小知识点:$scope和$rootScope (1)每次使用ngController指令,都会调用控制器的创建函数,创建出一个控制器对象. (2)每次创建一个控制器对象,AngularJS都会创建一个 ...

  5. js中关于value的一个小知识点(value既是属性也是变量)

    今天在学习input的value值时,发现这么一个小知识点,以前理解不太透彻. [1]以下这种情况是常见情况,会弹出“测试内容” <input type="button" v ...

  6. html5的小知识点小集合

      html5的小知识点小集合 html5知识   1.  Doctype作用?标准模式与兼容模式各有什么区别? (1).<!DOCTYPE>声明位于位于HTML文档中的第一行,处于< ...

  7. [BS] 小知识点总结-05

    [BS] 小知识点总结-05 1. 不论UIWindow的rootViewController是navC.tabBarC还是VC,也不管modalVC和rootVC中间隔着多少个VC,但是modal出 ...

  8. 一个关于echo的小知识点

    一个关于echo的小知识点     echo一个布尔值时,如果是true,输出1,而如果是false,将什么都不输出! 网上搜的一个解释: 对于数字类型来说,false 确实 是 0, 而对strin ...

  9. easyui中的combobox小知识点~~

    一直使用的easyui中,一些不为人知的小知识点,与君共勉: 1.combobox设置高度:使用panelHeight属性: 2.combobox本身自带“自动补全”功能,但是在浏览器中是有限制的,在 ...

  10. android 小知识点

    小知识点总结 1. android中MotionEvent.ACTION_CANCEL事件如何被触发? 对于这个问题,android文档的说明很简短,想看明白很难.国外一网页说的还比较详细,写在这里分 ...

随机推荐

  1. hdu1540 区间合并+询问某点的最大连续块

    询问操作需要搞一下 今天被区间合并降智了 /* D a: 摧毁第a个点 Q a:询问a所在的点的块大小 R :修复最后被破坏的点 对于所有的点需要进行一次更新 更新比较容易,tag用来表示区间是否是完 ...

  2. bzoj1912 树形dp求直径(新写法),求直径的两端点

    通过回溯法可以求出直径的两个端点,同时注意有负权边的树求直径不可以用两次dfs来求,而必须用dp做 /* 分情况讨论问题 一条边也不加的情况,显然每条边要扫描两次, 该情况的答案是2(n-1) 只加一 ...

  3. 第二周学习总结-Java

    2018年7月22日 暑假第二周马上就要结束了,这一周我继续学习了java. 本周学到了一些Java的修饰词,比如static.private.public等,这些修饰词用法与c++类似,很容易掌握. ...

  4. js中json对象数组按对象属性排序(sort方法)---2(根据拼音排序汉字和排序英文)

    本例主要实现 中文汉字按拼音排序的方法和英文按照首字母排序的方法. 要排序的数据: //要排序的数据 let data = [ {chinese: '蔡司', english: 'Chase'}, { ...

  5. AI-视图组件-五个接口的最终简化版

    五个接口最终版 #url.py # 序列化最贱版本 url(r'^customer/$', views.CustomerView.as_view({"get":"list ...

  6. 论文阅读笔记三十八:Deformable Convolutional Networks(ECCV2017)

    论文源址:https://arxiv.org/abs/1703.06211 开源项目:https://github.com/msracver/Deformable-ConvNets 摘要 卷积神经网络 ...

  7. Hadoop集群最迅速的配置免密码登陆方法

    1:多台机器互相免密登陆的思路(默认你的linux操作系统已经安装好ssh): 第一步:在各自的机器上面生成密钥: 在第1台机器上生产一对钥匙: ssh-keygen -t rsa 在第2台机器上生产 ...

  8. Visual stuio2015 升级 Update 3+安装.Net Core 安装包之后,无法创建Mvc项目

    原因: 怀疑是更新后缺少Web Frameworks and Tools 工具, 安装update3的时候提示异常 解决方法: 1.去微软 下载 Web Frameworks and Tools安装后 ...

  9. ynoi2018

    题解: 全分块是啥操作啊.. 而且都好难.. 1.未来日记 这个比较简单 对每个块开个线段树维护权值 $n\sqrt{n}logn$ 这个会炸空间 并不能做... 但还是说一下做法 首先考虑分块 然后 ...

  10. day10.函数进阶

    函数的命名空间 从python解释器开始执行之后,就在内存中开辟了一个空间,每当遇到一个变量的时候,就把变量名和值之间的对应关系记录下来. 但是当遇到函数定义的时候解释器只是象征性的将函数名读入内存, ...