每日一句正能量!
只要持续地努力,不懈地奋斗,就没有征服不了的东西。(作者:契诃夫)
今天讲一讲前端中的html中的内容,内容较多,请耐心看完。
sublime编辑器
常用快捷键:
注释单行 ctrl+/
注释多行 ctrl+shift+/
撤销 ctrl+z
恢复撤销 ctrl+y
打开底部搜索框 ,查找关键字 ctrl+f
底部搜索框,替换 ctrl+h
折叠代码 ctrl+shift+[
展开代码 ctrl+shift+]
保存 ctrl+s
向右缩进 table
向左缩进 shift+table
分屏 alt+shift+123456
二.主流浏览器
五个主流浏览器:IE,火狐,谷歌,苹果(safari),欧朋(opera)(有自己的内核)
三.前端界面三层
1.结构层(html)2.表现层(css)3.行为层(js)三层分离
四.HTML定义
HTML是超文本标记语言
五、HTML骨架标签(19行,默写)
<!DOCTYPE html> 1 <html> 1 1 <head> 1 <title>标题</title> 1 <meta charset="utf=8"> </head> 2 3 <body> <p>段落</p> </body> 4 5 </html>
六、语义化
合适的地方放合适的标签(双合适)
七、标签的分类()
7.1有无结束:单双(单标签或双标签)
按照标签有无结束标签:分为单标签,双标签
(meta,br,img,input,source...) <img scr="images/xxx.png"> <meta charset="utf-8"> <input type="text" name="123">
7.2、有无语义
按照标签有无语义:分为有语义的,无语义的
无语义的:div,span
7.3、显示方式
按照标签的显示方式:分为块级标签,行内标签,行内块级标签
块级:独占整行,宽高生效(html,body,div...)
行内:和行内,行块可同行显示,设置的宽高不生效,按内容的多少显示宽高(span,em,i,strong...)
行块:和行内,行块可同行显示,宽高生效,按内容的多少显示宽高(img,input...)
八、标签的相互关系
关系两种:嵌套(父子),平级(兄弟,有共同的父级)
九、常用的标签
标签 | 含义 | 分类 | 注意要点 |
---|---|---|---|
h1-h6 | 标题 | 块级标签,双标签 | 加粗,逐渐变小 |
p | 段落 | 块级标签,双标签 | 不能嵌套块级标签 |
br | 换行 | 单标签 | |
hr | 水平线 | 块级元素,单标签 | 主题结束 |
div | 无语义 | 块级标签,双标签 | 布局 |
span | 无语义 | 行内标签,双标签 | 包文字 |
img | 插入图片 | 行块标签,单标签 | 属性src,alt,width,height |
a | 超链接 | 行内标签,双标签 | 属性,href放路径,a里面可以套文字或图片 |
pre | 保留格式 | 块级标签,双标签 | 保留格式 |
2.文本格式化标签:
b,strong是加粗**
i,em是斜体
s,del是删除线
u,ins是下划线
都是行内,双标签,包文字
3.特殊字符
十、路径
路径分为相对路径和绝对路径。
相对路径是在文件附近的
<img src="../images/1.png" alt="这是一个图片" width="200px" height="100px">
src是必须要写的属性
绝对路径是直接的链接
例如点我跳到百度
十一、表格
11.1html的三个表
表格(table):展示数据
列表:布局
表单:收集用户信息
11.2表格的写法
table表格 双标签 块级标签
caption 表格标题 双标签 块级标签
tr 行 双标签 块级标签
th 表头单元格 双标签 行块 (加粗 居中)
td 普通单元格 双标签 行块
11.3表格的内部细节
colspan 跨列 (合并横着的)
rowspan 跨行(合并竖着的)
两个都是写在th或者td里面
同一行跨列,不同行跨行
<th colspan="3">****</th>
cellspacing=“0px” 单元格间距
cellpadding=“40px” 字体间距 (这两个用的少)
table,tr,td一般只给table设宽高,tr,td自动分配空间
给table加border-collapse:collapse合并边框
table里面加border=“1”添加实线
大致内容就是这些啦,只要熟练掌握这些,打好基础,对后面的学习还是十分有帮助的,关注我,每日一篇前/后端学习内容。