前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Html&Css 基础总结(基础好了才是最能打的)二

Html&Css 基础总结(基础好了才是最能打的)二

作者头像
胖虎哥
发布2024-04-26 10:01:58
800
发布2024-04-26 10:01:58
举报

Html&Css 基础学习回顾总结

前言

这是作者的第二天总结篇章, 有需要的小伙伴可以 在这里 找到第一篇文章 视频在这里~ @B站黑马程序员视频

视频共15天,作者会以天为粒度,来分散到不同文章中,有兴趣的小伙伴可以关注一下,谢谢你 书中错误在所难免,如果有小伙伴发现的话恳请斧正,在此先谢过咯~

基本标签

列表就如同字面意思所讲,将内容按照顺序排列,或横向或纵向; 列表标签大致三分类, 分为有序、无序、自定义列表

无序列表标签

在无序列表中, 标签是ul&li的配合,其中ul是无序列表, li是列表条目;

代码语言:javascript
复制
<ul>
<li> 我是item</li>
<li>我是item</li>
</ul>
有序列表标签

有序列表相对于无序列表是在列表条目的开始多了一个1,2,3这样的顺序说明 有序列表是,标签是ol配合li, ol是有序列表, li同样是列表条目;

代码语言:javascript
复制
<ol>
<li> 我是item</li>
<li>我是item</li>
</ol>

tips:有序列表ol跟无序列表ul, 只能包含li, 但是li可以包含任何内容;

定义列表标签

标签是dl, 嵌套dt和dd, dt是定义列表的标题, dd是定义列表的描述详情, 简单理解就是dl是最外面的, dt就是表头, dd是body; 其中,dt和dd可以包含任何内容,但是dl只能包含dt和dd;

代码语言:javascript
复制
<dl>
<dt> 我是item表头</dt>
<dd> 我是item</dd>
<dt> 我是item表头</dt>
<dd> 我是item</dd>
</dl>
表格标签

顾名思义, 表格就是跟我们平常用的excel表格是一致的,展示数据; 标签名称是 table, table嵌套 tr(t-row) tr嵌套th(t-head)和td(t-body) 在一般使用中, 第一行是th表头, 然后再来个tr, 就可以写具体数据了,

代码语言:javascript
复制
<table> 
	<tr>
		<th>我是表头</th>
		<td>我是表内容</td>
		<th>我是表头</th>
		<td>我是表内容</td>
	</tr>
</table>

一般配合js使用for循环展示,

tips: 表格中默认没有边框线, 但是在table中使用 border 属性可以为表格添加边框线

表格结构标签

目的是让 让表格结构更清晰, 语义更清晰 , 是在刚才的代码中增加对应的包含关系,例如:

代码语言:javascript
复制
<table> 
	<tr>
		<thead>
			<th>我是标题1</th>
			<th>我是标题2</th>
			<th>我是表题3</th>
		</thead>
		<tbody>
			<td>我是表内容</td>
			<td>我是表内容</td>
		</tbody>
		<tfoot >
			<td>我是表内容</td>
			<td>我是表底部</td>
		</tfoot >
	</tr>
</table>

thead\body\foot 存在的意义是让代码分层阅读更清晰 thead\body\foot 存在的意思是让代码分层阅读更清晰,但是我觉得一般- -, 不过也是个知识点

合并单元格
代码语言:javascript
复制
将多个单元格合并成一个单元格,用以合并多个同类信息  

跨行合并& 跨列合并
单元格的合并是否不重要?
跨行合并,保留最上单元格, 属性rowspan 
跨列合并,保留最左的单元格, 属性colspan 
属性添加到对应的td中, 取值是数字,表示需要合并的单元格数量; 
不可以跨结构标签合并; 

表单

表单的主要作用是用于收集用户信息 ;

代码语言:javascript
复制
  <form>
	...
  </form>
input 标签

顾名思义又来啦, 其实input标签就是让用户输入的~ but 不同的属性值展示不同的形式,

代码语言:javascript
复制
<input> 是单标签,其中type属性指定了不同的形式
<input type="text...">
其属性值有:
        text 输入文本;
        password 密码框;
        radio 单选框;
        checkbox 多选框;
        file 上传文件; 

占位文本属性: plpachholder  相当于android的textview中的hint~ 
单选框(radio)
代码语言:javascript
复制
    <input type= "radio" name="xingbie">
    <input type= "radio" name="xingbie">

其中有个name属性, 同名的就是默认name是同一个组,也就可以让radio 造成单选的样子, 同组只能选中一个(单选)

还有个属性checked,默认选中, 属性名和属性值一样,可以简写;

代码语言:javascript
复制
    <input type= "radio" name="xingbie" checked="checked">
    <input type= "radio" name="xingbie">
file 上传文件
代码语言:javascript
复制
         <input type= "file" >

文件默认一次性只能上传一个文件, 使用属性 multipe 可以上传多个文件 例如: multipe 属性值和属性名都一样,所以可以简写 上传多个文件使用multipe ~

代码语言:javascript
复制
     <input type= "file" multipe>
代码语言:javascript
复制
checkbox 多选框, 有个属性是checked 表示默认选中 
Select 下拉菜单标签

简单理解: 标签 Select 嵌套option, select 是下拉菜单整体, Option 是每一项;

示例:

代码语言:javascript
复制
    <select>
        <option>北京 </option>
        <option>上海</option>
        <option>深圳 </option>
        <option>我家 </option>
        <option>你家 </option>
    </select>
	<select>
	
		<option selected >你家</option>
		<option >我家</option>
	</select>

其中 option 带有属性 selected 选择,可以让select 默认选中某一项,例如

代码语言:javascript
复制
    <option selected >北京 </option>
文本域标签

相对input text的形式,他将有多行输入文本的表单控件

代码语言:javascript
复制
标签名称:textarea 
代码语言:javascript
复制
<textarea> 我是文本域</textarea>
label 标签

经验: 用label 标签绑定文字和控件表单的关系, 增大表单控件的点击范围 用label标签绑定文字和空间的表单关系, 可以增加表单控件的点击范围, 首先输入框的id要树立一个值, 然后label 中的for字段,等于该id, 那么就可以点击到了

代码语言:javascript
复制
label 标签,增大点击范围:
方法1:
    <input type="radio" id="man">
    <label for="man">男</label>

    input type的id跟label for的id挂钩,使之点击关联; 

同样也可以直接包裹住, 使用label 标签包裹input标签,不需要属性即可生效; 方法2: 使用label 标签包裹input标签,不需要属性,即可生效

代码语言:javascript
复制
      <label > <input type="radio"></label>

支持使用label 标签增大点击范围的表单控件有:
    1.文本框, input text
    2.密码框;
    3.上传文件;
    4.单选框;
    5.多选框;
    6.下拉菜单;
    7.文本域;
        提升用户体验; 
按钮标签

比较常见的控件啦, button, 双标签,

代码语言:javascript
复制
 <button type=">我是按钮</button>
代码语言:javascript
复制
type属性值: 
    submit。提交,点击后提交数据到后台(默认)
    reset 重置, 恢复各项数据;
    button, 普通按钮,没有默认功能, 一般配合js使用
 reset重置时,需要外部包括form才可以进行表单数据的清除;
无语义的布局标签
代码语言:javascript
复制
作用: 布局网页(划分网页区域, 摆放内容)
div & span 
div 换行, span不换行,
两者都是双标签, 包裹内容; 
div被叫做大盒子
span被叫做小盒子

div换行,span不换行哦, 先暂时记住这个就ok啦,后续会针对dev细讲~

字符实体
代码语言:javascript
复制
在网页中显示预留字符;
&lt; 是小于号 <
&gt; 是大于号 >
&nsp; 空格 ~   你要展示多个空格的话, 直接回车浏览器是不认识的,所以要使用    &nsp; 

结束

今天的学习也到此为止了,希望大家都有所收获,再见

本文参与?腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2024-04-25,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客?前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与?腾讯云自媒体分享计划? ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Html&Css 基础学习回顾总结
  • 前言
    • 基本标签
      • 无序列表标签
      • 有序列表标签
      • 定义列表标签
      • 表格标签
      • 表格结构标签
      • 合并单元格
    • 表单
      • input 标签
      • 单选框(radio)
      • file 上传文件
      • Select 下拉菜单标签
      • 文本域标签
      • label 标签
      • 按钮标签
      • 无语义的布局标签
      • 字符实体
  • 结束
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
http://www.vxiaotou.com