前端之Html5-CSDN博客

本文链接：https://blog.csdn.net/qq761358496/article/details/127737863

前端之Html5

概念

简介:
	全称:
	超文本标记语言
	超文本:以文本形式展示非文本内容
	标记:标签

架构

C/S:
	C:client:客户端
	S:Serivice:服务器
B/S:
	B:浏览器(html,css,javaScript)
	S:服务器

Web

html:网页基本内容
css:美化
js:处理动态内容

前端开发工具

Hbuilder
VSCode

基本格式

	(开始标签)
		<标签名 属性1= "值1"  属性2="值2">
			内容
		</标签名>
	(结束标签)

	可以嵌套其他标签
<标签名 属性="值"/>

注释

<!--注释区-->

基本结构

<!--
	<!DOCTYPE html>
	表示当前文档类型为html
-->
<!DOCTYPE html>
<!--描述：html的注释;-->
<!--
	<html>:网页根标签
	包含网页中的所有内容
-->
<html>
	<!--
    	<head>头标签中包含
    	css样式
    	js代码
    	网页标题
    	原标签
    -->
	<head>
		<!--原标签:mete-->
        <!--titlie : 网页标题-->
        <!--charset = "utf-8" : 编码格式-->
		<meta charset="utf-8" />
		<title>网页标题</title>
	</head>
	<!--
    	描述：body:体标签
    	主要给用户看
    -->
	<body>
		网页内容;
	</body>
</html>

常用标签

基本标签

文本展示标签:font/span
图片展示标签:img
音频audio
视频video
换行br
水平分割线hr

表单标签

输入input
	type:
		text文本
		password:密码
		radio 单选,包含values,和name,且name的值需要相同
		checkbox:多选,同上
		button 按钮
		submit提交
		file文件上传
	placeholder:提示问字
	name:标签名称
    value:标签的值
选择器select
	multiple:设置可以多选
	size:展示子项数量
	子项:option
		属性:
			selected 默认选中
文本域textarea
	rows:行
	cols:列

form表单

表单form
	属性:
		enctype:上传类型
            application/x-www-from-urlencoded
                不上传文件就使用该类型,该类型为默认执行
            multipart//form-data
                上传文件使用该类型
		method:请求方式 
			get请求:显示请求
				注意:不超过100个字符
				一般,get请求用于下载
			post请求:隐式请求
				上传数据无限制
				post
				用于上传或与密码相关
		action:接受请求的地址

布局标签

标题标签:h1,h2,h3,h4,h5,h6
段落标签:p
列表:ul(无序),ol(有序)
	列表子标签<li>
表格:table
	tr行
	td列 
	th特殊单元格
容器标签
    div:块
    fielset:块,
    	可以在边框上显示文字
		需要用到<legend>属性在边框上写文字

超链接标签

作用1:连接其他网页
	1,外部网页
	2,本地网页
	举例 :<a  herf="www.baidu.com"></a>
作用2:
	在本页面中作为锚点使用
		使用方式
			1,给要跳转的位置标签标记id值
				<h1 id="aa">一级标题</h1>
			2,在a标签中的herf中的路径下写#+要跳转标签的 id值;
				<a herf = "#aa">回到h1标题处</a>

其他

1.所有标签都有id,class属性

一个网页中的id属性值不能重复,
一个网页中的class属性值允许重复

2.所有标签都有onclick(点击)件

意味着所有标签都可以当做按钮使用