初学html

最新推荐文章于 2022-11-11 19:34:52 发布

Dr____凉

最新推荐文章于 2022-11-11 19:34:52 发布

阅读量599

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/Dr____sweet/article/details/74999260

版权

HTML5:超文本标记语言（不是编程语言，没有编译过程）超文本：音频、视频，图片称为超文本，HTML页面直接由浏览器解析执行。

开发工具有很多，比如记事本、EidtPlus/NotePad++,专业版有DW（DreamWeaver）,sublime.我用的是sublime。使用的时候先保存成HTML格式，然后打一个！，按住tab键自动生成基本格式。

1.文档的基本格式

<!DOCTYPE html> //文档说明，告诉计算机这是一个HTML5文档
<html lang="zh-cn"> //表示文档的开始，lang="zh-cn"属性表示中文
<head> //head标签存放文档的基本信息，不可见元素
<meta charset="UTF-8"> //声明字符编码
<title>lesson01</title> //声明文档标题
</head> //head结束
<body> //body存放文档可见。内容
hello Html5
</body>
</html> //表示文档结束

注解: <html></html>双标签，所有的文档内容均包含在这个标签中；

<head></heda>不可见内容，包含文档标题，字符编码类；

<body></body>可见内容，图片，文本，表，单等所有可见内容；

效果图

2.元素的概念和3个常见用的标签

html元素是指从开始标签到结束标签的所有代码。

（1）<h1></h1>h标签用来表示标题（h1~h6）

（2）p标签表示一个段落

（3）<hr>单标签，给文档加一个横线。

示例：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>less02</title>
</head>
<body bgcolor="#ffffe0">
<h1>八阵图</h1>
<h2>作者：杜甫</h2>
<hr>
功盖三分国，名成八阵图。
江流石不转，遗恨失吞吴。
</body>
</html>

效果图:

3.HTML元素属性

属性语法：<标签属性1=参数1></标签>

（1）align:指定内容的对齐方式 lift：左对齐（默认对齐方式） right：右对齐 center：居中

（2）bgcolor：添加一个背景颜色

示例：

<!DOCTYPE html>
<html lang="zh-cn">
<head >
<meta charset="UTF-8">
<title>lesso3</title>
</head>
<body bgcolor="#FAEBD7">
<h1 align="center">八阵图</h1>
<h2 align="right">作者：杜甫</h2>
<hr>
功盖三分国，名成八阵图。
江流石不转，遗恨失吞吴。
</body>
</html>

注解： 定义一个换行符（br是blank row的缩写）与不同，此标签换行之后有空格, 没有。

效果图：

4。经常使用的元素

因为比较多，直接体现在文档中：

示例：

<!DOCTYPE html>
<html lang="zh-cn">
<head >
<meta charset="UTF-8">
<title>lesso4</title>

</head>
<body bgcolor="faebd7">
江流石不转， 
b 遗恨失吞吴 
i 倾斜文字 
<del>del 删除文字</del> 
strong 强调一段文本，效果和b一样 
表示安全换行ijpsalzjoiejnouajm表示安全换行ijpsalzjoiejnouajm表示安全换行ijpsalzjoiejnouajm表示安全换行ijpsalzjoiejnouajm 
表示安全换行ijpsalzjoiejnouajm表示安全换行ijpsalzjoiejnouajm表示安全换行ijpsalzjoiejnouajm表示安全换行ijpsalzjoiejnouajm 
em强调，与i作用一样也是倾斜 
删除线，<s>s 从语义上讲是不准确删除</s> 
u 给文字添加下划线 
<ins>ins 实际作用：给文字添加下划线。语义上添加一段文字，起强调作用</ins> 
下标sub上标sup 
small 添加小号字体 
<dfn>dfn 语义上：表示定义术语，实际是倾斜字体</dfn> 
<abbr title="suoxie"> abbr 表示缩写，实际没有任何效果</abbr> 
<q> q 实际作用加双引号</q> 
code元素用来表示计算机代码片段：<code>function(){}</code> 
var元素用来表示编程语言中的变量：<var>num</var> 
samp元素表示计算机的输出<samp>您没有权限浏览该网页</samp> 
kbd表示某部分内容是由客户利用键盘输入：如请按<kbd>Enter</kbd> 
<ruby>英雄 <rt>(ying) (xiong)</rt></ruby> 
<cite>语义引用其他作品的标题，实际效果倾斜效果</cite> 
<bdo dir="ltr">设置文字方向，必须使用dir属性才能设置。rtl从右到左，ltr从左到右（默认）</bdo> 
作用突出显示文本，用于记号。实际作用是加上一个黄色的背景 
<time>语义上表示时间，实际上相当于一个普通文本 2017-7-11</time> 
一般文本，没有显示效果
</body>
</html>

效果图：

5.超链接

5种链接方式

（1）文本链接

<a href ="网页地址">名称</a>

（2）本地文档

<a href ="本地文档+后缀名（例如：less03.html）">名称</a>

（3）图片链接

<a href ="网页地址"><img src="图片路径"></a>
（4）邮箱链接

<a href ="mailto:邮箱地址">名称</a>
（5）下载链接

<a href ="文件名.后缀">下载</a>

注解：如果图片等要用到的文件不跟这个文档存在一个文件夹下的话应该写绝对路径，邮箱链接应该下载邮箱客户端才能用，下载链接使用压缩包才能下载。

效果图：

6。两个属性

1.target 属性的四个值：

_self:当前属性 _blank:最新窗口 _top:最顶层框架 _parent：父框架

用法：<a href="" target=""></a>

2.id 属性：通用属性，可以理解为元素的身份证；

name属性：可以理解为元素的名字。

示例：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>less06超链接-taget属性</title>
</head>
<body>
文本链接：<a href="http://www.baidu.com" target="_blank">百度</a> 
<a href="#1">no.1</a>
<a href="#2">no.2</a>
<a href="#3">no.3</a>
 
<a id="1">no.1 
<a id="2">no.2 
<a id="3">mo.3 
</body>
</html>

效果图：

注解：点击百度重新开始一个新的页面，这个页面依旧保存，点击no1跳转到no1处。

Dr____凉

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初学html

HTML5:超文本标记语言（不是编程语言，没有编译过程）超文本：音频、视频，图片称为超文本，HTML页面直接由浏览器解析执行。开发工具有很多，比如记事本、EidtPlus/NotePad++,专业版有DW（DreamWeaver）,sublime.我用的是sublime。使用的时候先保存成HTML格式，然后打一个！，按住tab键自动生成基本格式。1.文档的基本格式
复制链接

扫一扫