HTML基础入门

大家好,昨天我们简单的介绍了一下编辑器,今天我们就要用编辑器实际的操作了.

首先,我们要了解一下HTML.那么什么是HTML呢?

HTML:超文本标记语言(Hypertext Markup Language),写给浏览器的语言,目前网络上应用最广泛的语言。HTML也在不断的更新,最新版本已经出现了HTML5,HTML5新增了更多的标签和特性,也废除了不少的旧元素.

我们在编辑器中或记事本中写好的代码用浏览器中打开,最好用市面上一些主流的浏览器,比如:谷歌、火狐、苹果等等,不过最好还是不要用IE浏览器,因为IE低版本的兼容不是很好,到以后的学习或者工作的时候你会因为IE的兼容问题掉很多的头发的.

HTML元素是由开始标签和结束标签组成的,例:"<p></p>",虽然现在我们还不知道具体标签代表的意思,但标签一定是这样的格式:有一对开始<>和结束</>.

当然还有一些特殊的标签是单标签,就是只有开始<>,没有结束.但人家自带结束符,例:<hr/>   <img/> <br/>...

HTML的基本结构

<html>
    <head>
        <title>这是我的博客</title>
    </head>
    <body>
      这是我的身体.
    </body>
</html>上面的例子是告诉浏览器<html>是一篇文章的开始,文档的最后一个标签是</html>,告诉浏览器结束了.<head></head>是头部文档信息,<title></title>是文档的标题,会显示在浏览器的窗口的标题栏,文档的内容都是放在<body></body>之间的.今天我们就先来了解一下HTML的一些常用元素(标签)和基本规范.

基本规范1.在写<html>之前,要先写文档声明<!DOCTYPE HTML>,当然小写也可以,这是告诉浏览器该文档遵循html规范.2.页面编码:编码的种类有多种,但常用的是utf-8.utf-8为多国语言编码(万国码),gb2312为中文简体编码.对于编码的详细问题,可以浏览博客.设置网页编码的语句为<meta charset= "utf-8" />,是在<head></head>标签内定义的.刚开始我们了解这两点规范基本就够了,以后有需要规范的地方我们再细说.

常用元素

最常用的就是文本标签,例:<body>  <p>    May-J-Wang的博客,求关注  </p></body>

在浏览器中打开就是这个效果

就是定义一个段落,在写文章、新闻或有大量的文字时会用到.

换行符<br/>

换行对于文本编辑来说是最正常不过的了.当文字写满一行,需要换行.或者根据需要,在文本中换行,这都是可以的.

标题

在一个网页中,文档会有大小不同的标题,用代码写分别为:

<h1>标题1</h1>             

<h2>标题2</h2>

<h3>标题3</h3>

<h4>标题4</h4>

<h5>标题5</h5>

<h6>标题6</h6>h后面的数越小标题越小.

文本格式化,一些常用于设置文本字体的元素:

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

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

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

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

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

效果图如下:

超链接<a></a>

a标签用来定义一条超链接,其中要有的是href属性,href的作用是指明超链接要链接到的网址.除了href属性,还有title属性表示链接的提示信息.target属性表示链接的打开方式,即当点击了链接,选择是在另一个页面打开还是本页面打开.其属性值包括_blank(新的空白页)、_self(当前页),_top(当前页).

<a href="#" target="_blank">百度一下</a>

href的值可以是外部链接,也可以是内部文件,如***.html文件.

<a href=“http://www.163.com”>外部链接</a>

<a href=“about.html”>内部链接 </a>例:

注:a标签上的文字样式是a标签自带的样式

图像<img/>


属性


属性值


说明


src


url


图片资源的地址


width


像素(px)百分比(%)


图片宽度


height


像素(px)百分比(%)


图片高度


alt


替代文字


图片的替代文字

<img src="time1.jpg" width="100" height="100" alt="风景" />

列表

列表分为:<ul><li>无序列表</li></ul>,<ol><li>有序列表</li></ol>和<dl><dd>自定义列表<dd><dl>

<ul>     <li>苹果</li>
     <li>香蕉</li>
     <li>雪梨</li>
 </ul>

有序列表

有序列表使用数字或字母系统来组织列表里包含的信息.有序列表可以使用数字(默认)、大写字母、小写字母、大写罗马数字和小写罗马数字排列项目.

<ol>
      <li>樱桃</li>
      <li>西瓜</li>
      <li>菠萝</li>

</ol>

<dl>

  <dd>英雄联盟</dd>

  <dd>守望先锋</dd>

  <dd>魔兽世界</dd>

</dl>

以上就是关于HTML的一些基础中的基础知识,HTML中还有很多常用的标签,明天我们接着说,再见了.

作者:May-J-Wang

				
时间: 2024-07-30 10:16:59

HTML基础入门的相关文章

Android基础入门教程——10.12 传感器专题(3)——加速度-陀螺仪传感器

Android基础入门教程--10.12 传感器专题(3)--加速度/陀螺仪传感器 标签(空格分隔): Android基础入门教程 本节引言: 本节继续来扣Android中的传感器,本节带来的是加速度传感器(Accelerometer sensor)以及 陀螺仪传感器(Gyroscope sensor),和上一节的方向传感器一样有着x,y,z 三个轴, 还是要说一点:x,y轴的坐标要和绘图那里的x,y轴区分开来!传感器的是以左下角 为原点的!x向右,y向上!好的,带着我们的套路来学本节的传感器吧

Android基础入门教程——8.1.3 Android中的13种Drawable小结 Part 3

Android基础入门教程--8.1.3 Android中的13种Drawable小结 Part 3 标签(空格分隔): Android基础入门教程 本节引言: 本节我们来把剩下的四种Drawable也学完,他们分别是: LayerDrawable,TransitionDrawable,LevelListDrawable和StateListDrawable, 依旧贴下13种Drawable的导图: 1.LayerDrawable 层图形对象,包含一个Drawable数组,然后按照数组对应的顺序来

Android基础入门教程——8.1.2 Android中的13种Drawable小结 Part 2

Android基础入门教程--8.1.2 Android中的13种Drawable小结 Part 2 标签(空格分隔): Android基础入门教程 本节引言: 本节我们继续来学习Android中的Drawable资源,上一节我们学习了: ColorDrawable:NinePatchDrawable: ShapeDrawable:GradientDrawable!这四个Drawable~ 而本节我们继续来学习接下来的五个Drawable,他们分别是: BitmapDrawable:Insert

Android基础入门教程——2.3.12 Date &amp; Time组件(下)

Android基础入门教程--2.3.12 Date & Time组件(下) 标签(空格分隔): Android基础入门教程 本节引言: 本节我们来继续学习Android系统给我们提供的几个原生的Date & Time组件,他们分别是: DatePicker(日期选择器),TimePicker(时间选择器),CalendarView(日期视图),好吧, 其实一开始让我扣这几个玩意我是拒绝的,因为在我的印象里,他们是这样的: 简直把我丑哭了,有木有,终于知道为什么那么多人喜欢自定义这种类型的

Android基础入门教程——2.1 View与ViewGroup的概念

Android基础入门教程--2.1 View与ViewGroup的概念 标签(空格分隔): Android基础入门教程 本节引言: 告别了第一章,迎来第二章--Android中的UI(User Interface)组件的详解, 而本节我们要学习的是所有控件的父类View和ViewGroup类!突发奇想,直接翻译官方文档对 这两个东西的介绍吧,对了,天朝原因,google上不去,Android developer上不去,我们可以 改hosts或者用vpn代理,当然也可以像笔者一样使用国内的API

DAX基础入门 – 30分钟从SQL到DAX — PowerBI 利器

看到漂漂亮亮的PowerBI报表,手痒痒怎么办?! 有没有面对着稀奇古怪的DAX而感到有点丈八金刚摸不着头脑或者干瞪眼?! 有没有想得到某个值想不出来DAX怎么写而直跳脚!? 看完这篇文章,你会恍然大悟,捂脸偷笑.呼呼呼~ 前言: 这篇文章对于具有一点SQL查询基础人会十分容易理解,譬如:掌握SELECT,SUM,GROUP BY等. 注:此文不涉及到Filter Context(筛选上下文)的介绍. 正文: 对于对SQL有一定了解的人来说,咋看DAX,怎么都不习惯. 但是,如果理解以下几个后,

Linux 基础入门----推荐课程

Linux 基础入门课程:https://www.shiyanlou.com/courses/1 很好的一门Linux基础课,精炼.简洁!推荐! 课程内容: 第1节 Linux 系统简介 https://www.shiyanlou.com/courses/1/labs/1/document 第2节 基本概念及操作 https://www.shiyanlou.com/courses/1/labs/2/document 第3节 用户及文件权限管理 https://www.shiyanlou.com/

从零基础入门JavaScript(1)

从零基础入门JavaScript(1) 1.1  Javascript的简史 1995年的时候   由网景公司开发的,当时的名字叫livescript    为了推广自己的livescript,搭了java顺风车,改名为javascript 与此同时,     微软因此在自身的浏览器里,也推出了自己的脚本语言 jscript 1997年时候,  由ECMA(欧洲计算机制造商协会)出面,推出了一套javascript的规范,Ecmascript ,规范提出js由三部分组成 JS的组成: ECMAS

saltstack之基础入门系列文章简介

使用saltstack已有一段时间,最近由于各种原因,特来整理了saltstack基础入门系列文章,已备后续不断查阅(俗话说好记性不如烂笔头),也算是使用此工具的一个总结.saltstack的前六篇文章主要讲述了saltstack的安装.远程执行.配置管理.数据系统以及jinjia模板等知识点,从第七篇往后的文章是一些使用saltstack的案例,包括系统初始化,rpm包以及源码安装等. 博客中saltstack系列的文章,适合初学者从零开始学习直到逐渐熟练使用.文章具有一定的连贯性,如果没有任

2015年最新Android基础入门教程目录(完结版)

2015年最新Android基础入门教程目录(完结版) 标签(空格分隔): Android基础入门教程 前言: 关于<2015年最新Android基础入门教程目录>终于在今天落下了帷幕,全套教程 共148节已编写完毕,附上目录,关于教程的由来,笔者的情况和自学心得,资源分享 以及一些疑问等可戳:<2015最新Android基础入门教程>完结散花~ 下面是本系列教程的完整目录: 第一章:环境搭建与开发相关(已完结 10/10) Android基础入门教程--1.1 背景相关与系统架构