链接元素,列表元素,表格元素,表单元素学习笔记

0403 html 基础知识 2

1.语义化元素

• <h1>-<h6> ;标题标签，划分段落
• <header>：页眉，页面头部,一个页面里面可以有多个 header
• <main>:主体内容，一个页面只有一个
• <section>:功能区块
• <aside>:侧边栏（广告位，排行，相关商品）
• <footer>：页脚，一个页面里面可以有多个 header
• <nav> :导航
• <div>:通用容器（什么都能装）

2.语义化的文本元素

• <p>, <pre>,<br>,<span> pre：可以把代码进行原样渲染，span：通用的内联元素
• <time>,<abbr>,<address>,<code> code:代码段，abbr：缩写

3.链接，列表与图像

• <a>:链接
• <ul><li>无序列表</li></ul>:无序列表
• <ol><li>有序列表</li></ol>:有序列表
• <dl><dt><dd></dd></dt></dl>:自定义列表
• <img>:图像

4. 表格与框架

• <table>+<tr>+<td> table:大容器，tr:行，td:列，单元格
• theard:表头 表头里面的 td 要改成 th
• tbody:表内容
• cellspacing:单元格间距
• cellpadding:单元格内文字与边框的距离
• width:宽度，填写的数字默认就是像素
• height:高度
• align:排列的意思,表格是位置定义
• colgroup:列的颜色设定
• col:定义具体列的颜色
• span:表格用到了内联元素
• font-size:字体尺寸
• margin-bottom:盒模型
• rowspan:向下合并行
• colspan:横向合并

5.表单

• form:就是表单的意思
• input:输入
• lable:和 input 通过 id 绑定在一起
• name:为的是提交数据库的时候的变量名
• placeholder:提示信息
• required:布尔值，必须填
• autofous:自动落光标在上面
• value:预定义的值
• checked:布尔属性，出现即为真,默认选定
• checkbox:复选框控件
• hobby[]:复选框数组

ps:vscode 快捷键:按住 alt 键可多选！

6.感想：

第二天学习了，其实从事互联网行业也有五六年了，但是因为从事的是seo相关工作，因此，对代码只能是能看懂一点，碎片化学习，而且和程序员同事沟通有障碍，感觉鸡同鸭语，所以立志要学习代码，打通seo和程序编写的关系（就是老师说的全栈吧），这两天的感觉是，把自己多年的碎片化知识让朱老师都给串到一起，感觉非常爽，但是，还是新知识多，感觉自己的大脑像个海绵一样不断的吸呀吸，大脑好久没这么高速运转了，是朱老师说的那句闻道有先后，术业有专攻，熟能生巧激励着我，加油，继续努力！

7.作业

自己举例演示链接元素,列表元素,表格元素,表单元素的作业地址