没有一张图解决不了的事:https://www.processon.com/mindmap/5ccebc48e4b0841b844a23fb

1.网页中web 标准的三层组成?

W3C 万维网联盟

结构(HTML)、表现(CSS)、行为(JAVASCRIPT)

标签分类:

双标签

单标签

标签关系:

嵌套关系

并列关系

<html lang = 'zh-CN'>   语言种类

<mate charset = ''UTF-8>  字符集.万国码(各个国家都能显示页面的语言)

HTML 标签语义化

让结构跟清晰

排版标签

<h> 标题标签

<p> 段落标签

<hr/> 水平线标签

<br/> 换行

没有语义

<div></div>  一行只能放一个。。。

span            一行能放多个

文本格式化标签

i    斜体

strong  加粗

b       加粗

s          删除线

del      删除线

u     下划线

ins    下划线

标签属性

img

alt (不能显示图片时替换文本)

title   鼠标停留

width 宽度

height  高度

borde  边框( 在图片边 加上一个框)

a

内部链接

外部链接   加http

href    跳转目标  # (代表一个空)

target   self     _blank

a标签可以套img

路径

相对路径

../上一级目录

锚点定位

当点击某一个点,立即跳转到具体网页位置

<h3 id="two">第二集</h3>     具体定位的文本

<a href = "#two"> 链接文本 </a>     点击文本

<base target = "_blank">  设置所有的a标签属性都在新窗口打开

特殊字符

&nbsp

<div>&ls &ls<div>  小于号以后这样写

表格

显示,展示数据。才使用

<table>

  <thead><thead>

  <tbody><tbody>

</table>

<table>

  <caption><h3>表头</h3></caption>

  <tr>

    <th></th>

  </tr>
  <tr>

    <td></td>

  </tr>

</table>

表格的结构划分

<thead><thead>    用来定义表格头部 用来放标签之类的

<tbody><tbody>    用来定义表格主体

<tfoot></tfoot>     放表格脚注

表格属性

th表头单元格会加粗显示 

border = '1'   边框

width     宽

height   高

align    水平对齐方式   left   right   center.  不是表格中的数据 而是文档流中

cellspacing     单元格与单元格之间的距离

cellpadding     子和边框的距离

合并单元格

跨行合并

-

-

-
<td rowspan = '2'>照片</td> 

多余的单元格删除掉 

跨列合并

---------------

<td colspan = '3'>照片</td> 

多余的单元格删除掉 

列表标签

自由组合度更高

有序列表

<ol>

  <li></li>

</ol>

无序列表

<ul>

  <li></li>

</ul>

自定义列表

<dl>

  <dt>湖南</dt>

  <dd>长沙</dd>

  <dd>株洲</dd>

</dl>

表单

redio

checked=’checked‘ 默认选中

chekbox

checked=’checked‘ 默认选中

button

img 图片提交按钮

<input type = 'image' src = '#'><input/>

lable

<lable for='id'></lable>

获得输入光标焦点

不用双引号

HTML手稿的更多相关文章

  1. Git学习原版手稿

    手稿诞生记        Git学习的时候难免会有遗忘然后往复学习查看的过程,所以就形成了这个学习的手稿,记录了Git使用过程中的大部分命令,今天在清理的时候偶然看到了这些记录,而且最近也在写Git的 ...

  2. 几幅手稿讲解CNN

    学习深度神经网络方面的算法已经有一段时间了,对目前比较经典的模型也有了一些了解.这种曾经一度低迷的方法现在已经吸引了很多领域的目光,在几年前仅仅存在于研究者想象中的应用,近几年也相继被深度学习方法实现 ...

  3. React 手稿 - Component state

    Component state 实例: import React, { PureComponent } from 'react'; export default class extends PureC ...

  4. React手稿之 React-Saga

    Redux-Saga redux-saga 是一个用于管理应用程序副作用(例如异步获取数据,访问浏览器缓存等)的javascript库,它的目标是让副作用管理更容易,执行更高效,测试更简单,处理故障更 ...

  5. React手稿 - Context

    Context Context提供了除props之外的传参数的方式. Context是全局跨组件传递数据的. API React.createContext ``` const {Provider, ...

  6. React手稿之State Hooks of Hooks

    React Hooks React在16.7.0-alpha.0版本中提到了Hooks的概念,目前还是Proposal阶段. 官方也陈述,接下来的90%的工作会投入到React Hooks中. 从目前 ...

  7. iOS开发之功能模块--计算高度Demo探究手稿

    本篇记录关于计算文本高度和Label高度的代码,以备后期再探究: 首先是YouXianMing老师的工具类别: NSString+LabelWidthAndHeight.h // // NSStrin ...

  8. c#多线程生产者消费者(手稿)

    屋舍简陋,隔壁的娃娃哭了一晚,心中无恶意纯中性的想,有病就赶紧带孩子去看医生吧,能哭这么久估计孩子真的不舒服.

  9. 链接服务器"(null)"的 OLE DB 访问接口 "Microsoft.Jet.OLEDB.4.0" 返回了消息 "未指定的错误"。[手稿]

    消息 7302,级别 16,状态 1,第 1 行 无法创建链接服务器 "(null)" 的 OLE DB 访问接口 "Microsoft.JET.OLEDB.4.0&qu ...

  10. SQL Server 最小化日志操作解析,应用[手稿]

    Sql Server 中数据库在BULK_LOGGED/SIMPLE模式下的一些操作会采用最小化日志的记录方式,以减小tran log落盘日志量从而提高整体性能. 这里我简单介绍下哪些操作在什么样的情 ...

随机推荐

  1. 机器学习策略:详解什么时候该改变开发/测试集和指标?(When to change dev/test sets and metrics)

    什么时候该改变开发/测试集和指标? 有时候在项目进行途中,可能意识到,目标的位置放错了.这种情况下,应该移动的目标. 来看一个例子,假设在构建一个猫分类器,试图找到很多猫的照片,向的爱猫人士用户展示, ...

  2. 莫队算法(基础莫队)小结(也做markdown测试)

    莫队 基础莫队 本质是通过排序优化了普通尺取法的时间复杂度. 考虑如果某一列询问的右端点是递增的,那么我们更新答案的时候,右指针只会从左往右移动,那么i指针的移动次数是$O(n)$的. 当然,我们不可 ...

  3. docker/k8s常见错误处理

    启动docker失败,报错了 启动docker失败,报错了.Failed to load environment files: No such file or directory [root@mcwk ...

  4. ansible api调用及二次封装详解

    ansible 2.7调用 程序 import json from collections import namedtuple from ansible.parsing.dataloader impo ...

  5. linux 为普通用户配置sudo权限

    目录 一.关于sudo 二.sudo的工作过程 三.为普通用户配置sudo权限 3.1 方法一:把普通用户的附属组更改为wheel,使其具有sudo权限(推荐) 3.2 方法二:修改/etc/sudo ...

  6. MyBatis缓存模块源码分析

    优秀的ORM框架都应该提供缓存机制,MyBatis也不例外,在org.apache.ibatis.cache包下面定义了MyBatis缓存的核心模块,需要注意的是这个包中只是MyBatis缓存的核心实 ...

  7. AI实战 | 手把手带你打造校园生活助手

    大家好,我是努力的小雨.最近,我开始将我的经验逐渐分享到B站,希望能够帮助大家通过扣子助手真正解决一些问题.最近有粉丝提出了一个需求,为了满足大家的期待,我已经制作了视频,详细介绍了这个助手的搭建思路 ...

  8. webview2 示例 Samples Selenium

    https://github.com/MicrosoftEdge/WebView2Samples https://learn.microsoft.com/zh-cn/microsoft-edge/we ...

  9. 搭建单机版伪分布式Hadoop+Scala+spark

    搭建单机版伪分布式Hadoop+Scala+spark 修改ip [root@master ~]# nmcli connection add ifname ens32 con-name ens32 a ...

  10. 第二次大作业BLOG心得

    (1)前言: 知识点: ①ArrayLsit的知识点: ArrayList 是 Java 中的动态数组实现,它提供了自动调整大小的功能,可以根据需要动态增长或收缩. ArrayList 可以存储任意类 ...