前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

HTML学习笔记(html要怎么学)

1.标题标签:<h1> </h1>

2.段落标签:<p> </p>


3.水平线标签:<hr/>

CSS技巧:让图片在文章内容中自动居中的实现代码

华哥最近调整自己的一个网站时,觉得在发布文章时,手动把图片居中,实在有些麻烦。能不能让文章内容中的图片自动居中呢?是否可以通过样式控制表来实现?

网上找了下答案,似乎有些过于复杂了。自己动手实践吧。

首先要调整的,是让图片独占一行空间。

补充CSS知识点:

图像(<img>标签)默认是行内样式(inline style),行内样式的大体意思是,它前边或后边的HTML标签元素会紧挨着排在它的前后(如影随形),不会另换一行;而像DIV标签则默认是块级元素,块级元素前后的标签元素会换行。因此需要把文章内容中的图片样式由行内样式更换为block块级元素,要不就易和文字内容纠缠在一起。

七小时带你入门HTML+CSS网页设计,编写网页代码的思路(三)

上一篇文章中我分享了一段图文标签,这篇文章主要给大家详细解释一下这些代码的作用和意义,以及编写网页代码的格式与思路。

下面我贴上html代码:

<!--HTML-->
<div>
<h2>这是我的第一个网页</h2>
<p>BODY标签表示网页主体元素的容器,它包含了网页所有的html标签如:文本、图片、列表等等。以后我们编写的网页标签都需要放在这里面,这里我写了一段文字,它就会在浏览器里显示出来。这些就构成了我们网页的基本格式,大家也不需要去背,知道表示什么意思就行,需要的时候直接拿来用。</p>
<p><img src="https://tpt360.com/tuimg/yan.png"></p>
</div>

HTML学习笔记(1)(html自学笔记)

1、HTML5设计哲学,它并不是规范优先的设计,它是“妥协式”的规范。

2、HTML5对元素大小写不再严格区分,开发者可以随意使用大小写字符来定义HTML元素。

3、对于一份基本的HTML5文档而言,它总有如下结构:

<!DOCTYPE html>

<html>

前端CSS的box-sizing属性讲解与应用场景

box-sizing是什么?

box-sizing是定义元素宽度与高度范围的属性,简单点说:当我们在开发自适应布局的时候,经常会出现DIV的边框而导致DIV自动换行。

从上图可知,当我们设置两个DIV 分别为宽度200的时候,在加上边框各自2px无法满足同一水平线对其,因此只能换行处理。

当我们将父边框body属性设置404,即包含各自DIV的两个边框1px像素时候,能满足水平对其。

现在问题来了,由于某些原因,我们就一定要求父边框400像素同时水平对其两个DIV。

HTML入门练习案例(html入门基础)

(1)熟练使用p标签加粗样式标签给文本分段
(2)熟练使用换行标签h标签加粗给标签写标题
(3)使用图像标签加图像
(4)使用锚点链接可以点击链接快速定位到页面中的某个位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- h1标签的使用 -->
<h1 id="top">猫猫种类</h1>
 <!--换行标签<br/>的使用  -->
猫猫分为<br/>
<!-- 锚点链接的<a herf="#"></a>使用 -->
<a href="#miao">妙猫猫,</a><br/>
<a href="#cry">流泪猫猫,</a><br/>
<a href="#ben">本拉豆猫猫,</a><br/>
<a href="#wei">委屈猫猫</a><br/>
<h4 id="miao"><h3>妙猫猫</h3></h4>
<p>秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙
    秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙</p>
<h4 id="cry"><h3>流泪猫猫</h3></h4>
没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没<p>人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫</p>
<img src="images/流泪猫猫.gif"width="300"/>
<h4 id="ben"><h3>本拉豆猫猫</h3></h4>
<p>哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!
   </p>
   <!-- 图像标签<img src="图像地址"/>的使用 -->
   <img src="images/本拉豆猫.jpg"width="300"/>
<h4 id="wei"><h3>委屈猫猫</h3></h4>
<p>我只是一只小猫咪,我为什么要承担这么多?我只是一只小猫咪,我为什么要承担这么多?我只是一只小猫咪,我为什么要承担这么多?我只是一只小猫咪,我为什么要承担这么多?我只是一只小猫咪,我为什么要承担这么多?我只是一只小猫咪,我为什么要承担这么多?我只是一只小猫咪,我为什么要承担这么多?我只是一只小猫咪,我为什么要承担这么多?我只是一只小猫咪,我为什么要承担这么多?我只是一只小猫咪,我为什么要承担这么多?我只是一只小猫咪,我为什么要承担这么多?我只是一只小猫咪,我为什么要承担这么多?我只是一只小猫咪,我为什么要承担这么多?我只是一只小猫咪,我为什么要承担这么多?我只是一只小猫咪,我为什么要承担这么多?我只是一只小猫咪,我为什么要承担这么多?我只是一只小猫咪,我为什么要承担这么多?我只是一只小猫咪,我为什么要承担这么多?我只是一只小猫咪,我为什么要承担这么多?我只是一只小猫咪,我为什么要承担这么多?我只是一只小猫咪,我为什么要承担这么多?我只是一只小猫咪,我为什么要承担这么多?我只是一只小猫咪,我为什么要承担这么多?我只是一只小猫咪,我为什么要承担这么多?</p>
<a href="#top">返回顶部</a><br>
<a href="images/菠萝头简介.html"target="_blank">引申猫猫:菠萝头的简介和照片</a>
</body>
</html>
![本拉豆猫图片插入图 ](https://img-blog.csdnimg.cn/20201014210646633.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDY3NDc5,size_16,color_FFFFFF,t_70#pic_center)

![流泪猫猫](https://img-blog.csdnimg.cn/2020101421073586.gif#pic_center)




1234567891011121314151617181920212223242526272829303132333435363738394041

Vue+CSS3制作双螺旋DNA动画:代码详解和基础知识复习

1 效果:

2 知识点:

=======

2.1 html的基础知识。

2.2 css3的基础知识。

2.3 vue的基础知识。

2.4 代码讲解非常清楚,小白看了都会。

3 html骨架:

========

3.1 代码:

「转行测试开发-HTML」(五)---div和span、图像标签还有相对路径

刚刚发现,HTML第四章节没有说删除线的标签,趁着马上要12点的时候,赶快将删除线标签补上。

删除线标签使用 <del>和<s>, 不用多说,一般用的多的就是<del>

先上效果:

然后看下代码:

<!DOCTYPE html>

<< < 1 2 >>
控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言