码迷,mamicode.com
首页 > Web开发 > 详细

HTML使用的几个小知识点

时间:2018-11-23 11:26:54      阅读:148      评论:0      收藏:0      [点我收藏+]

标签:Fix   position   知识点   hit   dash   ash   sla   ima   源代码   

本文主要分享几个网页前端的几个基础知识点,用于零碎的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></scrip>标签初识

使用元素的方式有两种:


  • 直接在页面中嵌入JavaScript代码

  • 包含外部JavaScript文件

方法1

<script type="text/javascript">
    function hello(){
        alert("hello");
    }
</script>

方法2

<script type="text/javascript" src="外部文件的代码.js"></script>

6. html案例

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使用的几个小知识点

标签:Fix   position   知识点   hit   dash   ash   sla   ima   源代码   

原文地址:https://www.cnblogs.com/brightyuxl/p/10005865.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!