web前端三大核心技术:html负责网页端架构,css负责网页的样式,美化,js负责网页的行为
1、HTML简介
html是一种描述网页的语言,超文本标记语言(Hyper Text Markup Language),使用标签来描述网页:超链接+文本+标记+语言
2、HTML常用标签
meta 设置网页的字符集 <meta charset="UTF-8">
titil 设置网页网站的标题
body 设置网页的主体部分
标题
标题分h1~h6共六级,效果依次减小,每个标题都独占一行空间
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
空格和换行
由于键盘点击输入空格和回车,在实际页面运行中不准确,需要使用代码生成
空格
<br />回车 <br> <br/> <br > <br />四种都可以运行
P标签
P标签表示文章段落,结合标题使用
<h3>三级标题</h3>
<p>针对三级标题写一个对应的段落,这个段落是对XX的描述</p>
代码注释
程序员对代码的文字提示,不运行
<!--
作者:offline
时间:2023-11-27
描述:代码注释
ctrl+? 可快速生成注释,二次点击取消注释,可在查看网页源代码中查看注释内容
测试方面:在项目上线之前,要求程序员删除注释,目的为加快程序的加载速度
-->
文字相关标签
文字加粗:b 和strong
文字倾斜:i和 em
文字删除:s和 del
普通文字<br />
<b>加粗文字1</b><br />
<strong>加粗文字2,有加粗和特别强调(语义)的效果</strong><br />
<i>倾斜文字1</i><br />
<em>倾斜文字2,有倾斜和一般强调的效果</em><br />
<strong><i>加粗又倾斜</i></strong><br />
<!-- w3c中明确说明,s标签将要被del标签代替,若出现s标签,建议换成del标签-->
<s>删除效果1</s><br />
<del>删除效果2</del><br />
运行结果如下:
插入图片
- img:插入图片标签
<img src="test.jpg"/>
<!--
图片与当前html文件应在同一目录下
-->
- width、height :设置插入图片的高和宽
<img src="test.jpg"/ width="100" height="100">
<!--
只设置高度或宽度其中一个,图片高宽按照设置比例缩放
-->
- title:为图片添加提示文字,鼠标悬停时显示文字
<img src="test.jpg" title="添加一个标题!!!!!!!"/>
<!--
鼠标悬停至图片上显示文字
-->
- alt:图片未正常加载时,显示alt文字。另:网页阅读器可阅读 alt 的内容,视障用户使用
<img src="test.jpg" alt="图片没有正常加载的时候显示" />
<!--
当图片没有正常加载的时候,显示alt的文字
-->
超链接
- 插入超链接:可打开线上网站和本地文件
a标签表示在当前窗口打开新页面
<a href="https:\\www.baidu.com">点击我可以打开百度</a><br />
<!--
线上网址:点击文字可跳转至百度页面,href对应的属性值应该为完整的url
-->
<a href="test.jpg">打开本地文件</a>
<!--
本地文件:打开本地文件,本地文件需与当前文件放置同一目录下
-->
target=“_blank”:在新窗口打开新页面
<a href="https:\\www.baidu.com" target="_blank">点击我可以跳转新页面打开百度</a><br />
<!--
可另起新窗口打开新页面
-->
“#” 空连接
<a href="#">占位链接</a>
<!--
空连接:暂时不知道跳转至哪里,使用空连接占位,后期添加链接位置
点击空连接可返回页面顶部:但在实际测试过程中,若发现用"#"返回顶部,应提示程序员使用动画效果返回顶部
-->
路径 (只要遇到找资源的都可以用路径来实现)
相对路径:相对于当前的html的位置
同级查找:即当前html文件和目标资源在同一级目录下,语法:直接写资源名字即可 src = "资源名称"
上级查找:即当前html文件和目标资源的文件夹在同一级目录下时,语法:目标文件的文件夹/资源名 src = "目标文件的上级文件夹名/资源名称
下级查找:即当前html文件的上级文件夹和目标资源在同一目录下;语法:../资源名称 src = "../资源名称 ",上一级 ../,上二级:../../,上三级依次递增
绝对路径:资源在电脑中的具体位置+资源名称
列表:有序和无序列表
<!--无序列表-->
<ul>
<li>第一行无序列表</li>
<li>第二行无序列表</li>
</ul>
<!--有序列表-->
<ol>
<li>第一行有序列表</li>
<li>第二行有序列表</li>
</ol>
布局标签:div、span
<!--布局标签:主要用来布局,无任何语义,可以用div或者span来进行内容包裹,后期方便添加样式-->
<div></div>
<!--div特点:独占一行的空间-->
<span>23</span>
<!-- span特点:所以span标签共用一行,一行可以放置多个span标签-->
音视频标签
<audio src="音频资源" controls="controls"></audio>
<vedio src="视频资源" controls="controls"></vedio>
<!--音频视频 均需要添加controls="controls"方可正常播放
由于音视频兼容性原因,可能有些浏览器无法播放
所以在测试时,需要在三大浏览器均测试是否正常播放
-->
3、表单标签
form 表单标签
<form action="" method="post">
<!--form表单,将表单包裹起来
action 将表单传给 XXX来处理
method 传递数据的方法,post隐式传递,get明文传输数据
-->
用户名:<input type="text" />
<!--input + tab 键生成-->
</form>
input 标签的 type类型:
type="text" 文本类型
type="password" 密码框类型
input 标签的type = "radio"单选:
<!--单选框,name相同时,才一组内容,一组内容单选一个
checked="checked" 表示默认选中状态
-->
性别: <input type="radio" name = "sex" checked="checked"/>男
<input type="radio" name = "sex"/>女
以上单选仅可点击单选框进行选择,而不能点击男/女的汉字进行单选
下方文字可实现点击文字也可进行单选:
<!--
添加label标签,将for的值添加至input 的id属性中即可实现点击汉字也能单选
测试细节:点击查看是否为单选效果,刷新的时候查看是否有默认选中状态,点击文字是否可以进行切换
-->
性别: <input type="radio" name = "sex" checked="checked" id="nan"/>
<label for="nan">男</label>
<input type="radio" name = "sex"/>女
input 标签的type = “checkbox”
爱好: <input type="checkbox" name="hobby"/>看书
<input type="checkbox" name="hobby"/>画画
<input type="checkbox" name="hobby"/>弹琴
下拉菜单:select
下拉菜单:
<!--
每个option就是一个下拉选项
测试细节:1、选项的顺序 2、默认选中项 3、下拉枚举值
selected="selected"即为默认选中状态
-->
<select name="xiala">
<option value="one">下拉一</option>
<option value="two" selected="selected">下拉二</option>
<option value="three">下拉三</option>
</select>
文本区域:textarea
<!--
rows 表示可以写的行数
cols 表示可以写的列数
resize 表示改变大小
placeholder 为添加文本框默认值
autofocus="autofocus" 光标自动移至当前文本框
-->
文本域:<textarea name="" rows="3" cols="3" placeholder="需要添加的默认值" autofocus="autofocus"></textarea> <br />
<style type="text/css">
textarea{resize: none ;}
</style>
按钮:button、reset、submit
<!--
value 属性可将值添加到button按钮的上方,button是普通按钮,需配合js使用
重置按钮reset上添加有重置二个字,添加value之后覆盖"重置"二字,重置按钮的效果是恢复默认状态而不是清空数据
提交按钮上自动添加"提交"二字,可重新覆盖value值,点击后可将表单提交
-->
普通按钮:<input type="button" value="确认"/>
重置按钮:<input type="reset" value="覆盖"/>
提交按钮:<input type="submit" />