html 前端基础知识

最新推荐文章于 2024-03-21 00:10:19 发布

胡尔摩

最新推荐文章于 2024-03-21 00:10:19 发布

阅读量368

点赞数

文章标签：前端 html

本文链接：https://blog.youkuaiyun.com/weixin_46678567/article/details/129130973

版权

html 前端基础知识

一、认识前端开发

1.前端开发应用层面：数据展示、用户交互

2.前端三大核心技术：

1）html -给网页提供内容

2）css -设置网页内容的样式和布局 -->静态网页

3）js -让网页内容变化 —>动态页面

二、常用html标签

<!-- html是用来给网页提供内容（不同的标签提供不同的内容）
 1.标签	-html核心元素
 2.网页基本结果
	一个html文件就是一个网页
	1）DOCTYPE 	-html版本说明
	2）整个网页对应的是html标签，head标签代表网页头部和body标签
	body标签代表网页内容
3.标签的分类
1）单标签	<标签名 属性名1=属性值1....>标签内容</标签名>
2）双标签	<标签名 属性名1=属性值1....>
 
 -->

<html>
	<head>
		<!-- 设置文本编码方式：utf-8 -->
		<meta charset="utf-8">
		<!-- 设置网页标题 -->
		<title>百度一下，你就知道</title>
		
		<!-- 设置网页图标 -->
		<link rel="icon" href="img/百度.png">
	</head>
	<body>
		<!-- 1.标题：h1~h6 -->

		<h1>标题1</h1>
		<h2>二级标题</h2>
		<h3>三级标题</h3>
		
		<!-- 2.段落标签 -->
		<!-- 注意： html代码中的换行和空格无效
			换行标签		-<br>
			空格		-&nbsp一个像素的空格、&emsp空一个空格
		 -->
		<p>我想讲述的，是一个超越时间，跨越国家、文化和种族边界的故事，一个迫使我们思考人类共同命运的故事。”（刘慈欣）2010年，
		学者严锋为<b>《三体3》</b>作序时，曾断言刘慈欣“单枪匹马，
		把中国科幻文学提升到了世界级的水平”。
		其后，《三体》获得雨果奖，被翻译成二十余种语言，在世界各地都拥有狂热的粉丝（其中名气最大的一位是美国前总统奥巴马），
		证明严锋所言非虚。畅销全球的《三体》，成为不折不扣的超级IP。
		最好的科幻作品——小说、影视剧、舞台剧、动画，等等——是一种想象力的实验，不断挑战、打破乃至重塑我们的认知与审美边界。
		科幻作品的重点，并不在于预测未来，而是鼓励我们从未来看当下、从他者看自我，进而改变现在。刘慈欣说过：“未来像盛夏的大雨，
		在我们还不及撑开伞时就扑面而来。”面对未知</p>
		<p><b><i>
			床前明月光，<br>
			疑是地上霜 ，<br>
			举头望明月，<br>
			低头思故乡
		 </i></b>
		</p>
		
		<!-- 3.行内文字标签：span -->
		<span>2023-02-20   09：40</span>
		<span>|</span>
		<span>界面新闻官方账号</span><br><br>
		
		<!-- 4.特殊效果文字标签 b、i
			b：文字加粗
			i：文字倾斜
		-->
		<i>python</i>
		<u>python</u>
		<b>python</b><br><br>
		
		<!-- 5.超链接 a 
			1）href：跳转地址	
			2）标签内容：网页可点击的部分
			3）target属性：打开方式，_self(默认)、_blank(在新窗口打开新的页面)
		-->
		<!-- 文字超链接 -->
		<a href="https://www.taobao.com/" target="_blank">淘宝</a><br>
		<!--图片超链接  -->
		<a href="https://www.baidu.com/"><img src="img/百度.png" alt=""></a>
		<!-- 6.图片标签 img 
			src属性：图片地址（决定网页上显示哪张图）
			title属性：设置图片标题，（图片悬停在图片上时会显示）
		-->
		<br>
		<img src="img/QQ图片20230215114644.jpg" alt="" width="200px" height="300px">
		<br>
		<img src=""alt="">   #src中可以直接放网页图片地址
		
	</body>
</html>

三、input标签

1、text文本框形式：

<input type="text" placeholder="请输入手机号" value="" maxlength="6"

1）type属性值不同，网页显示的input功能也不同

2）text：普通的文本输入框

①placeholder属性：输入中默认显示的输入提示信息

②value属性：输入框输入的内容

③maxlength：最大输入字符的个数

2、password密码框形式

<input type="text" placeholder="请输入手机号" value="" maxlength="6"

1）placeholder属性：输入中默认显示的输入提示信息
2）value属性：输入框输入的内容
3）maxlength：最大输入字符的个数

3、radio单选按钮

<input type="radio" name="gender" id="g1"><label for="g1">男</label>
		<input type="radio" name="gender" checked><span>女</span>
		<input type="radio" name="gender"><span>保密</span>
		
		<br><br>
		<input type="radio" name="m">已婚
		<input type="radio" name="m">未婚

1）name属性：同一组属性的内容 name属性值必须一致
2）label可以与前面按钮进行绑定，不点圈圈也可以选中扩大按钮点击范围
方法让input内的id与label标签的for属性相同
3）checked属性：添加checked的选项默认处于选中状态

4、checkbox 复选按钮

		<input type="checkbox" name="language" id="g2"><label for="g2">python</label>
		<input type="checkbox" name="language" ><label for="">Java</label>
		<input type="checkbox" name="language" ><label for="">C++</label>
		<input type="checkbox" name="language" ><label for="">Go</label>
		<input type="checkbox" name="language"  checked><label for="">MySQL</label>

5、其他情况

	<form>
	<input type="color">    #颜色
		<input type="date">		#日期
		<input type="datetime">		#当天日期
		<input type="file">		#文件
		<br><br>
		<input type="text">
		<input type="reset">		#重置按钮必须与form表单配合使用
	</form>

四、其他常用标签

1、下拉菜单–>下拉列表

<!-- 1.下拉菜单 （下拉列表）
		select、option
		一个option给2个值-->
		<select name="" id="">
			<option value="四川省">四川省</option>
			<option value="河北省">河北省</option>
			<option value="山东省">山东省</option>
			<option value="广东省">广东省</option>
		</select>
		
		<select name="" id="">
			<optgroup label="四川省">
			<option value="">成都市</option>
			<option value="">绵阳市</option>
			<option value="">德阳市</option>
			<option value="">简阳市</option>
			<option value="">眉山市</option>
			<option value="">乐山市</option>
			<option value="">巴中市</option>
			</optgroup>
			
			<optgroup label="广东省">
			<option value="">广州市</option>
			<option value="">东莞市</option>
			<option value="">潮汕市</option>
			<option value="">佛山市</option>
			</optgroup>
			
		</select>

2、有序列表 ol、li —>ol嵌套li标签

       <ol>
			<li>
				<p>1、Python</p>
				<img src="https://ts1.cn.mm.bing.net/th?id=OIP-C.MrPyUiI_i6ud-W4k-bX_dAHaFo&w=286&h=218&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="">
				<p>Python由荷兰数学和计算机科学研究学会的吉多·范罗苏姆于1990年代初设计，作为一门叫做ABC语言的替代品。<br> [1]  Python提供了高效的高级数据结构，还能简单有效地面向对象编程。Python语法和动态类型，以及解释型语言的本质，使它成为多数平台上写脚本和快速开发应用的编程语言，<br> [2]  随着版本的不断更新和语言新功能的添加，逐渐被用于独立的、大型项目的开发。</p>
			</li>
			<li>Java</li>
			<li>C</li>
			<li>C++</li>
			<li>JavaScript</li>
			<li>C#</li>
		</ol>

3、无序列表ul、li

快速创建标签方法：li*数字

<p>千锋成都校区所有授课科目</p>
		<ul>
			<li>Python数据分析</li>
			<li>Java后端开发</li>
			<li>大前端</li>
			<li>UI、UE设计</li>
			<li>物联网</li>
		</ul>

#好用干货
https://www.winrobot360.com/  （影刀 - 自动化办公）

https://www.houyicaiji.com/  (后羿采集器)

https://www.bazhuayu.com/  （八爪鱼采集器）