前端基础篇(14)——HTML超文本标记语言全记录

一、HTML超文本标记语言

1.HTML概述:

HTML 是英文Hyperrtext Matkup Language超文本标记语言的缩写。
HTML是世界上最简单的编程语言,没有比他更简单的语言了,因为它没有逻辑、没有运算、没有数学,说白了HTML就是用代码放置一个个网页的部件。

2、网页的创建:

任何的文本编辑器都能编写HTML代码。
我们一般使用IDE(intergrate development environment,集成开发环境)来开发HTML代码。IDE能够将代码用彩色的形式表达,并且还有很多的快捷键和插件。
常见的IDE有Visual Studio Code、Sublime、WebStorm、Atom、HBuilder等。
在Visual Studio Code编辑网页的同时,我们要打开一个浏览器,实时查看网页
代码要先保存再运行Ctrl+s保存当前,Ctril+Shift+s保存全部,否则内容无法在浏览器中显示

3.HTML语法和基本骨架:

(1)创建骨架:输入html:5按tab建,即可创建出一个HTML5网页骨架
在这里插入图片描述

对于初学者,不要在骨架上浪费太多的精力,要把精力放在body里面,这里面就是网页的正式内容。

(2)<></>叫标签,HTML就是用一个个标签搭建的语言,通过标签来对内容进行描述,标签通常由开始标签和结束标签组成,标签不区分大小写,官方建议使用小写。
a.< head>< /head>标签中是网页的配置信息。
b.< body>< /body>标签中是网页的正式内容。

二、HTML中的常用标签

1.h系列标签:

	<h1>我是一级标题</h1>
	<h2>我是二级标题</h2>
	<h3>我是三级标题</h3>
	<h4>我是四级标题</h4>
	<h5>我是五级标题</h5>
	<h6>我是六级标题</h6>

2.p(paragraph)标签

p标签是段落的意思,一段话要放在一个p标签里面。
< b>< /b>:加粗
< i>< /i>:斜体
< strong>< /strong>:加粗
< em>< /em>:斜体

3.img标签

首先要准备一张图片,这张图片要复制到你的项目文件夹中,就是说,网页和图片必须在一起。
img标签有两个属性,分别是src和alt
(1)< img src=“src”/>,src是英文source资源的意思,这里要写图片的相对路径。
./:代表的是当前路径
…/:代表的是上一级路径
…/…/:代表的是上上一级路径
(2)< img alt=""/>,alternative是备用方案的意思,当图片因为任何情况无法显示的时候,将alt中的替换文本显示.
(3)常用属性:width:指定图片宽度;heigth:指定图片高度。、

4.列表标签(无序列表和有序列表)

		<!--无序列表
        	ul
        		li 列表项
        		type属性:默认是小黑点,小圆圈,小方块
        -->
        <ul type="square">
        	<li>百度一下</li>
        	<li>淘宝</li>
        	<li>微博</li>
        </ul>
        <hr />
        <!--有序列表
        	ol
        		li 列表项
        		type属性:指定序号类型
        		start:从几开始,必须写数字。
        -->
        <ol type="square">
        	<li>百度一下</li>
        	<li>淘宝</li>
        	<li>微博</li>
        </ol>

5.超链接标签< a href="">< /a>

常用属性:
href:指定要跳转去的连接地址,需要加上http协议,如果访问的是本网站的html文件,可以直接写文件路径。
target:以什么方式打开,_self:默认打开方式在当前窗口打开,_blank:新起一个标签页打开页面。

 <li><a href="https://www.baidu.com/">百度一下</a></li>
 <li><a href="https://www.taobao.com/" target="_blank">淘宝</a></li>

6.表格标签table

1.常用属性:
border:指定边框
width:宽度
heigth:高度
bgcolor:背景色
align:对齐方式
tr:行标签
td:列标签

        <table border="1px" width="400px"  bgcolor="coral" align="center">
        	<tr bgcolor="aqua" align="center"><th align="center">Header</th></tr>
        	<tr bgcolor="crimson" align="center">
        		<td>1</td>
        		<td>1</td>
        		<td>1</td>
        		<td>1</td>
        	</tr>
        	
        	 	<tr bgcolor="crimson" align="center">
        		<td>1</td>
        		<td>1</td>
        		<td>1</td>
        		<td>1</td>
        	</tr>
        	 	<tr bgcolor="crimson" align="center">
        		<td>1</td>
        		<td>1</td>
        		<td>1</td>
        		<td>1</td>
        	</tr>
        </table>

2.表格合并:
colspan:跨列
rowspan:跨行

6.表单标签form

(1)form标签的常用属性
action:指定提交的地址
method:
   get方式:默认方式,会将参数拼接在链接后面,有大小限制,4k
   post方式:会将参数封装在请求体中,没有大小限制。
(2)表单输入项input标签的常用属性:
a.type:指定输入项的类型
   text:文本框
   password:密码框
   radio:单选按钮
   checkbok:复选按钮
   file:上传文件
   submit:提交按钮
   button:普通按钮
   reset:重置按钮
   hidden:隐藏域
   date:日期类型
   tel:手机号
   number:只允许输入数字
   placeholder:默认的提示信息
b.name:在表单提交的时候,当作参数的名称。
c.id:给输入项取一个名字,以便后期我们去找到他,并且操作它。
(3)textarea标签:文本域,可以输入一段文字。
cols:指定宽度
rows:指定高度
(4)select标签:下拉列表
oution标签:选择项

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="" method="post">
		<!--输入文本框-->
		用户名:<input type="text" placeholder="请输入用户名"/><br />
		密码:<input type="password" /><br />
		确认密码:<input type="password" /><br />
		邮箱:<input type="text" /><br />
		手机号:<input type="text" /><br />
		靓照:	<input type="file" /><br />
		性别:	<input type="radio"  name="sex"/><input type="radio"  name="sex"/><br />
		爱好:	<input type="checkbox" />打篮球
				<input type="checkbox" />打羽毛球
				<input type="checkbox" />画画<br />
		籍贯:<select>
			<option>--请选择--</option>
			<option>--长沙--</option>
			<option>--北京--</option>
		</select>
		<br />
		
		<input type="submit" value="注册" />
		<input type="button" value="普通按钮" />
		<input type="reset" value="重置按钮" />
		</form>
	</body>
</html>

7.块容器标签div和span:

在版面设计时,有时需要将页面分成几块,这些块就像一个个容器,把相关主题的内容、图像、动画、文字组装到一起,以使内容主题更凸显。

div标签:默认占一行,自动换行。
span标签:内容显示在同一行。

©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页