HTML 二:(html字符实体,标签,图像路径,链接,列表)

版权声明:一个苦逼初学者的原创小博客。 https://blog.csdn.net/SenZendao/article/details/82429662

今天看新闻,台风来了,在日本造作了一下,风速达到40多米/秒,讲道理因为我不是沿海,所以没有经历过台风,所以以后挣钱了先去看看大海吧。(好像追求有点low,小目标嘛,慢慢来)下面,继续总结HTML。

HTML字符实体

给大家推荐一个学习前端的网站吧;
https://www.w3cschool.cn/ 对就是这个网站,我总结的东西肯定不够完整,所以大家可以去这个网站好好看,好好学。对我们这种初学者会有很大的帮助

代码中成段的文字,如果文字间想空多个空格,在代码中空多个空格,在渲染成网页时只会显示一个空格,如果想显示多个空格,可以使用空格的字符实体,代码如下:

<!--  在段落前想缩进两个文字的空格,使用空格的字符实体:&nbsp;   -->
<p>
&nbsp;&nbsp;一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用<br />
文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件<br />
渲染成网页,显示的网页可以从一个网页链接跳转到另外一个网页。</p>

在网页上显示 “<” 和 “>” 会误认为是标签,想在网页上显示“<”和“>”可以使用它们的字符实体,比如:

<!-- “<” 和 “>” 的字符实体为 &lt; 和 &gt;  -->
<p>
    3 &lt; 5 <br>
    10 &gt; 5
</p>

HTML块、含样式的标签

HTML块

1、div标签 块元素,表示一块内容,没有具体的语义。
2、span标签 行内元素,表示一行中的一小段内容,没有具体的语义。

HTML含样式和语义的标签

1、em标签 行内元素,表示语气中的强调词
2、i标签 行内元素,原本没有语义,w3c强加了语义,表示专业词汇
3、b标签 行内元素,原本没有语义,w3c强加了语义,表示文档中的关键字或者产品名
4、strong标签 行内元素,表示非常重要的内容

HTML 语义化的标签

语义化的标签,就是在布局的时候多使用语义化的标签,搜索引擎在爬网的时候能认识这些标签,理解文档的结构,方便网站的收录。比如:h1标签是表示标题,p标签是表示段落,ul、li标签是表示列表,a标签表示链接,dl、dt、dd表示定义列表等,语义化的标签不多。

HTML图像、绝对路径和相对路径

html图像

img标签可以在网页上插入一张图片,它是独立使用的标签,通过“src”属性定义图片的地址,通过“alt”属性定义图片加载失败时显示的文字,以及对搜索引擎和盲人读屏软件的支持。

<img src="images/pic.jpg" alt="产品图片" />
绝对路径和相对路径

像网页上插入图片这种外部文件,需要定义文件的引用地址,引用外部文件还包括引用外部样式表,javascript等等,引用地址分为绝对地址和相对地址。
1.绝对地址:相对于磁盘的位置去定位文件的地址
2.相对地址:相对于引用文件本身去定位被引用的文件地址
绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件,相对路径就没有这个问题。相对路径的定义技巧:
1.“ ./ ” 表示当前文件所在目录下,比如:“./pic.jpg” 表示当前目录下的pic.jpg的图片,这个使用时可以省略。
2.“ ../ ” 表示当前文件所在目录下的上一级目录,比如:“../images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。

HTML链接

a标签可以在网页上定义一个链接地址,通过src属性定义跳转的地址,通过title属性定义鼠标悬停时弹出的提示文字框。

<a href="#"></a> <!--  # 表示链接到页面顶部   -->
<a href="http://www.baidu.com/" title="">百度</a>
<a href="2.html">做测试的页面2</a>

定义页面内滚动跳转

页面内定义了“id”或者“name”的元素,可以通过a标签链接到它的页面滚动位置,前提是页面要足够高,有滚动条,且元素不能在页面顶部,否则页面不会滚动。

<a href="#mao1">标题一</a>
......
......
<h3 name="mao1">跳转到的标题</h3>

HTML列表

有序列表

在网页上定义一个有编号的内容列表可以用

  1. 配合使用来实现,代码如下:

<ol>
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
</ol>
无序列表

在网页上定义一个无编号的内容列表可以用

  • 配合使用来实现,代码如下:

<ul>
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
</ul>

在网页上生成的列表,每条项目上会有一个小图标,这个小图标在不同浏览器上显示效果不同,所以一般会用样式去掉默认的小图标,如果需要图标,可以用样式自定义图标,从而达到在不同浏览器上显示的效果相同,实际开发中一般用这种列表。

定义列表

定义列表通常用于术语的定义。dl标签表示列表的整体。dt标签定义术语的题目。dd标签是术语的解释。一个dl中可以有多个题目和解释,代码如下:

<h3>前端三大块</h3>
<dl>
    <dt>html</dt>
    <dd>负责页面的结构</dd>

    <dt>css</dt>
    <dd>负责页面的表现</dd>

    <dt>javascript</dt>
    <dd>负责页面的行为</dd>

</dl>

后面应该就只剩表格表单和两个框架了,因为我以后应该不会从事前端工作,所以这就是我学习前端的标准,如果真的有哪位专业前端人士不小心看到了我的文章,请不要吐槽我。。。

猜你喜欢

转载自blog.csdn.net/SenZendao/article/details/82429662
今日推荐