常见的html内lian联元素,HTML使用的几个小知识点

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

1. 网页编程初识

掌握基本的html标签以及css语法

学会查看网页的源代码f12

生活中多总结一些基本的美好的东西

2. 页面定制css代码中的选择器

#这是id选择器的标志

.这时class选择器的标志

3. div标签的用法

解释

案例

普通内容

我字体大小为16px

我字体颜色为红色

我背景为黑色字体为白色

布局设置边框和高度

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; /*加些背景色和阴影，以便区分*/

}

网页

从上面可以看出，样式和网页是通过id="my_style_design"和#my_style_design联系在一起的，也就是说网页上的

5. 标签初识

使用元素的方式有两种：直接在页面中嵌入javascript代码

包含外部javascript文件

方法1

function hello(){

alert("hello");

}

方法2

6. html案例

6.1 段落

代码

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

——［俄］奥斯特洛夫斯基

展示

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

——［俄］奥斯特洛夫斯基

6.2 图片

代码

展示

6.3 表格

代码

内容	内容
<>	<>

展示重量

断章

她把带血的头颅，放在生命的天平上，让所有的苟活者，都失去了——重量。

你站在桥上看风景，看风景的人在楼上看你。明月装饰了你的窗子，你装饰了别人的梦。

6.4 视频

代码

展示