HTML5 笔记

目录

HTML5 学习笔记

1.Html5的基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个H5页面</title>
</head>
<body>
    <header>网站主题</header>
    <nav>连接菜单</nav>
    <article>
        主内容--HELLO，H5！
        <section>
            章级段落
        </section>
    </article>
    <aside>侧边栏</aside>
    <footer>页脚</footer>
</body>
</html>

2.常见标签

2.1块级标签

2.1.1 标题标签 <h1></h1>···<h6></h6>

设置标题大小，从一级到六级一次递减

2.1.2 水平线标签 <hr/>

2.1.3 段落标签 <p>

区分段落，不同段落自动增加换行符

2.1.4 换行标签 <br/>

2.1.5 引用标签 <blockquote></blockquote>

2.1.6 预格式标签 <pre></pre>

2.1.7 无序列表标签 <ul type=""><li></li></ul>

type类型：圆形、空心圆、方形等

1. disc
2. circle
3. square

2.1.8 有序列表标签 <0l type=""><li></li></0l>

属性 属性值
type 1、A、a、I、i
start 1、2、3等设置起始值
reversed 反向排序

2.1.9 定义列表标签

适用于对名词、概念或主题的定义

<dl>
    <dt>定义列表的标题</dt>
    <dd>描述第一项</dd>
    <dd>描述第二项</dd>
</dl>

2.1.10 分区标签 <div></div>

块级标签

2.2 行级标签

2.2.1 图片标签 <img></img>

<img src="" alt="" height="" width="" title="" align="">
属性 说明
src 相对路径、绝对路径
alt 图片无法加载时显示的内容
height、width 图片的大小
title 图片的标题：鼠标放在图片上显示的内容
align 图片周围文字相对于图片的位置

2.2.2 超链接标签 <a></a>

<a href="" target="" name="">显示文字</a>
属性 功能
href 链接地址
target 定义通过超链接打开的文档何处显示

2.2.3 其他常用的行级标签

标签 说明
<em> 侧重强调，可嵌套使用
<strong> 表示内容的重要性，嵌套递增重要性级别
<small> 旁注，可以用在免责声明，使用条款和版权信息等需要小字场景
<s> 有误文本，文本文字上加删除线样式
<b> 不仅仅是粗体文本，还可以定义需要引起注意却没有额外语义的内容，如摘要的关键和文章导语的加粗
<i> 不仅是单纯的泄题，还可以表示“另一种叙述方式”
<cite> 浏览器显示斜体，常用书、画作、作品的引用
<q> 短引用、显示文字 " "起来
<code> 知识便是为计算机代码，需要配合<pre>使用

2.2.4 块级标签与行级标签的区别

  • 块级标签自动换行，前后隔一行；行级标签不会自动换行，从左到右依次显示。
  • 块级标签的宽度默认100%，行级标签的宽度由文字内容撑开。
  • 块级标签可以设置宽度、高度、边距等属性；行级标签不能设置上述属性。

3. 表格

3.1 表格基本结构

行、列、列标题、单元格

表头1 表头2
第一行1 第一行2
第二行1 第二行2 
<table>
        <tr>
            <th>表头1</th>
            <th>表头2</th>
        </tr>
        <tr>
            <td>第一行1</td>
            <td>第一行2</td>
        </tr>
        <tr>
            <td>第二行1</td>
            <td>第二行2</td>
        </tr>
    </table>

3.2 表格的基本属性

属性 说明
border 表格边框属性，表格外围边框
width/height 分别定义表格的宽度和高度
bgcolor 表格背景色属性
background 表格背景图属性
bordercolor 表格边框颜色属性
cellspacing 表格单元格间距属性
cellpadding 表格单元格内边距属性
align 表格对齐属性

3.3 行和列的属性

<tr> <td>的属性

属性 说明
width/height 表格中单元格的宽和高
bgcolor 单元格的背景色属性
align 单元格内容水平对齐属性
valign 单元格内容垂直对齐属性
colspan/rowspan 表格的跨行与跨列

3.4 表格的结构化与直列化

3.4.1 结构化

<table width="300" border="2">
       <caption>标题</caption>
       <thead>
           <tr>
               <th>表格头部</th>
           </tr>
       </thead>
       <tbody>
           <tr>
               <td>表格主体</td>
           </tr>
       </tbody>
       <tfoot>
           <tr>
               <td>表格底部</td>
           </tr>
       </tfoot>
   </table>
标题
表格头部
表格主体
表格底部

3.4.2 直列化

<colgroup style="background-color: #010101">
            <col/>
</colgroup>
标题
表格头部 表格头部
表格主体 表格主体
表格底部 表格底部

4. 表单

4.1 表单常用属性

属性 说明
actoin 需要发送的服务器地址
method get/post提交方式
enctype 指定表单发送的编码方式，只有method =post 时有效

4.2 input 输入框

4.2.1 input的常用属性

属性 说明
type 输入框的类型
name 输入框的名称
value 输入框的值
placeholder 输入框的提示信息
tabindex tabindex=''1'' 按Tab键时的跳转顺序，从最小值开始一次获得焦点
checked/disabled/hidden 默认选中/控件不可用/隐藏控件

4.2.2 text 文本输入框

<form action="" method="post">
    输入内容：
    <input type="text" name="text1" maxlength="10" size="5">
</form>
输入内容：

4.2.3 密码输入框

<form action="" method="post">
        输入密码：
        <input type="password" name="psd" maxlength="10" size="5" value="123">
    </form>
输入密码：

4.2.4 radio 单选按钮

<form action="" method="post">
       <input type="radio" name="sex" value="男" checked="checked">男
       <input type="radio" name="sex" value="女">女
   </form>
男 女

注意两个按钮同名 才能达到单选效果

4.2.5 checkbox 复选按钮

<form action="" method="post">
       <input type="checkbox" name="hobby" value="sing" checked="checked">唱歌
       <input type="checkbox" name="hobby" value="draw" checked="checked">画画
       <input type="checkbox" name="hobby" value="dance">跳舞
</form>
唱歌 画画 跳舞

4.2.6 file 文件上传按钮

<form action="" method="post">
        <input type="file">
</form>

4.2.7 submit 表单提交按钮

<input type="submit" value="登录">

4.2.8 reset 重置按钮

<input type="reset" value="重置">

4.2.9 image 图形提交按钮

<input type="image" src="">

功能与submit相同

4.2.10 button 可单击按钮

<input type="button" value="点击我">

4.3 其他表单元素

4.3.1 select 下拉选择控件

<form action="">
       今天是星期  
       <select name="week" id="">
           <option value="1">1</option>
           <option value="2">2</option>
           <option value="3">3</option>
           <option value="4">4</option>
           <option value="5">5</option>
           <option value="6">6</option>
           <option value="7">7</option>
       </select>
</form>
今天是星期
4.3.1.1 select的属性
<select name="week" id="" size="2" multiple="multiple" >
今天是星期
属性 说明
name 列表名
multiple 设置select控件为多选
size 规定下拉列表中可见选项的数目
4.3.1.2 option 的属性
属性 说明
value 当选项option没有value属性时，往后台传递的是option标签中的文字;反， 传的是value的值
title 鼠标指上后显示的文字，与图片的title类似
selected 默认选中
4.3.1.3 optgroup 标签分组
<form action="">
       <select name="city" id="city">
           <optgroup label="山东省">
               <option value="1" title="青岛">青岛</option>
               <option value="2" title="烟台" selected="selected">烟台</option>
               <option value="3" title="济南">济南</option>
           </optgroup>
           <optgroup label="北京市">
               <option value="">海淀区</option>
               <option value="">昌平区</option>
           </optgroup>
       </select>
   </form>

4.3.2 textarea 文本域

<form action="">
       <textarea name="" id="" cols="30" rows="10">这是文本域的内容</textarea>
</form>

4.3.3 button 按钮

button内部可以放置内容，如文本或图像。这是该元素与input创建的按钮不同之处

4.4 Html5 智能表单

4.4.1 表单分组

   <form action="">
<!--        fieldset表示单边框-->
       <fieldset>
<!--            legend表示表单标题-->
           <legend>这是表单第一部分</legend>
           请输入内容: <input type="text"> <input type="submit" value="提交">
       </fieldset>
     <fieldset>
           <legend>这是表单第二部分</legend>
           请输入内容: <input type="text"> <input type="submit" value="提交">
       </fieldset>
   </form>
这是表单第一部分 请输入内容:
这是表单第二部分 请输入内容:

4.4.2 表单新增元素及属性

新增元素 描述
<ditalist> input标签定义选项列表，与input元素配合使用来定义input可能的值
<keygen> 规定用于表单的密钥对生成器字段
<output> 定义不同类型的输出，比如脚本的输出

表单新增属性

属性 说明
autocompleted 规定form表单具有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项
novalidate 规定在提交表单时不进行验证

<input>标签新增属性

属性 说明
autocompleted 规定input标签具有自动完成功能
autofocus 规定在页面加载时，控件自动的获得焦点（一个页面只能有一个控件使用该属性)
required 规定输入的字段是必须的（必须填写)
pattern 规定通过其检查输入值的正则表达式
form overrides 规定表单重写属性
form 规定输入域所属的一个或多个表单

<input>标签新增输入类型

输入类型 作用
color 定义拾色器
date 限制用户输入时间格式
email 限制用户输入email格式
number 限制用户输入数字格式
range 定义包含一定范围内的值的数字字段
search 定义用于输入搜索字符串的文本字段 
   <form action="">
       拾色器: <input type="color" name=""> <br><br>
       日期选择: <input type="date" name=""> <br><br>
       电子邮件: <input type="email" name=""> <br><br>
       数字输入框: <input type="number" name=""> <br><br>
       滑块输入: <input type="range" name=""> <br><br>
       搜索框: <input type="search" name=""> <br><br>
   </form>
拾色器:

日期选择:

电子邮件:

数字输入框:

滑块输入:

搜索框:

posted @ 2022-03-28 20:28  驿书达  阅读(67)  评论(0)  编辑  收藏  举报