HTML笔记一览篇

叫我阿良v
166 阅读7分钟

HTML 篇

#琐碎知识

1. 浏览器及内核

  • 谷歌 blink
  • 火狐 gecko
  • ie trident
  • safari webkit
  • opera blink

2. src与href区别

  • src 是引入本地下载好的或者网络资源
  • href 是超链接引用，建立页面与页面之间的联系/桥梁作用

3. 基本标签含义

<!-- 网页声明头 代表我们使用的是哪个版本的html -->
<!DOCTYPE html>
<!-- 网页的第一个标签，入口标签 -->
<html>
    <!-- 网页头部 这个标签里面的东西不会显示到网页当中-->
    <head>
        <!-- 声明网页编码格式 -->
        <meta charset="UTF-8">
        <!-- 网页标题 -->
        <title>html基本代码</title>
    </head>
    <!-- 网页身体部分 网页中所有的内容都需要写到body当中 -->
    <body>
        今天星期一
    </body>
</html>

4. w3c 万维网联盟

他是前端语言标准的制定者，没有w3c标准的时候，前端写一套代码需要兼容多个浏览器有了w3c标准以后，一套代码可以在多个浏览器上正常运行

5. 网页组成

  1. 网页分成3层：结构层 表现层 行为层

一、HTML基本标签

1. 基本框架

  • 快捷方式：html：5 或者 英文！+ top
  • <!doctype html>
​
<html lang = ＂zh-CH＂> 
​
<head>    
<meta charset="UFT-8">     
<meta name="viewport"   content="width=device-width,initial-scale=1.0,maximum-scale=1.0,u   ser-scalable=0" />    
    <meta http-equiv="X-UA-Compatible" content="ie=edge">   
  <title>无标题文档</title> 
</head> 
<body> 
​
</body> 
​
</html>

2. 常用的基本标签

  • <hr>：一条水平线，可以编辑 width size color align

  • <pre> </pre>：原样显示排版格式

  • <hm></hm>：（m取1-6） 不同等级的标题

  • <font face = ＂字体＂ size = ＂字号＂ color = ＂颜色＂ > 内容 </font> ：文字标签

  • <b>粗体</b> <u>下划线</u> <i>斜体</i> <del>删除线</del> <p> 分段 </p> <br> 换行 </br>

  • <center> 居中 </center>

  • <sup> 上标 </sup> <sub> 下标 </sub>

  • <address> 地址标志 </address>

  • <html lang = ＂　＂>：＂en＂*英文网站 ＂zh-CH＂*中文网站

  • 图像标签：<img src = ＂ 链接 ＂alt = ＂图像不显示时显示此处文字＂ title = ＂鼠标放在图片上会显示的文字＂ width = ＂设定宽度＂ height = ＂设定高度＂ border = ＂设定图像边框＂ />

  • 盒子标签：

    • <div> 分割分区 </div>：一个div标签 单独占一行 ，大盒子
    • <span>跨度跨距 </span>：span标签用来布局 ，一行可以有多个，小盒子

  • 超链接标签：<a></a>：实现跳转功能

    • 页面链接： 一个页面跳转到另一个页面< a href = ＂跳转目标＂ target =＂目标窗口弹出的方式＂>文本或图像

      • href=＂#＂： 空链接

      • target=＂目标窗口的弹出方式＂

        • ： ＂_self＂当前窗口打开页面 _
        • ＂_blank＂新窗口打开页面
        • "_top" 最高级别页面打开
        • "_parent" 从父级页面打开

    • 锚点链接：跳转功能

      • \1) <a href = ＂＃live＂> 个人生活 </a>

        • #对应的是 id
        • 如果目标是a链接的话 id 可以换成 name

      • \2) <hm id = ＂live＂> 个人生活 </hm>

        • 命名规范： 开始必须是英文字母或者下划线 通常要要见名知意

  • 注释标签： 快捷键（ctrl + ？）

  • 特殊字符： &nbsp：空格 ，，，，等等

3. Web标准

  1. 采用UTF-8来保存文字，不写会乱码。<meta charset = ＂UTF-8＂/>，必须写

二、表格标签：

1. 语法格式：

<table>
<tr>
<th>单元格内的文字</th>
<td>单元格内的文字</td>
...
</tr>
<tr>
<th>单元格内的文字</th>
<td>单元格内的文字</td>
...
</tr>
....
</table>
  1. <table></table>是用于定义表格的标签，定义一个表格
  2. (1) <tr></tr>用于定义表格中的行，必须在<table></table>中使用
  3. <td></td>用于定义表格中的单元格，必须在<tr></tr>中使用
  4. 表头单元格：<th></th>标签中的文本内容加粗居中显示（一般放第一行，td改th）
  5. <caption></caption> 定义表格的标题
  6. <caption align="top">课程表</caption> align标题显示位置
  7. <colgroup><!--^ 对表格列进行分组设置 -->
            <col bgcolor="red"> 
            <!--^ 一个col表示一列 -->
            <!--^ span控制列数 -->
            <col bgcolor="pink">
        </colgroup>
  8. <table
  9. align=＂left center right＂单元格水平方向显示位置
  10. valign="middle top bottom"单元格垂直方向显示位置
  11. border=＂1或空＂默认为空无边框
  12. cellpadding=＂＂规定内容与单元格之间的距离
  13. cellspacing=＂＂规定单元格与单元格之间的距离
  14. width　=＂＂规定单元格的宽度 height=＂＂规定单元格的高度></table>
  15. 清除a链接的下划线：设置属性：text-decoration:none;

2. 合并单元格：

  1. 跨行合并：rowspan = ＂合并单元格的个数＂（合并的是列）

  2. 跨列合并：colspan = ＂合并单元格的个数＂（合并的是行）

  3. 合并三部曲：

    1. 先确定跨行还是跨列
    2. 找到目标单元格，写上合并方式 = 合并的单元格数量。 比如<td colspan = ＂2＂></td>
    3. 删除多余的单元格

3.表头标签

  1. thead:定义表格头部，用此标签当前行的单元格合并会失效（rowspan不生效）
  2. tbody:定义表格内容（默认有，无需再加）
  3. tfoot:定义表格脚部，用此标签当前行的单元格合并会失效（colspan也不生效）
  4. <thead>
    <tr>
        <td></td>
       <td>第一节</td>
    </tr>
</thead>
<tfoot>
      <tr>
         <td>周二</td>
         <td colspan="2"                        align="center">数学</td>
          <!-- <td>物理</td> -->
       </tr>
</tfoot>

三、列表标签：

1. 无序列表：

  1. 清除默认格式（小圆点）：list-style: none;

  2. 无序列表的各个列表之间没有顺序之分，是并列的

  3. <ul></ul>标签之间只能嵌套<li></li>标签，其他标签和文字是不被允许的

  4. <li></li>标签之间相当于一个容器，可以容纳所有元素

  5. 三种排列方式：type=""; disc(默认实心小圆) spuare circle空心小圆

  6. 语法格式：

    <ul type="1" start="2" reversed>
<li>列表项</li>
<li>列表项</li>
...
</ul>

2. 有序列表：

  1. 清除默认格式（小圆点）：list-style: none;

  2. <ol></ol>标签之间只能嵌套<li></li>标签，其他标签和文字是不被允许的

  3. <li></li>标签之间相当于一个容器，可以容纳所有元素

  4. type显示列表的排列内容 默认为1

  5. start 可以改变列表的开始项（start只能写数字）

  6. reversed 反向排列

  7. 语法格式：

    <ol>
<li>列表项</li>
<li>列表项</li>
...
</ol>

3. 自定义列表：

  1. <dl></dl>标签之间只能包含<dt></dt> 和 <dd></dd>标签

  2. <dt>和<dd>个数没有限制，一般是一个<dt>对应多个<dd>

  3. 语法格式：

    <dl>
<dt>列表项</dt>
<dd>列表项</dd>
...
<dt>列表项</dt>
<dd>列表项</dd>
​
...
</dl>

四、表单标签：

1. 表单构成：表单域、表单元素、提示信息

1. 表单域：

  1. 可以理解为给表单划分一个区域盒子

  2. <form></form>标签用于定义表单域

  3. <form>会把它范围内的表单元素信息提交给服务器

  4. 语法格式：

    <form action = ＂url地址＂ method = ＂提交方式＂ name = ＂表单域名称＂>
各种表单元素控件
</form>
Action：用于指定接收并处理表单数据的服务器程序的url地址
Method：用于设置表单数据的提交方式，get/post
Name：用于指定表单的名称，以区分同一页面中的多个表单域
<!-- action 是链接 -->
<!--^ 点击浏览选择提交位置，可以把数据提交到另一个页面，还可以提交到后台。 -->
<!--^ method 是方法 -->
<!--^ method是方法，有get和post两种，各有所长。就是内容填好后提交需要一个方法，是获取你的内容还是传递你的内容。 -->
<!--^ get:明文提交，快速，但不安全，不能提交大数据 -->
<!--^ post:密文，安全，可以提交大数据 -->

2. 表单元素<input />：

  1. <input type = ＂属性值＂/>为单标签

  2. type属性设置不同的属性值，可以指定不同的控件

    1. button：定义可点击按钮（多数情况下，通过JS启动脚本）value 定义按钮名
    2. checkbox：定义复选框
    3. file：定义输入字段和浏览按钮，供文件上传
    4. hidden：定义隐藏的输入字段
    5. image：定义图像形式的提交按钮
    6. color ：颜色选择器
    7. number ：计数器，step 设置单次计量 ，可以为负数
    8. range ：进度条, 可以用value 设置初始值，默认是50（0-100）
    9. week ：周选择器（默认选中当前天所在的周）
    10. time ：时间选择器
    11. date ：日期选择器
    12. datetime-local ：日期时间选择器
    13. password：定义密码字段，该字段中的字符被掩码
    14. search ：搜索框，自带内容清除效果
    15. radio：定义单选按钮，要指定统一的name属性才可以达到单选的效果
    16. reset：定义重置按钮，重置会清除表单所有数据
    17. submit：定义表单提交按钮
    18. text：单行输入字段（一般用于搜索框）默认宽度20字符

  3. name属性：定义input元素的名称

  4. value属性：定义input元素的值

  5. checked ：默认选中项 checked="checked"

  6. disabled ：禁用 disabled="disabled"

  7. autofocus ：自动聚焦 autofocus= "autofocus"

  8. readonly ：只读 readonly= "readonly"

  9. required :必填项 required= "required"

  10. maxlength ：限制字符长度 maxlength="6"

  11. placeholder ：文字提示，输入内容时失效

  12. fieldset ：定义一组相关的表单元素，并使用边框包起来 <fieldset></fieldset>

    1. legend ：定义fieldset 的名称
    2. <legend>下午的内容</legend>

3. 表单元素<lable></lable>：

  1. 用于绑定一个表单元素，即当点击标签内的文本时，浏览器就会自动将焦点转到或选择对应的表单元素上，让用户更方便

  2. 语法格式：

    1. <lable for = ＂sex＂> 男 </lable>
    2. <input type = ＂radio＂ id = ＂sex＂ />
    3. 核心规则：for 和 id 属性相同

4. 下拉列表<select></select>：

  1. <select></select>标签中至少有一个<option></option>

  2. 在<option>中定义selected = ＂selected＂时，当前项即为默认选中项

  3. multiple ：多选

  4. optgroup ：用来给下拉选择项分组,配合label属性使用

    <select name="" id="">
                    <optgroup label="水果">
                        <option value="">香蕉</option>
                        <option value="">苹果</option>
                        <option value="" selected>水果之王榴莲</option>
                    </optgroup>
                    <optgroup label="蔬菜">
                        <option value="">西红柿</option>
                        <option value="">青椒</option>
                    </optgroup>
                </select>

  5. 语法格式：

    1. <select>
    <optgroup>
		<option>选项1</option>
		<option>选项2</option>
    </optgroup>
    <optgroup>
		<option>选项3</option>
		<option>选项4</option>
    </optgroup>
...
</select>

5. 文本域元素：<textarea></texrarea>：

  1. <textarea rows=＂3＂ cols=＂20＂>文本内容</textarea>
  2. cols=＂每行中的字符数＂，rows=＂显示的行数＂，实际开发中利用css来改变输入框的大小
  3. placeholder ：文字提示，输入内容时失效

五、内联框架标签

  1. iframe 内联框架 一个页面中可以显示另一个页面
  2. frameborder内联框架边框 默认值为0 需要显示边框把数值设大 auto自适应
  3. width 宽度 height 高度
  4. name 定义内联框架的名称 需要配合a标签使用 name 和 target 的属性值相同 a链接的页面会在内联框架中显示
<iframe src="./day_04_works.html" frameborder="1" name="pages" width="500px" height="500px"></iframe>
<a href="./day_03_works.html" target="pages">跳转第三天的作业</a>
avatar
文章
阅读
粉丝