黑马程序员html基本笔记

时间:2024-10-08 07:38:59

day01

文本格式化标签

突出重要性的强调语境:

        strong    加粗

        ins       下划线

        em        倾斜

        del       删除线

不常用:

        b    加粗

        u    下划线

        i    倾斜

        s    删除线

音、视频标签

使用:

  1. <audio src="">音频</audio>
  2. <video src="">视频</video>

属性:src 路径

         controls    显示播放的控件

         autoplay    自动播放(部分浏览器不支持)

         loop        循环播放

        muted       视频静音(需要跟autoplay一起使用)

超链接

<a href=""></a>

day02

列表

无序列表

列表的每一项前默认显示圆点标识

ul表示无序列表的整体,用于包裹li标签

li表示无序列表的每一项,用于包含每一行的内容

使用

  1. <ul>
  2. <li></li>
  3. </ul>

有序列表

列表的每一项前默认显示有序号标识

ol表示有序列表的整体,用于包裹li标签

Li表示有序列表的每一项,用于包含每一行的内容

使用

  1. <ol>
  2.  <li></li>
  3. </ol>

自定义列表

dl标识自定义列表的整体,用于包裹dt/dd标签

dt表示自定义列表的主题

dd表示自定义列表的正队主题的每一项内容。 dd前会默认显示缩进

使用

  1. <dl>
  2. <dt>列表主题</dt>
  3. <dd>内容</dd>
  4. </dl>

表格使用

table表格整体,可用于包裹多个tr

        tr 表格每行,可用于包裹td

        td表格单元格,可用于包裹内容

        table > tr > td

使用

  1. <table>
  2. <tr>
  3. <td></td>
  4. </tr>
  5. </table>

快速创建多个单元格:table > tr*3 > td*3

表格相关属性

     border  边框宽度

     width   表格宽度

     height  表格高度

使用

<table border="1" width="500" height="200" ></table>   (一般推荐用CSS使用的属性)

表格标题和表头单元格标签

表头单元格

caption 表格大标题。    表示表格整体大标题,默认在表格整体顶部居中位置显示

th  表头单元格。    表示一列小标题,通常用于第一行,默认内部文字加粗并居中显示

注意点:

caption标签书写在table标签内部

th标签书写在tr标签内部(用于替换td标签)

使用

  1. <table border="1">
  2. <caption><strong>学生成绩表</strong></caption>
  3. <tr>
  4. <th>姓名</th>
  5. <th>成绩</th>
  6. <th>评语</th>
  7.     </tr>
  8. <tr>
  9. <td>张三</td>
  10. <td>100分</td>
  11. <td>真棒</td>
  12. </tr>
  13. </table>

表格结构标签

thead   表格头部

tbody   表格主体

tfoot   表格底部

使用:

  1. <table>
  2. <thead>
  3. <th>表格头部</th>
  4. </thead>
  5. <tbody>
  6. <td>表格主体</td>
  7. </tbody>
  8. <tfoot>
  9. <td>表格</td>
  10. </tfoot>
  11. </table>

表格--合并单元格

合并单元格步骤:

        1.明确合并哪几个单元格

        2.通过左上原则,确定保留谁删除谁

                    上下合并---只保留最上的,其他删除

                    左右合并---只保留最左的,其他删除

        3.给保留的单元格设置:跨行合并(rowspan)或者跨列合并(colspan)

  1. <tr>
  2. <td>张三</td>
  3. <td rowspan="2">100分</td> //rowspan 垂直合并 2表示合并的数量
  4. <td>真棒</td>
  5. </tr>
  6. <tr>
  7. <td>张四</td>
  8. <td>真棒,第二名</td>
  9. </tr>
  10. <tr>
  11. <td>总结</td>
  12. <td colspan="2">69分</td> //colspan 水平合并
  13. </tr>

表单标签

表单:

<form action=""></form>

input系列标签

input标签可以通过type属性值的不同,展示不同效果。 

type属性值:
标签名 type属性值 说明
input
 
text 文本框,用于输入单行文本
password 密码框,用于输入密码
radio 单选框,用于多选一
checkbok 多选框,用于多选多
file 文件选择,用于之后上传文件
submit 提交按钮,用于提交
reset 重置按钮。用于重置
button 普通按钮,默认无功能,之后配合js添加功能

占位符:placeholder

<input type="text" placeholder="请输入账号">

单选框:checked

name  分组。有相同name属性值的单选框为一组,一组同时只能有一个被选中

  checked  默认选中

<input type="radio" name="sex"  checked><input type="radio" name="sex">

多选框:checkbox

checked  默认选中

<input type="checkbox" checked>

上传文件:file

multiple  上传多个文件选择

<input type="file" multiple>

按钮input:

submit        提交按钮。点击之后提交数据给后端服务器

reset        重置按钮。点击之后恢复表单默认值

button        普通按钮。默认无功能,之后配合js添加功能

value        给按钮添加文字

  1. <input type="submit" name="" id=""> //提交按钮
  2. <input type="reset" name="" id=""> //重置按钮
  3. <input type="button" value="普通按钮"> //普通按钮

button按钮

button标签时双标签,更便于包裹其他内容:文字、图片等

  1. <button>点我!</button>
  2. <button type="submit">点我!</button>

下拉菜单select

select 下拉菜单:提供多个选项的下拉菜单表单控件

select标签:下拉菜单的整体

option标签:下拉菜单的每一项

属性:selected:下拉菜单的默认选中

  1. <select>
  2. <option>A</option>
  3. <option selected>B</option> //selected 设置B为下拉菜单的默认选中
  4. </select>

textarea文本域标签

cols:规定了文本域内可见宽度

 rows:规定了文本域内可见行数

 注意:

        右下角可以拖拽改变大小

        实际开发时针对于样式效果推荐使用CSS设置

<textarea cols="30" rows="10">请输入您宝贵的意见</textarea>

label标签

常用于绑定内容于表单标签的关系。

使用方法一:

            使用label标签把内容(如:文本)包裹起来

            在表单标签上添加id属性

            在label标签的for属性中设置对应的id属性值

使用方法二:

            直接使用label标签把内容(如:文本)和表单标签一起包裹起来

            需要把label标签的for属性删除即可

  1. //方法一:
  2. 性别: <input type="radio" name="sex" id="dd"><label for="dd"></label>
  3. //方法二:
  4. 兴趣:<label><input type="checkbox" name="xq" id="">羽毛球</label>

语义化标签

没有语义的布局标签-div和span

实际开发网页时会大量频繁的使用到div和span这两个没有语义的布局标签

        div标签:一行只显示一个(独占一行)

        span标签:一行可以显示多个

  1. <div>这是div标签</div>
  2. <span>这是span标签</span>

有语义的布局标签

在HTML5 推出了一些有语义的布局标签开发者使用

标签名 语义
header 网页头部
nav 网页导航栏
footer 网页底部
aside 网页侧边栏
section 网页区块
article 网页文章

 字符实体

显示结果 描述 实体名称
空格 &nbsp;
< 小于号 &lt;
> 大于号 &gt;
&yen;
© 版权 &copy;