整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

零基础学习HTML换行符段落标题水平线文本格式化字体链接锚点

yperText Markup Language 简称为HTML

HyperText: 超文本 (文本 + 图片 + 视频 + 音频 + 链接)

Markup Language: 标记语言

由SGML(标准通用标记语言)发展而来,写给浏览器的语言

超文本标记语言(第一版)1993年6月(IETF制定)

HTML 2.0——1995年11 月;HTML 3.0——1996年1 月;HTML 4.0——1997年

W3C: World Wide Web Consortium (W3C理事会或万维网联盟)

1.HTML元素由开始标签和结束标签组成。

2.位于开始标签和结束标签中的文本是元素的内容。

3.HTML 标签有开始必须有结束。如果是没有内容的标签(空标签),用 />来结束。

4.标签名不区分大小写,但是在XHTML中标签名必须用小写。

5.标签具有属性, 属性用来表示标签的性质和特征。属性要在开始标签中指定。

HTML 基本元素

换行符 <br />

段落 <p></p>

标题 <h1></h1>

水平线<hr />

文本格式化<b>

预格式文本<pre>

字体<font>

链接<a>

图像<img>

特殊字符&nbsp;

注释<!-- -->

一、换行符

<br />

二、段落

<p>这是一个段落</p>

属性说明

align行对齐方式(left, right, center)

三、标题

<h1>标题1</h1>

<h2>标题2</h2>

<h3>标题3</h3>

<h4>标题4</h4>

<h5>标题5</h5>

<h6>标题6</h6>

四、水平线

<hr />

<hr size="5" width="50%" align="center" />

属性说明

size指定线的粗细(px)

width指定线的长度(px或%)

align行对齐方式(left, right, center)

五、文本格式化

<b>定义粗体文本</b>

<i> 定义斜体文本 </i>

<s>定义删除文本</s> <del></del>

<u>定义下划线文本</u>

<sup>定义上标字</sup>

<sub>定义下标字</sub>

六、<pre> 预格式文本

<pre>标签可以保留文字在源代码中的格式,使得页面中显示的内容和源代码中的格式一致。如:

<pre>

<script>alert("这会显示一个弹出窗口");</script>

</pre>

七、字体

<font>这是一段文字</font>

属性说明

size定义字体大小

face定义字体

color定义字体颜色

(1)16进制的模式 #DCC123

(2)单词模式 red ,blue ,green ,black

(3)RGB rgb(20,100,35) 0-255

八、链接

<a href="URL"> ~ </a>

属性说明

href定义链接地址

title链接提示信息

target链接打开方式(_blank 新的空白页,_self 当前页,_top)

九、邮件链接

<a href="mailto:邮箱地址"> ~ </a>

十、锚点

锚点标签用于使用户"跳"到文档的某个部分。

<a href="#位置名"> ~ </a>

<a name="位置名"> ~ </a>

怎样指定链接的地址

1.外部链接

<a href="http://www.haook.cn"> HTML模板网</a>

2.内部链接

<a href="about.html"> 公司简介 </a>

度选择器

(就是大盒子内几层后有一个标签,没有指定class和id,单独给这个标签设置样式的时候找不到,需要在内标签的声明样式之前 加一个 /deep/ )

在vue 项目中使用 scoped 后,在父组件中的样式无法修改子组件的样式这时可以使用深度作用选择器 /deep/

如:我的项目中,div 内部有 多个p,有的p里有段落文字,有的p里是img标签,而我就想这样写img的时候,就需要在img前加 /deep/ 就可以找到img。

空白幽灵节点设置

什么是空白幽灵节点:没有margin 和padding,却有空白的位置


解决的办法:

1.在他的父元素的div上加 font-size:0;

2.改变img的元素display:block

多程序员朋友,在用CSS进行边距调整时,老分不清楚外边距margin和内边距padding的区别,在我部门,就有两个迷糊虫。于是我上网找了一幅图,一副不可描述的图(你可不要想歪了),他们一看就完全明白了,现在分享给你。



12.1 内外抉择

在什么场景中使用padding,在什么场景中使用margin,这是一个学问。你掌握了,学问就有了。

这是用padding的学问

(1)需要在border内侧添加空白,在文字与边框留有距离时;

(2)空白处需要背景色时;

(3)上下相连的两个盒子之间的空白希望等于两者之和时,比如15px+20px的padding,将得到35px的空白。

这是用margin的学问

(1)需要在border外侧添加空白时;

(2)空白处不需要有背景色时;

(3)上下相连的两个盒子之间的空白需要相互抵消时,比如15px+20px的margin,将得到20px的空白。

12.2 内外有别

在CSS中,通过外边距margin属性,可设置元素周围的空间。可用margin统一指定4边,也可用margin-top等属性,特指其中一边。这种方案,在CSS中是很常见的。padding和margin的作用不同,但用法是一样的。为了区分效果,我只在一个div中用了padding,通过比较,一目了然。

在CSS表文件ys2.css中的代码

/*单独指定一个边距*/
.one-margin {
    margin-left: 100px;
}

/*4个边距*/
.four-margin {
    background: cadetblue;
    width: 400px;
    height: 200px;
    margin: 10px 20px 30px 50px;
}

/*加上padding*/
.use-padding {
    background: cadetblue;
    width: 400px;
    height: 200px;
    margin: 10px 20px 30px 50px;
    padding-top: 20px;
}

在HTML文件中的代码

<div class="big-div">
    <h1 class="one-margin">margin用法</h1>
    <div class="four-margin">
        margin一个值:4个边距;<br/>
        margin两个值:上下边距、左右边距;<br/>
        margin三个值:上边距、左右边距、下边距;<br/>
        margin四个值:上边距、右边距、下边距、左边距。
    </div>
    <div class="use-padding">
        padding一个值:4个边距;<br/>
        padding两个值:上下边距、左右边距;<br/>
        padding三个值:上边距、左右边距、下边距;<br/>
        padding四个值:上边距、右边距、下边距、左边距。<br/>
        为了区分margin和margin,我只用 padding-top,你能看出效果么?
    </div>
</div>

输出结果

好了,有关CSS边距的内容,老陈讲完了,如果觉得对你有所帮助,希望老铁能转发点赞,让更多的人看到这篇文章。你的转发和点赞,就是对老陈继续创作和分享最大的鼓励。

一个当了10年技术总监的老家伙,分享多年的编程经验。想学编程的朋友,可关注:老陈说编程。分享Python,前端(小程序)、App和嵌入式方面的干货。关注我,没错的。

#前端##HTML5##CSS##程序员##Web#