本文主要分享几个网页前端的几个基础知识点,用于零碎的html知识学习,同时也是在实践中的一些心得。最后给出了几个小例子。
#
这是id选择器的标志.
这时class选择器的标志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>
设计网页时,我们将页面和样式分开写:
样式
#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
。
<script></scrip>
标签初识使用元素的方式有两种:
方法1
<script type="text/javascript"> function hello(){ alert("hello"); } </script>
方法2
<script type="text/javascript" src="外部文件的代码.js"></script>
html
案例代码
<p style="background:#ffb6c1 ; padding: 10px 10px 10px 10px; border: 1px dashed #f4a423; font-family: 幼圆; front-size: 16px;"> 人最宝贵的东西是生命。生命对每个人来讲只有一次。一个人的生命应该这样度过:当他回首往事时,不会因虚度年华而悔恨,也不会因碌碌无为而羞耻。在临死的时候,他能够说:我的整个生命和全部精力,都已献给了世界上最壮丽的事业——为人类的解放事业而斗争。<br> ——[俄]奥斯特洛夫斯基 </p>
展示
人最宝贵的东西是生命。生命对每个人来讲只有一次。一个人的生命应该这样度过:当他回首往事时,不会因虚度年华而悔恨,也不会因碌碌无为而羞耻。在临死的时候,他能够说:我的整个生命和全部精力,都已献给了世界上最壮丽的事业——为人类的解放事业而斗争。
——[俄]奥斯特洛夫斯基
代码
<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>
展示
代码
<table class="tg"> <tr> <th class="tg-xldj">内容</th> <th class="tg-xldj">内容</th> </tr> <tr> <td class="tg-xldj"><<填写内容>></td> <td class="tg-xldj"><<填写内容>></td> </tr> </table>
展示
重量 | 断章 |
---|---|
她把带血的头颅,放在生命的天平上,让所有的苟活者,都失去了——重量。 | 你站在桥上看风景,看风景的人在楼上看你。明月装饰了你的窗子,你装饰了别人的梦。 |
代码
<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>
展示
如对本文有疑问, 点击进行留言回复!!
清除新版Google Chrome浏览器中表单控件(input,button...)默认的黑色边框
荐 20200714——git/mac配置/项目运行步骤/一些报错
antd 菜单组件 使用时报错:Cannot read property ‘isRootMenu‘ of undefined
CSS|div的style=“background-image: url(img/a.bmp)图片显示不出来
硬件仪表盘账号建立指导(一) --WHQL认证测试结果提交账号(一)
cookie的规范Cookie的不可跨域名性或Cookie与域名的关系
网友评论