前言:
以前也写过一点点(真的只有一点点)前端,但~.~很久没写了,这也是没办法的事情,现在对运维的要求越来越高了(前后端都要了解(深入),后端只会个python哪能行,java啥的整起~),然~以初学者的心态学习前端总是不错的,记录一二~。~

当然记录的内容也是一些网站来的内容,就不多说了,主要是学习之用~

一、html简介

html(超文本标记语言)
用文本表述带有特殊标签的语言

什么是标签? <> 用尖括号括起来的内容就是标签

1.html骨架

<!DOCTYPE html>  表示使用html5
<html> html标签为根标签
    <head> head标签 头标签
        <title></title>  标题标签
        <mate charset=“htf8”>   字符集
    </head>
    <body> 主体标签
    </body>
</html>

2.单双标签

(1).双标签

<></>

<>标签开始,</>标签结束的就是双标签
html中大部分是双标签,标签中的"/"为关闭符

(2).单标签

< />

只有一个标签的就是单标签,一个标签包含内容和关闭符
单标签数量较少,如:<br />换行标签

3.html标签关系

(1).嵌套关系

<head>
    <title></title>
</head>  

head与title标签为嵌套关系

(2).并列关系

<head></head>
<body></body>

head和body标签为并列关系

二、html常用标签

1.html排版标签

(1).标题标签,单词head缩写

<h1> <h2> <h3> <h4> <h5> <h6>  字体大小依次递减变小

image.png
image.png

(2).段落标签 paragragh

<p> </p>  标签内的标识为一个段落

(3).水平标签

<hr />

image.png
image.png

(4).换行标签

<br /> 换行标签

image.png
image.png

(5).文本格式化标签

<b></b> <strong></strong> 字体加粗,XHTML推荐使用strong
<i></i> <em></em> 斜体,XHTML推荐使用em
<s></s> <del></del> 删除线方式显示,XHTML推荐使用del
<u></u> <ins></ins> 加下划线方式显示,XHTML不赞成使用u
strong,em,del,ins 语义更清晰强烈(也就是可读性更强,歧义更少),建议使用

(6).无语义标签
如果说html哪个标签用得最多,那一定是<div></div>标签了,是无语义标签,主要用来布局

<div></div> 
<span></span>  无语义标签,用来布局

2.html图像标签

<img src="图片地址"/>
属性      属性值    描述
src      URL      图像的路径
alt      文本      图像不能显示时的替换文本
title    文本      鼠标悬停时显示的内容
width    像素      设置图像的宽度
height   像素      设置图像的高度
border   数字      设置图像边框的宽度

3.html链接标签

<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像</a>
<a href="http://www.baidu.com" target="_blank">百度</a>

target值->
_blank  在新页面打开
_self   在当前页面打开(默认)

注意:外部链接需要添加http头部

4.html特殊字符

在http中,有些本身属于标签的特殊符合,如:"<" "/" ">"等,可以使用html特殊字符代码实现,如下图
image.png

5.html注释标签

<!-- 注释内容 -->

注释掉的代码,html将不会解析执行,主要用于解释一些代码的作用或者暂时不想执行
1576026963155.jpg

6.html列表标签

(1).无序列表

<ul>
    <li>x</li>
    <li>y</li>
</ul>

注:
(1)<ul></ul>中只嵌套<li></li>
(2)<li>与</li>之间相当于一个容器,可以容纳所有元素
(3)无序列表会带有自己的样式属性

(2).有序列表

<ol>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
</ol>

注:跟无序列表一致

(3).自定义列表
一个<dt>对应多个<dd>标签

<dl>
    <dt>a</dt>
    <dd>b</dd>
    <dd>c</dd>
</dl>

注:html页面底部用该标签较多较多
image.pngimage.png

三、结语

html语言的标签有很多,以学习来讲,先了解掌握一些常用标签快速入门,然后在实际使用过程中查询增加记忆~。~


青叶
452 声望43 粉丝