FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [View Raw Code]   [Original HTTPS Page]

Notes/python-basic-notes/python-days/Day_26.md at master · We2one/Notes · GitHub

/ Notes Public

Breadcrumbs

  1. Notes
  2. python-basic-notes
  3. python-days

Day_26.md

Latest commit

 

History

History
271 lines (192 loc) · 12.1 KB

Breadcrumbs

  1. Notes
  2. python-basic-notes
  3. python-days

Day_26.md

File metadata and controls

271 lines (192 loc) · 12.1 KB
Raw

HTML

HTML 语言书写格式

HTML 主要由内容和标签组成

  • 内容 : 位于页面上显示的数据

  • 标签 : 通用格式 <特定字母>

    1. 双标签 : <特定字母><特定字母> 或者 <特定字母></特定字母>
    2. 单标签 : <特定字母> 或者 <特定字母/>

  • 标签属性 : <特定字母 key1='value1' key2='value2'></特定字母> (一般不用,使用 CSS 代替负责控制标签样式)

  • 元素 : 标签 + 内容

HTML 基本结构

DOCTYPE 声明
  • <!DOCTYPE html> : 声明是 HTML 5 页面
html 标签
  • 根标签
  • <html lang='en'></html> : 针对浏览器语言的辅助
head 标签
  • 主要编写页面的设置信息
  • 引入其他语言文件
  • 一般 head 中编写的内容不会显示在页面
  • <meta charset='utf-8'> : 定义页面编码格式
  • <title>页面标题</title> : 设置标题内容
body 标签
  • 主体标签
  • 在页面上显示所写的内容

文档书写规范

后缀名
  • 文档后缀名为 .html .htm(旧式写法)
  • .HTML 不区分大小写,建议使用小写 .html
标签
  • 标签 不区分大小写,建议使用小写
  • 双标签必须要有闭合标签
  • 标签中属性值使用 "" 包裹 (不使用也可以,但是尽量使用)

HTML 常用标签

标题标签
  • h1 - h6 : 字体大小逐级递减
  • 标题标签默认是有样式的(字体样色,大小,是否加粗...)
  • 标题标签默认独占一行
段落标签
  • <p>内容</p> : 没有默认的样式，需要自己动手设置
  • 默认有间距,独占一行
  • 方便代码阅读
HTML 常用占位符
符号 表示
&nbsp; &#160; 英文半角空格不换行
&#12288; 中文全角空格
&ensp; #8194; 半角空格(半个中文宽度，不受字体影响)en是字体排印学的计量单位，为em宽度的一半
&emsp; #8195; 全角空格(一个中文宽度，不受字体影响)em是字体排印学的计量单位
&#8197; 四分之一全角空格
&#32; 英文半角空格
  • 注意 : 源码中多个空格、换行 会解析成一个空格
实体标签
符号 表示
&lt;或&#60 "<" 小于
&gt; ">" 大于
&amp; "&" 和
&quot; " 引号
&apos; ' 撇 (单引号)
&times; "X" 乘
&divide; "÷" 除
&trade; ™
&yen 元
  • 使用实体标签代替会与 HTML 代码冲突的内容
  • 表示层级关系，可以使用
换行标签

  • <br> 或 </br> : 换行,单标签

  • <hr> 或 <hr/> : 独立的一行线,水平线

    • 实际开发时为标签设置边框来替代水平线效果
文本修饰标签
标签 描述 特点
<i></i> 斜体标签 不同语态或语气的一段文本, eg: "斜体"
<em></em> 强调斜体标签 对内容文本进行突出强调, eg: "斜体"
<b></b> 粗体标签 突出显示关键字,侧重使用目的,不带任何感情色彩, eg: "粗体"
<strong></strong> 强调粗体标签 代表内容强烈的重要性、严重性、紧急性, eg: "强调粗体"
<u></u> 下划线 eg: "下划线"
<del></del> 删除线 eg: "删除线"
div 和 span 标签
  • 盒子布局
    • <div></div> : 盒子模型的元素之一,在页面布局中使用,独占一行
    • <span></span> : 无默认样式标签,通常配合 CSS 修改部分字体样式,随内容大小变化,不会改变内容
图片标签

  • <img> : 引入本地图片或者网络图片,单标签

    <img src="图片路径" alt="描述信息" title="提示信息" height="" weigth="">
    属性 介绍 说明
    scr="图片路径" 图片的链接地址,可以为绝对路径、相对路径 绝对路径: 当前文件位置
    相对路径: 图片在本地磁盘相对于代码位置的位置
     1. "/" : 根目录
     2. "./" : 当前路径
     3. "../" : 上一级路径
    alt="描述信息" 图片的描述信息 图片加载失败时作为替代内容出现
    title="提示信息" 提示信息/文件标题 鼠标在文件悬浮时显示的信息
    height="" weight="" 图片高宽  1. 单独设置文件高度或宽度时,HTML会对图片等比缩放,图片不会变形
     2. 高度和宽度的设置单位通常是像素(px),也可以使用百分比,需要借助 样式
链接标签

  • <a></a> : 链接格式

    <a href="跳转地址" target="_blank"></a>
    属性 介绍 描述
    href="跳转地址" 超链接跳转地址  1.href="./2.html" 或 href="#" : 跳转到本地其他页面 或 锚点跳转回本页面
     2.href="url链接" : 跳转到其他网页页面
    target="" 打开链接方式  1. 不写,默认当前页面打开跳转的新页面
     2. _blank , 新窗口加载跳转页面

  • 页面内 锚点 跳转

    • 锚点 : 定位,通过 a 标签的 href 属性关联元素的 id 属性值

      <a href="#item1">跳转id="item1"的位置</a>
<div id="item1">一楼</div>

  • 跳转至指定页面指定位置

    <a href="./2.html#item1">2.html 页面的id="item1"的位置</a>
<a href="URL#item1">指定 URL 页面的id="item1"的位置</a>
列表标签

  1. 无序列表 : <ul></ul> 标签定义

    • <li type=""></li> 列表项

      type 属性 显示样式
      type="disc" 实心圆点
      type="circle" 空心圆点
      type="square" 实心方块

  2. 有序列表 : <ol></ol> 标签定义

    • <li type="" start=""></li> 列表项,type：修改列表开头默认标识

      type 属性 显示样式
      type="a" 代表小写字母
      type="i" 代表小写罗马数字
      type="A" 代表大写字母
      type="l" 代表大写罗马数字
      type="1" 代表数字,默认

    • start : 指定从第几个标识符开始

  3. 自定义列表

    标签 说明
    <dl></dl> 定义列表
    <dt></dt> 定义列表中项目
    <dd></dd> 描述列表中项目
表格标签
  • <table></table> : 声明一个表格,表格属性
    1. cellspacing : 设置单元格与单元格之间的间距
    2. cellpadding : 设置表格边框与内容之间的间距
    3. width : 设置整个表格的宽度
    4. heigth : 设置整个单元格宽度
    5. caption : 定义表格标题,必需在 table 声明后,只可以跟一个 (实际: 表格上边定义一行居中文字)
  • <tr></tr> : 声明行
    1. align : 设置水平对齐方式,默认靠左对齐 (left, right, center)
    2. valign : 设置垂直对齐方式,默认处于居中 (middle, top, bottom)
  • <td></td> 与 <th></th> : 声明列
    1. align : 设置水平对齐方式,默认靠左对齐 (left, right, center)
    2. valign : 设置垂直对齐方式,默认处于居中 (middle, top, bottom)
    3. th 是一类特殊的 td,通常用来写字段名称,对文字自动居中加粗
  • 单元格合并
    1. colspan : 跨列合并 (水平合并) 设置当前列占几个列宽度
    2. rowspan : 跨行合并 (垂直合并) 设置当前列占几个行的高度
  • 注意
    1. 如果给某一列设置了高度,那么当前行所有的高度都会发生变化
    2. 如果给某一列设置了宽度,那么当前列所有的宽度都会发生变化
表单标签

  1. <form action="" method="" enctype=""></form> 表单域

    属性 描述
    action="" 指定表单域中数据的提交地址,不填写默认为当前地址
    method="" 指定数据的提交方式,常用的有get和put两种
    enctype="" 提交数据格式,对标单数据进行编码

  2. <input type="text"> : 默认是一个文本框,但可以通过 type 属性指定输入控件类型

    type 参数 描述
    type="text" 默认,普通文本输入框
    type="password" 密码输入框,输入内容以·代替,不可见
    type="radio" 单选框,同一组单选 name 属性的值必须相同,必须设置默认值
    type="checkbos" 复选框,同一组复选 name 属性的值必须相同,必须设置默认值
    type="file" 文件框,用于上传文件
    type="hidden" 隐藏域,不显示,可以提交,多用于后台校验
    type="submit" 提交按钮,自动提交表单里的数据,没有后台没有效果,需要 value 参数来定义按钮上的内容
    type="button" 按钮
    type="reset" 重置按钮,清空当前表单所有输入

  3. <name></name> : 向后台提交数据时以键值对方式提交

    • name 属性的值作为键,用户输入的内容作为值,name 属性必须存在

  4. <select name="" id="">option : 下拉选项框

    • name 属性设置给 select，必须设置默认值 value设置给 option

  5. <textarea name="" id="" cols="30" rows="10"></textarea> : 多行文本输入框

    • 标签内部内容是值

  6. 控件属性

    • placeholder : 提示信息
    • checked : 单选和多选默认选中状态
    • selected : 下拉框默认选中状态
    • readonly : 只读
    • disabled : 禁用

标签分类

单标签 双标签
<!DOCTYPE html>, <meta charset="UTF-8">, <br>, <hr>, <img>, <input> <html></html>, <head></head>, <body></body>, <title></title>, <h1-h6></h1-h6>, <p></p>, <span></span>, <b></b>, <i></i>, <em></em>, <strong></strong>, <u></u>, <del></del>, <a></a>, <table></table>, <canption></canption>, <tr></tr>, <td></td>, <th></th>, <ul></ul>, <li></li>, <ol></ol>, <dd></dd>, <dt></dt>, <dl></dl>, <form></form>, <button></button>, <select></select>, <textarea></textarea>, <div></div>
Back | FazBrowse Home | New Git URL