前端1.0

目录

一、 什么是前端

二、 HTML

1.0  概述

2.0 注释

三、开发环境的搭建

1.0  插件

2.0 笔记

四、 常见标签（重点）

四、案例展示（图片+代码）

五、CSS引入

一、 什么是前端

web前端 用来直接给用户呈现一个一个的网页

生活中遇到的前端页面: web页面  PC端程序页面  移动端APP页面

学习这门之后可以做什么：可以开发出来简单的Web页面

二、 HTML

1.0  概述

超文本标记语言   html页面在浏览器上面运行

编写第一个HTML页面：  记事本编写后直接在浏览器打开

head：编写页面相关的属性   title：页面标题  body：页面内容展示信息

每一个标签相当于是一个对象   程序员通过这些代码拿到对象之后进行增删改查

2.0 注释

ctrl +  /  和Java里面一样的快捷键

注意：别人浏览你的页面代码   f12能看到你的注释  注释里面的内容补药负能量

！ 加回车  快速生成代码框架

三、开发环境的搭建

idea  vscode

1.0  插件

auto  rename  tag

auto：<p> </p>  你写第一个的时候自动出现</p>

view-in-browser

保存页面直接就给刷新了   在浏览器打开  写好代码之后 右键view in browser

live server

修改代码 ctrl s 之后 不需要我们手动刷新浏览器了

2.0 笔记

html菜鸟教程（网上直接搜）  有别人整理好的内容直接用即可

菜鸟教程 - 学的不仅是技术，更是梦想！

四、 常见标签（重点）

标题标签：  h1到h6   数字越大 字体越小

段落标签：<p>  

换行标签：<br>   

格式化标签:

<strong>  </strong>   <b></b>  加粗

<em></em>    <i></i>  倾斜

<del></del>  <s></s>  删除线

<ins> </ins>  <u></u>  下划线

img标签：

页面上的图片是通过img标签实现的   img单标签里面的属性是不固定的 不影响页面展示

(1) src 属性

img标签必须带有 src属性，表示图片的路径

绝对路径：图片路径  网络上的图片路径 

<img src="网上复制粘贴过来的路径">

相对路径：代代码和图片在同一个文件    ./xxx.png  ./img/xxx/png ../xxx.png

(2) 其他属性

alt属性：替换文本   当文本不能正确显示的时候，会显示一个替换的文字  img标签里面

title属性：提示文本，鼠标放到图片上，就会有文字 

width/height：控制宽度 高度    weight=100px  px表示像素点

border：边框  参数是宽度的像素，但是一一般用css来设定

超链接标签：

a标签   

herf属性： 点击会跳转到哪个页面

herf里面也可以写页面   html01.html  #是当前页面  不做任何跳转 a标签里面也可以放图片

这样点击图片就跳转到链接里面了 

target属性：   重新打开一个页面 不是当前页面 

target 打开方式  默认是_self 如果是_blank 则用新的标签页打开

表格标签：

table标签表示整个表格

tr 表示表格的一行  td表示表格的一个单元格  th表示表头单元格 会居中加粗

thead 表格的头部区域 内容居中  tbody 表格得到主体区域

表格标签有一些属性  可以用于设置大小边框等  但是一般用CSS方式来设置

shift alt 下箭头：直接复制粘贴了

border 表格边框像素   cellpadding内容距离边框的距离  cellspacing 单元格之间的距离

width height  设置尺寸 align 表格相对页面在左面还是右面还是居中  right left center

列表标签：

无序标签  ul li   快捷方式：ul>li*4  就直接出现4个列表了 

有序列表 ol li    在菜鸟教程里面看属性的部分 

自定义列表  dl dt  dd    快捷方式 dl>dt>dd*4  直接就出现4个列表了

表单标签：

用表单标签完成和服务器的交互  <form>   </form>

表单域  包含表单元素的区域

type属性         type="  "

text 文本框  password    密码框（写好后自动替换成了小圆点 ） radio  单选框

checked   默认选中 checkbox 复选框  button按钮框    onclick 弹窗 onclick='alert'('hello')

label标签  搭配input使用  点击label也能选中对应的单选/复选框  能够提升用户体验

for和对应的id

select标签

option  默认展示的是第一个   你点击下拉之后的各种选项

textarea标签  文本域中的内容  就是默认内容 注意空格也会有影响  文本框的大小长宽

cols属性和rows属性一般在css里面设置

form里面的action是和服务器建立链接  可爱捏

无语义标签 

没有固定的用途  啥都可以干  通常用于对页面的布局

div和span   division 分割   span标签  含义是跨度

就是两个盒子 用于网页布局  div是独占一行  是一个大盒子 

spqn不独占一行 是一个小盒子

span不独占一行  是一个小盒子

特殊字符

有些特殊字符在html文件中是不能直接表示的 例如 空格 小于号 大于号 按位与

参考内容：HTML特殊字符编码对照表

四、案例展示（图片+代码）

iconfont-阿里巴巴矢量图标库    图标网站   png下载

点击姓名 光标自动到框框里  用label标签

代码gitee：前端代码仓库: 前端代码仓库

图片化展示：

下面是我的效果展示

五、CSS引入