你好,前端!

每天学习一点,每天进步一点!

初识前端

  1. html的骨架
  2. html的标签分类
  3. 标签的关系
  4. 编码格式
  5. 语义化标签
  6. 文本格式化标签
  7. 属性标签
  8. 链接
  9. 路径
  10. 锚点定位
  11. base标签
  12. 特殊标签
  13. 表格
  14. 单元格合并
  15. 列表
  16. 表单

以上是我列出的关系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>

特殊字符

特殊字符描述字符代码
空格符&nbsp;
<小于号&lt;
>大于号&gt;
&和号&amp;
人名币&yen;
©版权&copy;
®注册商标&reg;
°摄氏度&deg;
±正负号&plusmn;
乘号&times;
除号&dividel;
²平方&sup2;
³立方&sup3;

表格

<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> 表格脚部分一般放脚注信息

表单

属性属性值描述
typetext单行文本输入
password密码输入
radio单选按钮
checkbox复选框
button按钮
submit提交按钮
reset重置按钮
image图片形式为背景的按钮
file文件域
name由用户自定义控件的名称
value由用户自定义inpout控件中默认值
size正整数input控件在页面的显示宽度
checkedchecked定义选择控件默认被选中的项
maxlength正整数控件允许输入最大字符数
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值