HTML基础笔记
文章目录
- 1.HTML
- 2.HTML基础
- 3.HTML元素
- 4.HTML属性
- 5.文本格式化
- 6.HTML头部
- 7.HTML-CSS
- 8.HTML表格&列表
-
- 8.1表格
- 8.2列表
- 9.HTML区块
- 10.HTML表单
- 11.HTML框架
- 12.HTML脚本
- ref
1.HTML
- 超文本标记语言(HyperText Markup Language), 一种用于创建网页的标记语言(一套标记标签markup tag), 非编程语言
- HTML文档包含HTML标签与文本内容, 也叫web页面
- 后缀
.html,.htm, 无区别 - 标签: 成对出现, 开放标签, 闭合标签
- 元素: 一个HTML元素包含了开始表亲啊, 结束标签
- 历史: HTML(1991)->XHTML5(2013)
- HTML实例
: 声明为HTML5文档, 有助于浏览器正确显示网页, 不区分大小写: HTML页面根元素: 包含文档的元(meta)数据, 如定义网页编码格式utf-8 / GBK</code>: 文档标题</li> <li><code><body></code>: 可见的页面内容</li> <li><code><h1></code>: 定义一个大标题</li> <li><code><p></code>: 定义一个段落</li> </ul> </li> </ul> <h1>2.HTML基础</h1> <ul> <li>标题: 通过<code><h1>-<h6></code>定义 <ul> <li>标题通过<code><h1>-<h6></code>定义, <code><h1></code>定义最大标题主标题(最重要)-><code><h2></code>次重要, 以此类推</li> <li>浏览器会自动在标题前后添加空行</li> <li>确保标题标签仅用于标题, 不能仅为了生成粗体/大号文本而使用</li> <li>搜索引擎使用标题为网页结构/内容编制索引</li> </ul> </li> <li>段落: 通过<code><p></code>定义 <ul> <li>浏览器自动在段落前后添加空行, <code><br/></code>不产生新段落的情况下换行</li> <li>HTML被显示的确切效果不可确定, 屏幕大小/窗口调整会导致不同结果, 添加额外空行/空格没有效果, 所有连续空格,空行(换行)显示为一个空格</li> </ul> </li> <li>链接: 通过<code><a></code>定义, 在<code>href</code>属性中指定链接的地址 <ul> <li>可以是字/词/图, 点击后跳转到新的文档/当前文档某个部分</li> <li>target属性定义被链接文档在何处显示, 新窗口打开<code>target="_blank"</code></li> </ul> </li> <li>图像: 通过<code><img></code>定义, <code>在src</code>, <code>width</code>, <code>height</code>中指定名称, 尺寸 <ul> <li>空标签, 有属性, 无闭合</li> <li>alt属性: 无法载入图像时的替换文本</li> </ul> </li> </ul> <pre><code class="prism language-HTML"><h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <p>段落1</p> <p>段落2</p> <a href="https://www.runoob.com/html/html-basic.html">链接1</a> <img decoding="async" src="https://www.runoob.com/wp-content/uploads/2013/06/02A7DD95-22B4-4FB9-B994-DDB5393F7F03.jpg" width="256" height="48"> <br /><!-- 换行 --> <hr /><!-- 定义水平线, 注释 --> </code></pre> <h1>3.HTML元素</h1> <ul> <li>HTML文档由HTML元素定义, 多数元素可嵌套, HTML文档由相互嵌套的元素组成</li> <li>以<strong>开始标签</strong>起始, 以<strong>结束标签</strong>终止</li> <li><strong>元素内容</strong>是开始标签与结束标签之间的内容</li> <li>某些HTML有<strong>空内容empty content</strong>, 空元素在开始标签中进行关闭, 如<code><br></code>(以后正确用法是<code><br/></code>)</li> <li>大多数HTML元素可拥有<strong>属性</strong></li> </ul> <h1>4.HTML属性</h1> <ul> <li>HTML元素可设置属性, 属性可在元素中添加附加信息, 一般描述于开始标签</li> <li>形式: 属性总以名称/值对形式出现, 如<code>name="value"</code>, 属性,属性值对大小写不敏感</li> <li>引用: 属性值始终包括于引号内, 单双引号均可, 若属性值本身有双引号, 最外层要用双引号</li> <li>常用 <ul> <li><code>class</code>: 为html元素定义一个/多个类名(classname)</li> <li><code>id</code>: 定义元素的唯一id</li> <li><code>style</code>: 规定元素的行内样式(inline style)</li> <li><code>title</code>: 描述元素的额外信息(作为工具条使用)</li> </ul> </li> </ul> <h1>5.文本格式化</h1> <pre><code class="prism language-HTML"><b>定义粗体文本</b> <em>定义着重文字</em> <i>定义斜体字</i> <small>定义小号字</small> <strong>定义加重语气</strong> <sub>定义下标签</sub> <sup>定义上标签</sup> <ins>定义插入字(下划线)</ins> <del>定义删除字(横线)</del> <code>//定义计算机代码 print("Hello World")</code> <samp>//定义计算机代码样本 print("Hello World")</samp> <kbd>定义键盘码</kbd> <var>定义变量 a</var> <pre>定义预格式文本 保留空格和换行符 文本为等宽字体 </pre> <abbr title="某些浏览器中, 鼠标移到缩略词上时, 可展示完整">定义缩写</abbr> <address> 定义文档作者/所有者联系信息, 常被包含在<footer>元素其他信息中 </address> <bdo dir="rtl">定义方向</bdo> <blockquote cite="定义长引用">这是一个超长的文本这是一个超长的文本这是一个超长的文本这是一个超长的文本这是一个超长的文本这是一个超长的文本这是一个超长的文本这是一个超长的文本</blockquote> <q>定义短引用语(加了引号)</q> <cite>定义引用</cite> <dfn>定义一个定义项目</dfn> </code></pre> <h1>6.HTML头部</h1> <ul> <li><code><head></code>元素包含了所有头部标签元素, 可插入脚本scripts, 样式文件CSS, meta信息 <ul> <li>可添加: <code><title></code> <code><style></code> <code><meta></code> <code><link></code> <code><script></code> <code><noscript></code> <code><base></code></li> </ul> </li> <li><code><title></code>标签定义了不同文档的标题, 必需, <ul> <li><code><title></code>元素, 定义了浏览器工具栏标题, 网页添加到收藏夹中时显示在收藏夹的标题, 显示在搜索引擎结果页面的标题</li> </ul> </li> <li><code><base></code>描述了基本的链接地址/链接目标, 作为HTML文档中所有链接标签的默认链接</li> <li><code><link></code>定义了文档与外部资源之间的关系, 通常用于链接到样式表</li> <li><code><style></code>定义了HTML文档样式文件引用地址, 也可直接添加样式来渲染HTML文档</li> <li><code><meta></code>描述基本元数据, 不显示但被解析 <ul> <li>常指定网页描述, 关键词, 文件最后修改时间, 作者, 其他元数据</li> </ul> </li> <li><code><script></code>加载脚本文件, 如Javascript</li> </ul> <pre><code class="prism language-HTML"><!DOCTYPE html> <html> <head> <base href="https://www.runoob.com/html/html-head.html" target="_blank"> <link rel="stylesheet" type="text/css" href="mystyle.css"> <style type="text/css"> body { background-color:yellow; } p{ color:blue } </style> <meta name="keywords" content="为搜索引擎定义关键词"> <meta name="description" content="为网页定义描述内容"> <meta name="author" content="定义网页作者"> <meta http-equiv="refresh" content="30"> <!-- 每30秒刷新页面 --> </head> </html> </code></pre> <h1>7.HTML-CSS</h1> <ul> <li>CSS(Cascading Style Sheets)用于渲染HTML元素标签的样式, HTML4开始使用, 为更好渲染HTML元素而引入</li> <li>添加方式 <ul> <li>内联样式: HTML元素中使用style属性</li> <li>内部样式表: HTML文档头部<code><head></code>区域使用<code><style></code>属性包含CSS</li> <li>外部引用: 使用外部CSS文件(最好的方式)</li> </ul> </li> <li>内联样式: 特殊样式需要应用到个别元素<pre><code class="prism language-HTML"><body style="background-color:yellow;"> <h2 style="background-color:red;">红色背景的标题</h2> <p style="font-family:arial; background-color:green; font-size:20px;">绿色背景的段落</p> <p style="background-color:yellow; text-align:center;">居中对齐的段落</p> </body> </code></pre> </li> <li>内部样式表: 单个文件需要特别样式<pre><code class="prism language-HTML"><head> <style type="text/css"> body {background-color:yellow;} p{color:blue;} </style> </head> </code></pre> </li> <li>外部样式表: 样式被许多页面用到, 可更改一个文件来改变整个站点外观</li> </ul> <pre><code class="prism language-HTML"><head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> </code></pre> <h1>8.HTML表格&列表</h1> <h2>8.1表格</h2> <ul> <li>表格(由<code><table></code>标签定义), 每表格若干行(由<code><tr></code>标签定义), 每行分若干单元格(由<code><td></code>标签定义)</li> <li>数据单元格可包含文本, 图片, 列表, 段落, 表单, 水平线, 表格等</li> <li>边框属性<code>border</code>, 定义才显示</li> <li>表头由<code><th></code>标签定义, 多数浏览器显示为粗体居中的文本</li> </ul> <pre><code class="prism language-HTML"><table border="5"> <tr> <th>0列</th> <th>1列</th> <th>2列</th> </tr> <tr> <td>0,0</td> <td>0,1</td> <td>0,2</td> </tr> <tr> <td>1,0</td> <td>1,1</td> <td>1,2</td> </tr> <tr> <td>2,0</td> <td>2,1</td> <td>2,2</td> </tr> </table> </code></pre> <h2>8.2列表</h2> <pre><code class="prism language-HTML"><ul> <li>列表项1</li> <li>列表项2</li> </ul> </code></pre> <table> <thead> <tr> <th>标签</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td><code><ol></code></td> <td>定义有序列表</td> </tr> <tr> <td><code><ul></code></td> <td>定义无序列表</td> </tr> <tr> <td><code><li></code></td> <td>定义列表项</td> </tr> <tr> <td><code><dl></code></td> <td>定义列表</td> </tr> <tr> <td><code><dt></code></td> <td>定义列表项目</td> </tr> <tr> <td><code><dd></code></td> <td>定义列表描述</td> </tr> </tbody> </table> <h1>9.HTML区块</h1> <ul> <li>HTML区块元素: 多数HTML元素定义为块级元素/内联元素 <ul> <li>块级元素在浏览器显示时常以新行开始/结束</li> <li><code><h1></code> <code><p></code> <code><ul></code> <code><table></code></li> </ul> </li> <li>HTML内联元素: 不以新行开始 <ul> <li><code><b></code> <code><td></code> <code><a></code> <code><img></code></li> </ul> </li> <li><code><div></code>元素, 块级元素, 可用于组合其他HTML元素的容器 <ul> <li>无特定含义, 但浏览器在前后显示折行</li> <li>若与CSS一起使用, 可对大的内容块设置样式属性</li> <li>常用于文档布局, 取代了使用表格定义布局的老式方法</li> </ul> </li> <li><code><span></code>元素, 内联元素, 可用作文本容器, 用来组合文档的行内元素 <ul> <li>无特定含义</li> <li>与CSS一同使用时, 可用于为部分文本设置样式属性</li> </ul> </li> </ul> <pre><code class="prism language-HTML"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>zzcc测试 测试用标题
学习一下
10.HTML表单
- HTML表单用于收集用户输入信息, 表示文档的一个区域, 包含交互控件, 将用户收集到的信息发送到Web服务器
- 表单是一个包含表单元素的区域, 如, 下拉列表select, 单选框radio-buttons, 复选框checkbox等
- 输入元素
: 输入类型由type属性定义, 常见类型:- 文本域textarea:
标签设定, 在表单中键入字符, 数字等, 多数浏览器中文本域默认20字符宽 - 密码字段:
标签定义, 不明文显示 - 单选按钮: 定义单选框
- 复选按钮: 定义复选框
- 提交按钮: 定义提交按钮, 单机确认时表单内容传送到服务器, 动作属性
action定义了服务端文件名, 对接收到的用户输入数据进行相关处理- 如下点击确认后, 输入数据会传送到text.php文件, 该页面显示输入结果
- method属性用于定义表单数据提交方式
post:HTTP POST方法, 表单数据包含在表单体内发给服务器, 用于提交敏感数据, 用户名,密码等get: 默认值,HTTP GET方法, 表单数据附加在action属性的URL中, 以?为分隔符, 一般用于不敏感信息, 如分页等. 如https://www.runoob.com/?page=1, 此处page=1及get方法提交的数据
- 文本域textarea:
11.HTML框架
- 使用框架可在同一个浏览器窗口显示不止一个页面
, URL指向不同的网页
12.HTML脚本
- Javascript脚本让HTML页面有更强的动态和交互性, 常用于图片操作, 表单验证及内容动态更新
- 事件响应
点击试下
ref
菜鸟教程HTML 教程- (HTML5 标准)