每天学习一点,每天进步一点!
初识前端
- html的骨架
- html的标签分类
- 标签的关系
- 编码格式
- 语义化标签
- 文本格式化标签
- 属性标签
- 链接
- 路径
- 锚点定位
- base标签
- 特殊标签
- 表格
- 单元格合并
- 列表
- 表单
以上是我列出的关系html基础篇的大致内容。。。。
html的骨架
//首先我们来说下web的三层标准
// 结构(html)
// 标准(css)
// 行为(JS)
//这里我们暂时只对html 进行讲解
html 如同我们人一般 有着自己的结构
<html> ------>代表着人
<head>---->头部
</head>
<body>------身体
</body>
</html>
标签的分类
双标签:<标签名></标签名>
例如:<html></html>
单标签:<单标签/>
例如: <br/> <hr/>
标签的关系
嵌套型
<head>
<title></title>
</head>
并列型
<head></head>
<body></body>
编码格式
GB2312:国标 国内使用
BIG5: 繁体
GBK: 简体+繁体
UTF-8: 编码格式 国际标准
标签语义化
排版标签
1)标题标签h(熟记)<h1></h1><h2></h2><h3></h3>...
h1>>>>>h6 字体从大到小 从粗到细
一行只放一个标题
2)段落标签<p>...</p>
3)横线标签<hr/>
4)换行标签 <br/>
5)div标签和span标签
div 布局标签 一行只能用一个div <div></div>
span 布局标签 一行可以放很多个span <span></span>
文本格式化标签
<b></b>标签和<strong></strong> 标签都是加粗字体的效果
推荐使用<strong>标签,带有强调的意思,语义更强烈
同理:<i></i>和<em></em> 推荐使用em
<s></s> 和<del></del> 推荐使用del
属性标签
<标签名 属性1="属性值1" 属性2="属性值2"></标签名>
图像标签
<img src="图像URL"/>
正常图片
<img src="timg.gif" />
带alt 图片不能正常显示就显示alt 中的文字
<img src="timg.gif1" alt="tihuan wenben " />
带title 就是鼠标放上去文字
<img src="timg.gif" title="有文字提示的" />
修改图片大小 一般给宽就不给高 给高不给宽 给一个属性另外一个属性会等比例缩放
<img src="timg.gif" title="有文字提示的" width="500" />
带broder 带边框
<img src="timg.gif" title="有文字提示的" width="500" broder="10"/>
链接标签
<a href="url" >链接</a>
空链接
<a href=“#”></a>
使用原本的页面打开链接
<a href="url“ target="_self"></a>
使用新的页面打开链接
<a href="url” target="_blank"></a>
路径
相对路径
-同一级直接使用名称即可(即html文件和图片处于同一个文件夹下 也可以使用 ./文件名)
-文件在html下级文件夹中 : 路径名/文件名(即html文件处于图片的上一级文件)
-文件在html上级文件夹中:…/文件名 去查找
锚点定位
跳转到id 为 where 的地方
<a href="#where">2.圣诞老人的由来 </a><br/>
设置锚点为 id=where
<h2 id="where">圣诞老人的由来</h2>
base标签
<base target="_balank"> 所有的链接都由新页面打开 放在 <head></head>
特殊字符
特殊字符 | 描述 | 字符代码 |
---|---|---|
空格符 |  ; | |
< | 小于号 | <; |
> | 大于号 | >; |
& | 和号 | &; |
¥ | 人名币 | ¥; |
© | 版权 | ©; |
® | 注册商标 | ®; |
° | 摄氏度 | °; |
± | 正负号 | ±; |
✖ | 乘号 | ×; |
➗ | 除号 | ÷l; |
² | 平方 | ²; |
³ | 立方 | ³; |
表格
<table># 表格的意思
<tr> 代表行
<td>姓名</td> -行中的单元格
<td>年龄</td> -行中的单元格
<td>性别</td>
</tr>
<tr>
<td>小明</td>
<td>8</td>
<td>男</td>
</tr>
<tr>
<td>小红</td>
<td>12</td>
<td>女</td>
</tr>
遵循
先上后下
跨行合并 rowspan="合并单元格数量"
跨列合并 clospan="合并单元格数量"
<table></table> 表格
<tr></tr> 行标签
<td></td> 单元格标签
<th></th> 表头单元格标签(里面的文字会加粗 水平居中)
<caption></caption> 表格标题标签
<rowspan=3> 写在单元格属性中 合并跨行单元格
clospan=3 写在单元格属性中 合并跨列单元格
======================================
表格划分
<thead></thead> 表格头部 第一行(类似th)
<tbody></tbody> 表格主体部分
<tfoot></tfoot> 表格脚部分一般放脚注信息
表单
属性 | 属性值 | 描述 |
type | text | 单行文本输入 |
password | 密码输入 | |
radio | 单选按钮 | |
checkbox | 复选框 | |
button | 按钮 | |
submit | 提交按钮 | |
reset | 重置按钮 | |
image | 图片形式为背景的按钮 | |
file | 文件域 | |
name | 由用户自定义 | 控件的名称 |
value | 由用户自定义 | inpout控件中默认值 |
size | 正整数 | input控件在页面的显示宽度 |
checked | checked | 定义选择控件默认被选中的项 |
maxlength | 正整数 | 控件允许输入最大字符数 |