HTML基础语法

HTML基础语法

1、全局架构标签

每一个html页面必须包含以下一段内容,可以称为全局架构标签

<!DOCTYPE html>	<!-- 声明这个html页面使用的版本,这样写代表是H5最新版本 -->
<html>
  <head>
  <meta charset="utf-8">  <!-- 告诉浏览器使用的是utf-8字符集 -->
      <title>我的网站</title>	<!-- 这里用来编写网站的标题,显示在浏览器选项卡的位置 -->
  </head>
  <body>	<!-- 只有body标签里面的内容,才能真正显示在浏览器的窗口中 -->
    <h1>我的第一个标签</h1>
    
    <p>我的第一个段落</p>
  </body>
</html>

html标签和元素的说法

标签:html、head、meta、title、body、h1、p等等我们都称为html的标签,简称标签即可。

元素:一对标签所表示的东西,我们称为元素。

练习:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf8" />		<!-- 这里是注释:meta为半闭合标签,并使用utf8字符集 -->
        <title>这是我的标题:首次学习HTML</title>
    </head>
    <body>
        <h1>
            首次学习PHP,这是HTML基础语法部分!!
        </h1>
    </body>
</html>

2、标题

标题就是我们通常理解的文档里面的标题,html里面的标题分为:h1、h2、h3、h4、h5、h6

写法:

<h1>最大的标题</h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四</h4>
<h5>标题五</h5>
<h6>标题六</h6>

练习:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf8" />
        <title>标题--HTML基础语法学习</title>
    </head>
    <body>
        <h1>我是一个h1标题</h1>
        <h2>我是一个h2标题</h2>
        <h3>我是一个h3标题</h3>
        <h4>我是一个h4标题</h4>
        <h5>我是一个h5标题</h5>
        <h6>我是一个h6标题</h6>
    </body>
</html>

3、段落

段落表示一段普通的文字,类似文章中的一个段落

写法:

<p>
	近日,西安女车主坐在66万买的奔驰车引擎盖上无奈维权引发各界密切关注。除了车本身的质量问题,该车主还质疑4S店诱其贷款收取的“金融服务费”存在欺诈。贷款买车究竟有哪些渠道?“金融服务费”是不是合理收费?贷款买车会遭遇哪些套路?消费者提前防范别踩坑里?北京青年报记者就这些问题采访了众多专业人士。
	据了解,汽车金融业务包括三种较为常见的模式。第一种为银行车贷,消费者向申请住房按揭一样向银行申请贷款,按照一定利率按月还款;第二种为信用卡分期,指持卡人同意支付首付款的情况下,向银行申请用其信用卡在银行指定的经销商购买家用汽车,经银行核准后,将审批通过金额平均分成若干期,由持卡人在约定期限内按月还款,并支付一定手续费。第三种模式为消费者向汽车金融公司申请贷款。也是西安奔驰维权事件中女车主选择的方式。第四种是近年来新兴的汽车融资租赁,即通过“以租代购、分期付款”的方式购车。
</p>

练习:

<!DOCTYPE html>
<html>
    <meta charset="utf8" />
    <head>
        <title>段落--HTML基础语法</title>
    </head>
    <body>
        <h1>毛主席介绍</h1>
        <p>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;近日,西安女车主坐在66万买的奔驰车引擎盖上无奈维权引发各界密切关注。除了车本身的质量问题,该车主还质疑4S店诱其贷款收取的“金融服务费”存在欺诈。贷款买车究竟有哪些渠道?“金融服务费”是不是合理收费?贷款买车会遭遇哪些套路?消费者提前防范别踩坑里?北京青年报记者就这些问题采访了众多专业人士。 
        </p>
        <p>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;据了解,汽车金融业务包括三种较为常见的模式。第一种为银行车贷,消费者向申请住房按揭一样向银行申请贷款,按照一定利率按月还款;第二种为信用卡分期,指持卡人同意支付首付款的情况下,向银行申请用其信用卡在银行指定的经销商购买家用汽车,经银行核准后,将审批通过金额平均分成若干期,由持卡人在约定期限内按月还款,并支付一定手续费。第三种模式为消费者向汽车金融公司申请贷款。也是西安奔驰维权事件中女车主选择的方式。第四种是近年来新兴的汽车融资租赁,即通过“以租代购、分期付款”的方式购车。
        </p>
    </body>
</html>

4、文本

HTML文本格式化标签(常用)

标签 描述
定义粗体文本
定义着重文字
定义斜体
定义小号字
定义加重语气
定义下标字
定义上标字
定义插入字
定义删除字

HTML“计算A级输出标签”

标签 描述
定义计算机代码
定义键盘码
定义计算机代码样本
定义变量
定义预格式化文本

HTML引文、引用、及标签定义

标签 描述
定义缩写
定义地址
定义文字方向
定义长的引用
定义短的引用语
定义引用、引证
定义一个定义项目

练习:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf8" />
        <title>文本--HTML基础语法</title>
    </head>
    <body>
        <b>PHP是世界上最美的语言!!!</b> <!-- b标签,用于加粗字体 -->
        <b>PHP</b>是世界上最美的语言!!! <!-- b标签,仅对PHP加粗 -->
        <em>PHP</em>是世界上最美的语言!!!<br>
	    <i>PHP</i>是世界上最美的语言!!!<br>	<!-- i标签,斜体 -->
	    <strong>PHP</strong>是世界上最美的语言!!!<br>	<!-- strong标签,类似加粗 -->
	    <sub>PHP</sub>是世界上最美的语言!!!<br>	<!-- sub标签,下沉 -->
	    <sup>PHP</sup>是世界上最美的语言!!!<br>	<!-- sup标签,上浮 -->
	    <ins>PHP</ins>是世界上最美的语言!!!<br>	<!-- ins标签,下滑线  -->
	    <del>PHP</del>是世界上最美的语言!!!<br>	<!-- del标签,文本划线删除 -->
    </body>
</html>

5、属性

每一个标签都会拥有一堆属性,来描述这个标签的一些功能。

所有标签共有的属性:

class 为html元素定义一个或多个类名(classname)(类名从样式文件引入)
id 定义元素的唯一id
style 规定元素的行内样式
title 描述了元素的额外信息(作为工具条使用)

标签自己的属性,比如下面的a标签和img标签:

<a href="http://www.baidu.com">我是一个超链接,鼠标点击即可跳转到一个网址</a>
<img src="haha.jpg" width="100px" />

写法:

<h1 id="wwely1" class="duoge" style="color: red" title="鼠标放上来可以显示的">标题一</h1>
<p id="wely1" class="duoge" style="color: red" title="鼠标放上来可以显示的">段落一</p>

练习:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf8" />
        <title>属性--HTML基础语法</title>
    </head>
    <body>
        <h1 id="kim" class="K" style="color: red" title="这是鼠标提示">英文名</h1>	<!-- h1添加属性 -->
        <h1 id="kin" class="Ki" style="color: green;font-size: 50px;" >英文名</h1>
        <a href="http://www.baidu.com">这是一个超链接,点我即可跳转</a>
    </body>
</html>

6、链接

链接,是给任何的html元素添加链接,可以被点击,跳转到某个地址。

写法:

<a href="http://www.baidu.com" target="_blank">点击即可跳转百度</a>

用法:

在任何元素上面,想让用户点击,即可跳转到某个页面,就可以使用。

<a href="http://www.youku.com"><h1>跳转优酷视频</h1></a>

练习:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf8" />
        <title>链接--HTML基础语法</title>
    </head>
    <body>
        <a href="http://www.baidu.com" target="_blank">点击我可以打开百度页面</a> <!--target标签表示在新的标签页打开 -->
        <a href="http://www.jd.com" target="_blank"><h1>点击跳转京东<h1></a>
    </body>
</html>

7、图片

在网页中显示一张图片

写法:

<img src="haha.jpg" title="图片的标题" alt="图片的属性" width="100px" height="100px" />

绝对路径和相对路径

  • 绝对路径是指一个完整的可以从开头找到这个图片的路径
  • 相对路径是指相对于当前的页面所在的路径

绝对路径的写法:

<img sr="C:\Users\Administrator\Pictures\timg.jpg" />

相对路径的写法:

<img src="haha.jpg" />   <!--当前目录-->
<img src="./haha.jpg" /> <!-- 当前目录 -->
<img src="../haha.jpg" /> <!-- 上一级目录 -->

练习:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf8" />
        <title>图片--HTML基础语法</title>
    </head>
    <body>
        <a href="http://www.baidu.com"><img src="C:\Users\Administrator\Pictures\timg.jpg"  width="1000px" height="1000px" title="这是gitlab的Logo" alt="gitlab"/></a>
    </body>
</html>

8、列表

无序列表(常用)

<ul>
    <li>第一个列表内容</li>
    <li>第二个列表内容</li>
</ul>

有序列表(用的少)

<ol>
    <li>第一个列表内容</li>
    <li>第二个列表内容</li>
</ol>

自定义列表(不怎么用)

<dl>
    <dt>编程语言</dt>
    <dd>- PHP</dd>
    <dd>- Java</dd>
    <dd>- C++</dd>
    <dt>操作系统</dt>
    <dd>- Linux</dd>
    <dd>- windows</dd>
</dl>

练习:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf8" />
        <title>列表--HTML基础语法</title>
    </head>
    <body>
        <ul>	<!-- 无序列表 -->
            <li>Linux跟我学</li>
            <li>老男孩教育</li>
            <li>千峰教育</li>
        </ul>
        <ol>  <!-- 有序列表 -->
		   <li>Linux跟我学</li>
            <li>老男孩教育</li>
            <li>千峰教育</li>
		</ol>
         <dl>	<!-- 自定义列表 -->
			<dt>操作系统</dt>
			<dd>- Linux</dd>
			<dd>- Windows</dd>
		 </dl>
    </body>
</html>

9、表格

写法:

<table border="1" cellspacing="0" cellpadding="0">
    <tr>
        <th>头部一</th>
        <th>头部二</th>
    </tr>
    <tr>
        <td>第一行,第一列</td>
        <td>第一行,第二列</td>
    </tr>
    <tr>
        <td>第二行,第一列</td>
        <td>第二行,第二列</td>
    </tr>
</table>

用法:

  • 需要以表格显示的内容
  • 可以用来布局页面(现在不用了,用div来进行布局)

练习:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf8" />
        <title>表格--HTML基础语法</title>
    </head>
    <body>
        <table border="1" cellspacing="0" cellpadding="0">
            <tr><th>标题</th><th>标题</th></tr>
            <tr><td>第一行,第一列</td><td>第一行,第二列</td></tr>
            <tr><td>第二行,第一列</td><td>第二行,第二列</td></tr>
        </table>
    </body>
</html>

10、区块

  • 块级元素:div是指一块内容的标签,div不显示任何东西,用来包含其他标签,称之为一块内容,需要配合CSS样式来进行页面布局。 h1、p、ul、table都是块级元素,会以新行来开始。
  • 内联元素:span标签用来包裹文字。b、id、a、img通常不会以新行开始。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf8" />
        <title>区块--HTML基础语法</title>
    </head>
    <body>
        <div>这是一个div</div>
        <div>
            这是第二个div
            <a>66666</a>   <!-- 这里a标签不是块级元素,不会在新行开始-->
        </div>
        <p>	<!-- p标签为块级元素,会在新行开始-->
            这是一个段落
        </p>
        <p>
            这是第二个段落
        </p>
        <span>内联元素</span>
        <span>内联元素222</span>
    </body>
</html>

11、布局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf8"/>
        <title> 布局--HTML基础语法</title>
    </head>
	<body>
        
	</body>
</html>

12、表单

表单是用来在网页上显示给用户输入的标签,然后提交给后台服务器进行处理。

定义:

<form action="xxx.php" method="post">
    
</form>

表单元素:

多数情况下被用到的表单标签是输入标签(<input>),输入类型是由类型属性(type)进行定义的,常用的输入类型如下:

  • 文本
<form >
    <input type="text" name="username" value="Kim" />
</form>
  • 密码
<form>
	Password: <input type="password" name="pwd">
</form>
  • 单选按钮(Radio Buttons)
<form>
	<input type="radio" name="sex" value="male">Male<br>
	<input type="radio" name="sex" value="female">Female
</form>
  • 多选按钮(Checkboxes)
<form>
	<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
	<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>
  • 提交按钮(Submit Button)
<form name="input" action="html_form_action.php" method="get">
	Username: <input type="text" name="user">
	<input type="submit" value="Submit">
</form>

练习:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf8" />
        <title>表单--HTML语法基础</title>
        <form action="xxx.php" method="post" id="11" name="login">
			<label>用户名:<label><input type="text" value="kim" name="username" /><br>
			<label>密码:</label><input type="password" name="password" placeholder="请输入密码" /><br>
			
			<label>备注:</label>
			<textarea name="intro" placeholder="输入简介"> </textarea><br />
			
			<input type="radio" name="sex" value="1">男
			<input type="radio" name="sex" value="0">女<br />
			<h1>选择题</h1>
			<p>1、下面哪个城市是孙中山的故乡</p>
			<input type="checkbox" name="area" value="city">天津<br />
			<input type="checkbox" name="area" value="city">上海<br />
			<input type="checkbox" name="area" value="city">中山<br />
			
			<input type="submit" value="提交">
</html>

13、框架

框架(iframe)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf8" />
        <title>框架--HTML基础语法</title>
    </head>
    <body>
        <iframe src="http://www.baidu.com" width="500px" height="1000px"></iframe>
    </body>
</html>

14、头部

完整的头部标签:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf8" />
        <base href="http://www.runoob.com/images/" target="_link">  <!-- 页面中 所有的链接的默认地址-->
        <title>头部--HTML基础语法</title>
        <meta name="keywords" content="PHP学习之路">  <!--  这个是做seo优化的时候用的 -->
        <meta name="description" content="改变世界的PHP">    <!--  这个是做seo优化的时候用的 -->
        <meta http-equiv="refresh" content="30">  <!-- 刷新跳转页面 -->
        <link rel="stylesheet" type="text/css" href="mystyle.csss">  <!-- 引入css样式 -->
    </head>
    <body>
        文档内容......
    </body>
</html>
posted @ 2019-04-17 09:14  烟雨浮华  阅读(5578)  评论(0编辑  收藏