HTML入门

最新推荐文章于 2025-05-11 13:05:57 发布

broken snow

最新推荐文章于 2025-05-11 13:05:57 发布

阅读量111

点赞数

文章标签： html5

本文链接：https://blog.youkuaiyun.com/qq_29310159/article/details/108697377

版权

文章目录

前言
一、HTML是什么？
二、HTML语言规范
三、总结

前言

随着互联网行业的快速发展，浏览器内核愈发的快速及稳定。而web前端依托浏览器，并作为用户与互联网交互的第一通道，实实成为了最基本也非常重要的互联网产品。而HTML语言作为web前端最常用最具代表性的编程语言，收到了广大web前端开发人员的喜爱。

提示：以下是本篇文章正文内容，下面案例可供参考

一、HTML是什么？

示例：在web前端开发中经常用html，css，JavaScript完成UI设计者做出的网页界面。而HTML作为一门标签类编程语言，主要完成页面的内容。

二、HTML语言规范

1.html语言的基本结构

<html>
	<head>
		<title>我的第一个HTML页面</title>
    </head>
		<body>
		</body>
</html>

html语言中对标签所占比重非常大，闭合方式为<标签名></标签名>，在上面title标签中写下标题，将此文件用浏览器打开，就生成了最基本的web前端界面如下

2.html常用标签介绍

1.行内元素：默认按行显示，没有宽高，也不可以设置宽高，实际宽高由内容决定

	a标签
		超链接：<a href="目标资源地址" target="方式">提示内容</a>
			url =>uniform resource locator
			url指向网址，图片地址，表格地址等
			target =>
			_self覆盖当前窗口
			_blank开启新窗口
			_parent覆盖父窗口
			框架的名称
		锚链接： <a href="[page]#anchorName">提示内容</a>
				 <a name="anchorName">[提示内容]</a>
	span：<span>内容</span>
	label
	br:<br/> 换行
	em：<em>内容</em>斜体标签

用行内元素做一个超链接，锚链接以及基本的文本显示如下：

<html>
	<head>
		<title>我的第一个HTML页面</title>
    </head>
		<body>
			<a href="http:www.baidu.comm">百度</a><br/>
			
			<a href="#p1">P1</a>
			<a href="#p2">P2</a>
			<a href="#p3">P3</a>
			<a href="#p4">P4</a>
			<a href="#p5">P5</a>
			<br/>
			
			<a name="#p1">P1</a>
			<a name="#p2">P2</a>
			<a name="#p3">P3</a>
			<a name="#p4">P4</a>
			<a name="#p5">P5</a>
			<br/>
			
			<em>我是黄种人</em><br/>
			
			<strong>我是黄种人</strong>
			
		</body>
		</html>

浏览器编译结果：
在这里插入图片描述

2.行内块元素：默认按行显示，有宽高，也可以设置宽高

	表单：<form> method="GET/POST" action="url"</form>
	表单元素公共属性：
		id：标签识别名称： 唯一  前端
		name：名称  后端
		value:值
	input: <input type="" /> 输入框
		type:
			text:文本框
			password：密码框
			radio：单选框
			checkbox：复选框
			email：邮箱框
			tel：电话框
			number：数字框
			date：日期框
	select： 下拉列表框
		<select>
			<option value="v">提示内容</option>
			...
		</select>
	textarea:多行文本域
	button：按钮
		<button type="类型"disabled>提示内容</button>
			type：
				submit:提交按钮
				reset：重置按钮
				button：普通按钮
				disabled：禁用按钮

用form标签做一个注册表

<title>我的第一个HTML页面</title>
    </head>
		<body>
			
			
			<form action="#" method="GET">
				<span>账号</span>
				<input type="text" id="username" name="username"
				placeholder="请输入账号" value="henry" readonly/>
				<br> 
				
				<span>密码</span>
				<input type="password" id="password" name="password"
				placeholder="请输入密码" />
				<br>
				
				<span>性别</span>
				<input type="radio" id="male" name="gender" 
				value="0" checked/>
				<label for="male">男</label>
				<input type="radio" id="female" name="gender"
				value="1" />
				<label for="female">女</label>
				<br/>
				
				<span>来源</span>
				<input type="checkbox"  id="baidu" name="from" 
				value="1" />
				<label for="baidu">百度</label>
				<input type="checkbox"  id="souhu" name="from" 
				value="2" />
				<label for="souhu">搜狐</label>
				<input type="checkbox"  id="360" name="from"
				value="3" />
				<label for="360">360</label>
				<input type="checkbox"  id="sina" name="from" 
				value="4" />
				<label for="sina">新浪</label>
				<br/>
				
				<span>邮箱</span>
				<input type="emali" id="email" name="email"
				placeholder="请输入邮箱" />
				<br>
				
				<span>电话</span>
				<input type="tel" id="tel" name="tel"
				placeholder="请输入电话" />
				<br>
				
				<span>年龄</span>
				<input type="number" id="age" name="age"
				min=16 max=80 
				value="20"  placeholder="请输入年龄">
				<br>
				
				<span>生日<span>
				<input type="date" id="birth" name="birth"/>
				<br/>
				
				<span>城市</span>
				<select id="city" name="city">
				<option value="0">-请选择-</option>
				<option value="1" selected>-南京-</option>
				<option value="2">-苏州-</option>
				<option value="3">-常州-</option>
				<option value="4">-徐州-</option>
				</select>
				<br/>
				
				<span>协议：</span> 
			<input id="agree" type="checkbox" />
			<label for="agree">同意</label>
			<br/>
			<textarea rows="5" cols="50">点击注册并提交表明您同意我公司
            以下要求同时获得以下权限的授权，请您仔细阅读
			</textarea>
			<br/>
			<button id="submit" type="submit" disabled>注册</button>
			<button type="reset">重置</button>
			<button type="button">取消</button>
				
			</form>
	</body>
</html>

编译结果如下
在这里插入图片描述

3.块元素：默认独占一行，没有宽高，但可以设置宽高

	标题标签：h1-h6
	段落标签：p
	列表标签：
		无序列表： u1>n*li
		有序列表:  ol>n*li
		定义列表： dl>n*(dt+n*dd)
	div（主要用于盒子模型中，配合css设置页面样式 布局 颜色等）
	h5新增块标签：
		header  ：页头
		footer  ：页尾
		nav		：导航
		aside	：侧边栏
		section ：主题块
		article ：独立块

块元素的基本用法示例

<html>
	<head>
	<title>我的第一个html页面</title>
	
	<head>
	<body>
	
		
		<h1>KB10</h1>
		<h2>KB10</h2>
		<h3>KB10</h3>
		<h4>KB10</h4>
		<h5>KB10</h5>
		
		<p >附近的<br/>空间发到</p>
		
		
		<ul >
		<li><a>aa</a></li>
		<li>bb</li>
		<li>cc</li>
		</ul>
		
		<ol >
		<li>aa</li>
		<li>bb</li>
		<li>cc</li>
		</ol>
		
		<dl >
		<dt>刘德华</dt>
		<dd>影视歌三星</dd>
		<dd>少年出道</dd>
		<dt>张学友</dt>
		<dd>歌神</dd>
		<dd>影帝</>
		</dl>
		
	</body>
	</head>
	</html>