用插件做网站,wordpress博客导航开源主题,盗版视频网站建设费用,安徽网站建设推广目录
一、 什么是前端
二、 HTML
1.0 概述
2.0 注释
三、开发环境的搭建
1.0 插件
2.0 笔记
四、 常见标签#xff08;重点#xff09;
四、案例展示#xff08;图片代码#xff09;
五、CSS引入 一、 什么是前端
web前端 用来直接给用户呈现一个一个的网页
…目录
一、 什么是前端
二、 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
autop /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控制宽度 高度 weight100px 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 快捷方式ulli*4 就直接出现4个列表了
有序列表 ol li 在菜鸟教程里面看属性的部分
自定义列表 dl dt dd 快捷方式 dldtdd*4 直接就出现4个列表了
表单标签
用表单标签完成和服务器的交互 form /form
表单域 包含表单元素的区域
type属性 type
text 文本框 password 密码框写好后自动替换成了小圆点 radio 单选框
checked 默认选中 checkbox 复选框 button按钮框 onclick 弹窗 onclickalert(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引入
HTML 只是描述了页面的骨架结构. 使用 CSS 可以针对页面进行进一步美化感谢大家的支持 更多内容还在加载中........... 如有问题欢迎批评指正祝大家生活愉快、学习顺利
