Web前端开发（一）——HTML基础

最新推荐文章于 2024-11-09 20:59:41 发布

原创最新推荐文章于 2024-11-09 20:59:41 发布 · 341 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #web

Web 专栏收录该内容

2 篇文章

订阅专栏

本文全面介绍了HTML的基础知识，包括HTML的定义、语法结构、常用标签及其属性，如字体、标题、列表、图片、超链接、表格、表单等，深入浅出地讲解了HTML在网页设计中的应用。

HTML

1.什么是HTML？

HTML(Hyper Text Markup Language 超文本标记(标签)语言)
本质是文本

2.HTML语法组成结构

第一步：HTML声明
第二步：HTML组成内容

<!DOCTYPE HTML>
<HTML>

	<HEAD>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
		<title>这是第一个页面</title>
		头标签：存储需要加载资源，比如配置文件等等
	</HEAD>
	<BODY>
				体标签：存储页面组成内容
	<BODY>
</HTML>

注意：
1.标签是由起始标签和结束标签来组成—< html>< /html>
2.如果标签里没有内容可以使用自闭标签来表示—< br/>
3.不区分大小写
4.当页面中出现多个空格、制表符空格以及换行在页面展示中都是一个空格
5.转义字符

空格	&nbsp
"	&quot ;
’	&apos ;
&	&amp ;
<	&lt ;
>	&gt ;

6.标签身上可以通过属性名="属性值"这种形式来给标签设置属性，在页面当中可以展示标签特点
属性值的双引号和单引号都可以设置属性

3.HTML常用标签

1) 字体标签

< font>< /font>
属性
Color：字体颜色
Size：字体大小

<!--给定颜色属性的属性值（三种方式：1.颜色名称、2.十六进制值、3.三原色值）-->
		<font color="red" size=5>我是一个字体标签</font>

2）标题标签

< h1>< /h1> ~ < h6>< /h6>
属性：
align:对齐方式
left：左对齐
right：右对齐
center：居中
justify：自适应

		<h1 align="left">一级标题</h1>
		<h2 align="right">二级标题</h2>
		<h3 align="center">三级标题</h3>
		<h4 align="justify">四级标题</h4>
		<h5>五级标题</h5>
		<h6>六级标题</h6>

在这里插入图片描述

3）列表标签

< ul>定义一个列表，< li>定义列表的每一项

无序列表：

< ul>
   < li>< /li>
   ~
   < li>< /li>
< /ul>

属性：
type：定义图标形式（disc:实心圆、square:实心正方形、circle:空心圆）

<ul type="square">   
			<li>第一个</li>
			<li>第二个</li>
			<li>第三个</li>
			<li>第四个</li>
</ul>

在这里插入图片描述
有序列表：

<ol>
	<li></li>
</ol>

4）图片标签

<　img src="" alt="" />
属性
src：图片的路径
绝对路径：以盘符开始的路径
相对路径：以当前文件所在目录为起点的路径，…/表示上级目录，./表示当前目录
alt：图片无法显示时的代替文本
width：图片的宽度
height：图片的高度（加px表示图片大小，加%表示屏占比）

<img src="image/1.jpg" alt="这是一个帅哥" width="200px" height="200px"/>

5）超链接标签

<　a>

跳转到其他页面
属性
href：跳转目标地址
target：打开目标页面的方式（_self:在当前页面打开、_target:在新页面打开
在当前页面跳转
第一步设置隐藏的书签<　a name=“tag”/>，可以在a标签里给定name属性以及id属性
第二步给绑定超链接来跳转到设置书签<　a href="#tag">返回顶部<　/a>

注意：当href属性给定的属性值是# 后面跟上属性值就是在当前页面进行跳转

6）表格标签<　table>

<　table>:定义一个表格
<　tr>:表格中的行标签
<　td>:行中单元格标签
<　th>:行中的标题单元格

table的重要属性：

	border 边框宽度
	cellspacing 单元格之间的空白距离
	cellpadding 边框与单元格内容之间的距离
	bgcolor 背景颜色
	bordercolor 边框颜色
	width 宽度
	align 对齐方式
○ table的重要属性:
	align 对齐方式
	bgcolor 背景颜色
○ tr重要属性:
	align 对齐方式
	bgcolor 背景颜色
	width 宽度
	height 高度
	colspan 可横跨的列数
	rowspan 可竖跨的行数
○ th/td重要属性:
	<caption> 定义表格的标题

7）表单标签

提交数据到服务器的方式有两种
a.超链接形式：在地址栏中来拼接参数值发送给服务器。缺点：如果要发送的数据复杂且量多，那么在拼接的时候会导致拼接效率降低，以及和服务器进行交互的效率也会降低。
b.form表单形式：把要发送给服务器的参数值放到表单里通过表单进行集中的拼接，发送给服务器，效率比较高。

<　form><　/form>只是单独使用form表单标签没有效果需要使用input子标签来输入参数值
<　form action=“指定数据发送的地址” method=“提交方式”>
提交方式一共有七种，常用的有get和post（默认提交方式是get）

GET提交和POST提交的区别：

主要区别体现在数据传输方式的不相同

  GET提交: 
  	在地址栏拼接参数值
  	不安全
  	地址栏拼接参数值大小一般不要大于1KB
  POST提交: 
  	在底层提交数据
  	相对安全
  	底层根据流来传输数据，不限制传输大小

表单中的项
表单中可以有多个输入项，输入项必须有name属性才可以被提交，如果输入项没有name属性，则表单在提交时会忽略它

<　input> 输入框
重要属性:
type属性

	文本框text：输入的文本信息直接显示在框中
	密码框password：输入的文本以圆点或者星号的形式显示
	单选框 radio：进行单项的选择 如性别选择 多个radio的name属性相同会被当作一组来使用必须用value为选项指定提交的值
	复选框checkbox：进行多项选择，爱好的选择。 多个checkbox具有相同的name属性时会被当作一组来使用 必须用value为选项指定提交的值
	隐藏字段hidden：如果有一些信息，不希望用户看见，又希望表单能够提交，就可以用隐藏字段隐含在表单中
	提交按钮submit：实现表单提交操作的按钮 可以通过value属性指定按钮显示的文字
	重置按钮reset：重置表单到初始状态
	按钮button：普通按钮, 没有任何功能 需要配合JavaScript为按钮指定具体的行为。可以用value属性指定按钮显示的文字。
	文件上传项file：提供选择文件进行上传的功能。
	图像image：利用一张图片替代提交按钮的功能, 不常用

name属性：有name属性的input框才能被提交到服务器
value属性：可以给input输入框设置一个初始值
＜ｔｅｘｔａｒｅａ＞文本域
ｒｏｗｓ：指定文本域的行数（高度）
ｃｏｌｓ：指定文本域的列数（宽度）
readonly属性:只读
disabled属性：不可用

8）下拉框

在页面展示一个可以有多个选项来进行选择
属性
select：提供下拉选择功能
option：下拉选框中的选项可以用value属性指定提交的值,如果不指定,将会提交标签内的文本
name: 下拉列表的名称
disabled 禁用下拉选框
size: 设置下拉选项中可见选项的个数
multiple 是否支持多选