前言:
以前也写过一点点(真的只有一点点)前端,但~.~很久没写了,这也是没办法的事情,现在对运维的要求越来越高了(前后端都要了解(深入),后端只会个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> 字体大小依次递减变小
(2).段落标签 paragragh
<p> </p> 标签内的标识为一个段落
(3).水平标签
<hr />
(4).换行标签
<br /> 换行标签
(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特殊字符代码实现,如下图
5.html注释标签
<!-- 注释内容 -->
注释掉的代码,html将不会解析执行,主要用于解释一些代码的作用或者暂时不想执行
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页面底部用该标签较多较多
三、结语
html语言的标签有很多,以学习来讲,先了解掌握一些常用标签快速入门,然后在实际使用过程中查询增加记忆~。~
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。