/*注释 ctrl+?
HTML:负责网页的架构
CSS:负责网页的样式、美化
JS:负责网页的行为(相当于按钮,交互行为)
1.HTML(网页)
Hyper Text Markup Language 超文本标记语言,并非编程语言,标记语言是一套标记标签(markup tag),使用标签来描述网页。
1.骨架标签
<!DOCTYPE html> #文档类型html类型#
meta标签可以设置网页字符集(utf-8国际编码)
title标签设置网页的标题
body标签设置网页的主体内容部分
ctrl+s 保存
2.文章标题(Tab生成标签)
HTML标题是通过<h1>—<h6>等标签进行定义。
注意:不能自己创造标签,没有意义
h👉esc👉7👉Tab👉你可以得到<h7>
注意:空格和回车在代码中直接使用不准确,需要使用代码来实现。
👉你可以得到一个空格
br👉Tab👉你可以得到一个回车
<p>👉文章段落,文章描述(虽然加不加P,网页文字生成一样但是注意标签语义化)
tips:语义化:合适地方使用合理标签,叫做满足标签语义化,可以在搜索引擎排名中靠前,点击率更高~
3.代码注释(ctrl+?/)
网页源代码依旧可以看到注释,所以在项目上线之前需要程序员删除注释内容,目的可以加快网页的加载速度。
4.文字标签(外观主要交由css处理)
<b>加粗
<strong>加粗并特别强调
<i>倾斜
<em>倾斜并特别强调
<s>删除线(w3c明确说明,s要被del替代)
<del>删除线
5.图片标签
键值对儿、KV对儿、属性名属性值
img👉TAB👉 <img src="图片" width="宽" heght="高" title="鼠标悬停时提示文字" alt="①图片加未正常加载出,出现文字②阅读器读取此内容,对于视障用户" />
src代表资源,它后面的值写入要加载的图片。
<a_href="超链接">点击这里</a>
target 新窗口打开链接
<a href="#"></a> shift+3 空连接
6.路径(以当前网页为准)
6.1相对路径(相对于当前html文件找其他资源方式)
①同级查找:当前html和目标在同一级目录中查找;语法:直接写资源名字
②上级查找:当前html和目标在上级目录中查找;语法:../资源名字
③下级查找:当前html和目标在下级目录中查找;语法:文件夹名/资源名字
6.2绝对路径(电脑中具体位置)
前端语法中,绝对路径不推荐用
7.列表
·无序列表ul嵌套若干li,每个li就是一个选项
123有序列表ol嵌套若干li,每个li就是一个选项
8.布局标签div或span(没有任何语义的,它的存在时为了css找到它)
div特点:独占一整行空间
span特点:同占一行
9.音频and视频audio video controls(控制)
src=source
注意三大浏览器兼容性
audio src="MP3" controls
video src="MP4" controls
10.表单数据form_submit
form action="XXX.jsp/XXX.php表单数据提交给某一个后台程序,存在于数据库中" method传送数据方法="post"
post代表隐式传输数据,get代表明文传送数据。
input 输入框
注意:中文冒号,防止代码错误
placeholder:文本框底层的字
type-text:普通输入框
type-password:密码框
type-radio:单选
<input type="radio" name(xb组只能选择其中一个)="xb" checked(默认选中)="checked" id="nan"/>
<label for="nan">男</label> (点击文字也可以选中)
<input type="radio" name="xb"/>女
type-checkbox:多选
type-button:普通按钮,添加value属性赋值名字XX,需要js配合来实现其他效果
type-reset:重置按钮
type-submit:提交按钮
select 下拉菜单
每个option是一个下拉菜单选项
<option value="" selected默认选中="selected">北京</option>
textarea文本域
<textarea name="" id="" cols列="30" rows行="10"></textarea>
禁止改变文本域大小: <style type="text/css">
textarea:{resize: none;};
2.CSS级联样式表/层叠样式表/样式表
css写在title后面,style标签里面
CSS由两部分组成:选择器+一条或多条声名
1.标签选择器:用来指定改变样式的HTML元素
声明由属性和值组成
属性和值被冒号分开,CSS声明用分号结束,声明整体需要用大括号括起来
F12调试工具/右键检查,Elements元素中调试
color 颜色
font-size 字号 px像素单位(css中90%以上必须加单位)
2.id选择器
id前加#
<li id="li2">爱好:撸猫</li>
#li2{属性:值;}
3.命名规则
①数字不可以开头
②不能使用中划线/下划线之外的符号
③不推荐中文,中文只能在中文浏览器识别
④id命名不可重复,css正常但是js会因为id冲突报错
⑤每个标签只可以有一组id
4.class类选择器
类名前加.
.li2{color:颜色;}
<li class="li2 li3">,class命名可重复,可多个class类名
5.书写位置引入方式
①内嵌式:css写在style标签中,放在title标签的后面,因为html代码和css代码混在同一个文件中。
②外链式:css代码和html代码,实现代码的分离效果,使用link标签设置href属性,即可单独把css文件链入到当前html中。
内嵌式应用在电商网页的首页,因为对网页的打开速度有严格的要求
外链式应用在除电商网站首页,实现代码的分离,方便后期修改
③行内式:css直接写在标签身上,修改不方便,重复代码太多,大量出现加载慢
<li style="color:red;">昵称</li>
6.伪类
标签:hover鼠标移入动作{color:blue;}
7.并列并集选择器(,)
用,链接 li1,li2,li3{color:red;}
8.后代选择器(空格)
空格出现代表找后代们
3.js(JavaScript)控制web前端技术的结构和样式95年
验证表单数据是否合法,书写在整个表单</html>最后,// ctrl+?注释
script
alert(); 弹出对话框
alert('网页偷跑中');对弹出对话框加提示文字
alert(''网页偷跑中'');对弹出对话框加提示文字
事件语法规则:事件源.事件类型=function(){事件发生时候要执行的命令}
将代码放在浏览器F12中,选择console,复制回车,查看是否找到对应的标签
事件源:document查找的范围在整个文档中. getElementByID('X') 先给标签增加id属性X
(你需要的标签:<input type="button" value"按钮" id="X">)
document. getElementByID('X') .οnclick=function(){alert('网页偷跑中')};
document. getElementByClassNname('X')[0] .οnclick=function(){alert('网页偷跑中')};
注意:[0],加[0]代表第几个,JS语法规则中从0开始记录,即0代表第1个(索引值,地址下标)
document. getElementByClassNname('X')[1] .οnmοuseοver=function(){alert('网页偷跑中')};
onclick点击事件
onmouseover鼠标移入事件
onmouseout鼠标移出事件