seo网站源码,魔站网站开发,目标网站上做关键字布局,永州网站建设gwtcms目录
HTML基础
1.快捷键
2.标签
HTML进阶
1.列表
a.无序列表
b.有序列表
c.定义列表
2.表格
a.内容
b.合并单元格
3.表单
a.input标签
b.单选框
c.上传文件
4.下拉菜单
5.文本域标签
6.label标签
7.按钮标签
8.无语义的布局标签div与span
9.字符实体 HTML…目录
HTML基础
1.快捷键
2.标签
HTML进阶
1.列表
a.无序列表
b.有序列表
c.定义列表
2.表格
a.内容
b.合并单元格
3.表单
a.input标签
b.单选框
c.上传文件
4.下拉菜单
5.文本域标签
6.label标签
7.按钮标签
8.无语义的布局标签div与span
9.字符实体 HTML基础
1.快捷键 基于VS Code记录编写过程中常用的快捷键
功能快捷键生成HTML基本骨架!回车保存代码CtrlS在浏览器运行代码AltB注释Ctrl/缩进Tab取消缩进ShiftTab收起侧边栏CtrlB
先保存再在浏览器运行才能刷新
2.标签 标签作用h1——h6双标签标题标签独占一行p双标签段落标签独占一行段落间存在间隙br单标签换行标签hr单标签水平线标签img图像audio音频video视频
文本格式化标签
标签双标签作用strong加粗b加粗em倾斜i倾斜ins下划线u下划线del删除线s删除线 标签作用img src alt插入图片src属性图像存在的位置和名称必须写属性alt替换文本图片无法显示时显示的文字title提示文本鼠标悬停时显示width图片宽度值为数字没有单位浏览器缩放图片默认等比例缩放height图片高度值为数字没有单位标签作用video src/video视频标签src属性视频存在的位置和名称必须写属性controls显示视频控制面板在html5内如果属性值和属性名一样可以简写为一个单词loop循环播放muted静音播放autoplay自动播放浏览器支持在静音模式下自动播放。注意autoplay属性需要和muted配合使用才能生效标签作用audio src/audio音频标签src属性音频存在的位置和名称必须写属性controls显示音频控制面板loop循环播放autoplay自动播放浏览器会禁止自动播放可以通过用户点击按钮再播放标签作用a href target/a超链接标签双标签herf属性为链接target_blank表示新窗口跳转页面 相对路径
. 表示当前文件所在文件夹
.. 表示当前文件上一级
/ 表示进入某文件夹里
常常使用相对路径
绝对路径
直接在盘符里复制就好在Windows系统里默认是\其他系统是/统一使用/
也可以使用网络上图片的在线网址
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title超链接标签/title
/head
body!-- 跳转到网络文件 --a hrefhttps://www.bilibili.com/跳转到bilibili/abr!-- 跳转到本地文件但是是在同一个页面跳转实现--bra href./图像标签.html跳转到图像标签/a!-- 跳转到新标签页 --a href./标题和段落标签.html target_blank标题和段落标签/abr!-- 开发初期不知道跳转链接的情况使用#暂时填补则不会跳转 --a href#空链接/a
/body
/html
HTML进阶
1.列表
a.无序列表 b.有序列表 c.定义列表 2.表格
a.内容 加入表格结构标签thead,tbody,tfoot便于浏览器读取也可省略
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title第二天/title
/head
body!-- 无序列表 --ulli无序列标签1/lili无序列标签2/li/ul!-- 有序列表 --olli有序列标签1/lili有序列标签2/li/ol!-- 定义列表 --dldt标题/dtdd描述1/dddd描述2/dd/dl!-- 表格标签加border后能显示边框 加入表格结构标签thead,tbody,tfoot便于浏览器读取也可省略--table border1theadtrth第一行表头单元格1/thth第一行表头单元格2/th/tr/theadtbodytrtd第一行内容单元格1/tdtd第一行内容单元格2/td/tr/tbodytfoottrtd第二行汇总单元格1/tdtd第二行汇总单元格2/td/tr/tfoot/table
/body
/html
b.合并单元格 注意
表格是在自己的结构标签内进行合并的不能跨结构标签thead、tbody、tfoot合并
!-- 合并单元格遵循“保留最左最上”原则 --table border1trth语文/thth数学/thth英语/th/trtrtd70/tdtd rowspan280/tdtd90/td/trtrtd90/td!-- td80/td 删除--td70/td/trtrtd colspan3160/td!-- td160/td 删除--!-- td160/td 删除--/tr/table 3.表单
作用收集用户信息
使用场景 登录页面 注册页面 搜索区域
a.input标签 添加input标签占位文本使用placeholder属性即可
b.单选框 c.上传文件
br!-- 表单标签——input标签使用 --!-- 单纯的文本形式不能换行 --文本框input typetextbr!-- 自动非明文显示 -- !-- input标签占位文本 --密码框input typepassword placeholder请输入密码br单选框!-- gender是自定义名称添加checked属性默认选中 --input typeradio namegender 男input typeradio namegender checked 女brbr!-- 默认只可上传一个文件添加multiple属性可实现文件多选功能 --上传一个文件input typefile br上传多个文件input typefile multiplebrbr!-- 添加checked属性实现默认选中 --多选框input typecheckbox 苹果多选框默认选中input typecheckbox checked 草莓br
4.下拉菜单 !-- 下拉菜单使用属性selected实现默认选中--城市!-- select name id/select name和id等是发送数据使用的属性--select option北京/optionoption上海/optionoption selected广州/option/selectbrbr 5.文本域标签 !-- 文本域标签 与input不同能自动换行右下角有拖拽功能在未来都要使用CSS设置尺寸并禁用该功能--textarea请输入评论/textareabrbr!-- 写法一 --input typeradio namegender idmanlabel forman男/label!-- 写法二 --label input typeradio namegender 女/labelbrbrbr
6.label标签
作用 网页中作为某个标签的说明文本 绑定文字和表单控件的关系增大表单控件的点击范围 7.按钮标签 !-- 按钮标签 需要使用form标签统一管理功能才能实现action属性是要与后台链接--form action用户名input typetextbr密码input typepasswordbrbr!-- 如果省略type属性是默认的提交功能 --button typesubmit 提交/buttonbutton typereset 重置/button!-- 普通按钮后续与JS配合使用 --button typebutton普通按钮/button/formbrbr
8.无语义的布局标签div与span
作用用于布局网页划分区域摆放内容 div独占一行换行大盒子 span不换行小盒子
!-- 无语义的布局标签 --div div标签/div span span标签1/spanspan span标签2/spanbrbr
9.字符实体
在网页中显示预留字符
常用的字符实体
在代码中敲很多个空格网页仅显示一个空格 !-- 常用的字符实体 类似转义字符--!-- 在代码中敲很多个空格网页仅显示一个空格 --明天会nbsp;nbsp;更好brbrbr 【记录学习过程的笔记欢迎大家一起讨论会持续更新】
