火星&辉
火星&辉

前端网页三剑客------HTML基础

前端网页三剑客------HTML基础

一、HTML基础语法

基本语法包含：标签和属性
1. 文件的后缀  .html   .htm
2. 标签由尖括号包围的关键词       
3. 标签分类：① 双边标签： <html></html>     ② 单边标签：  <hr />
4. 标签的嵌套：要正确嵌套
   正确演示： <head><title>我是标题<
   错误演示：</head>
5. 标签不区分大小写（建议小写）,小写会专业一些。
6. 在开始标签中可以定义属性，属性是以键值对的形式，值需要引号 引起来
   

7. 标签名都是预定义好的，可以直接使用但不可以随便定义 ，比如 这个就不属于预先定义好的标签，没有作用
8. 属性：开始标签中定义的键值对成为属性

二、HTML常见标签

一、文本标签

1、标题标签：
 ~~ 
  	数字越大，文字越小
2、段落标签：
   				分段，段落之间有行距
3、文本格式化标签：
	换行：br						没有行距
	分割线：hr						在HTML页面中创建一条水平的分割线【属性：width，size，color】
	加粗：b  或者 strong
	斜体：i
	上标：sup						表示次方等
	下标：sub						表示索引等
	字体格式化：		  设置字体尺寸、字体颜色等；【属性：color，size（1--7，默认是3）】
	居中：
		将文本居中显示

二、多媒体标签

1、图片标签：
	width：宽度
	height：高度
	title：悬浮文字，当鼠标悬浮到图片上时的提示文字
	alt：替代文本，图片未正常加载时替代
	src：图片路径
		相对路径：./ 当前目录  ../ 上一级目录 ../../ 上上一级目录
		绝对路径：
			网络：https://www.baidu.com
			本地:D:\images\火星辉.jpg
			
2、音频标签：
3、视频标签：
	src：文件路径
	controls：控件，比如播放按钮
	loop：循环播放
	muted：静音

三、列表标签

1、有序列表：【type：设置序号样式，默认是数字】
	
    
		
  1. 列表项
    2. 
        
  2. 列表项
    3. 
	

	
2、无序列表：【type：设置无序样式，disc：圆，square：方块，circle：空心圆】
	
    
		
  • 列表项
    • 
        
  • 列表项
    •

四、超链接标签

提供页面跳转的一种方式
	href：目标路径
	target：打开方式【_blank  在新的选项卡中打开，    _self  在本页面打开（默认）】

五、表格标签

 表格:
       table   		  表格
		  caption     表头
          tr          行
              td      数据列
              th      标题列（文字加粗、水平居中）
          thead		  表头
          tbody		  表体
          tfoot		  页脚


属性:
    border       边框 默认是0
    width        宽度
    bgcolor      背景颜色
    align        对齐方式，left、center、right
    cellspacing  单元格之间的缝隙
    cellpadding  单元格和文字之间的缝隙
    colspan：	合并列，值为几，合并几列
    rowspan：	合并行

六、表单标签

表单的主要作用是接收用户的输入，当用户提交表单时，浏览器将用户在表单中输入的数据打包，并发送给服务器，从而实现用户与Web服务器的交互。

	

		用户名
		密码	
			 
	


表单属性：
	action：表单提交的路径
	method：提交方式【get、post】

input属性：
	id：唯一标识
	type：类型
	name：名称
	value：值
	checked：设置单选框/复选框的默认选中状态（全选、反选）
	readonly：设置该标签的参数值只读，用户无法手动更改。但是数据是可以正常提交
	disabled：设置该标签不可用（禁用），参数值无法更改，且参数值也无法提交
	size：组件的长度
	maxlength：设置允许输入的最大的长度
	placeholder：输入框的提示信息

input-type说明：
	text：文本框(默认)，单行的输入字段，用户可在其中输入纯文本。
	password：密码框。  内容为非明文
	radio：单选框。  必须将其设置为同一组(name的名字必须相同)
	checkbox：复选框。  必须将其设置为同一组(name的名字必须相同)
	file：附件框。用于文件上传。
	hidden：隐藏域。数据可以通过表单发送至服务器，但是浏览器不会显示。
	submit：提交按钮
	reset：重置按钮
	image：图形提交按钮
	button：普通按钮
	
select下拉列表：
	name：名称
	option：列表项
	multipe：支持多选
	
textarea文本域：
	cols：列数
	rows：行数

三、标签分类

1、块标签：以区域块方式出现。每个块标签独自占一整行或者多行，且可设置宽高。
	如：
 、 、