HTML学习

最新推荐文章于 2022-02-05 13:36:41 发布

Daisy_Yejia

最新推荐文章于 2022-02-05 13:36:41 发布

阅读量405

点赞数

分类专栏： html 文章标签： html

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML标签学习

html基础

HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言: Hyper Text Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

DOCTYPE 声明了文档类型     <!DOCTYPE html> 在HTML5中也是描述了文档类型
位于标签 <html>  与 </html> 描述了文档类型
位于标签 <body> 与 </body> 为可视化网页内容
位于标签 <h1> 与 </h1> 作为一个标题使用
位于标签 <p> 与 </p> 作为一个段落显示 ---paragraph

HTML 属性

这里写图片描述

标签分类：

html页面标题标签： title

标题标签：h （header）
HTML 标题（Heading）是通过 h1 - h6 标签来定义的.
h是英文header标题的缩写，标题无处不在，它的应用范围十分广泛：网站结构、写作文、PPT等。h1是主标题，h2是副标题，h3、h4、h5、h6依次递减字体的大小。

段落标签：p （paragraph）
HTML 段落是通过标签 p 来定义的，P是英文paragraph段落的缩写，经常被用来创建一个段落，就和你写作文一样

链接标签：a （anchor）
HTML 链接是通过标签 a 来定义的.a标签，也叫anchor（锚点）元素，既可以用来链接到外部地址实现页面跳转功能，也可以链接到当前页面的某部分实现内部导航功能
target属性：定义被链接的文档在何处显示
id属性：可用于在一个HTML文档中创建书签标记
href属性：用于配置目标链接

普通的链接：<a href="https://www.w3cschool.cn/html/链接地址">链接文本</a>
图像链接： <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a> 
邮件链接： <a href="https://www.w3cschool.cn/html/mailto:webmaster@example.com">发送e-mail</a>
书签： <a id="tips">
提示部分</a> <a href="https://www.w3cschool.cn/html/html-quicklist.html#tips">跳到提示部分</a>

图片标签： img （image）
HTML 图像是通过标签 img来定义的。使用img元素来为你的网站添加图片，使用src属性指向一个图片的具体地址
src（source）：指向服务器的资源的地址
alt属性：用来为图像定义一串预备的可替换的文本
height：定义图片高度
width：定义图片宽度
align：对齐
usemap：利用映射，map标签利用name属性接收映射动作

<img src="URL" alt="替换文本" height="42" width="42">

换行标签：br（break）
换行

格式化文本标签：

<b>：加粗（black）
<i>：斜体（italic）
<code>：电脑自动输出
<sub>：下标
<sup>：上标
<b>粗体文本</b>
 <code>计算机代码</code>
 <em>强调文本</em>
 <i>斜体文本</i>
 <kbd>键盘输入</kbd> 
 <pre>预格式化文本</pre>
 <small>更小的文本</small>
 <strong>重要的文本</strong>
 <abbr> （缩写）
 <address> （联系信息）
 <bdo> （文字方向）
 <blockquote> （从另一个源引用的部分）
 <cite> （工作的名称）
 <del> （删除的文本）
 <ins> （插入的文本）
 <sub> （下标文本）
 <sup> （上标文本）

头部标签：

<head>：包含所有头部内容，在头部内容中还包含其他标签
<title>：定义HTML文档的标题
<base>：定义所有默认链接
<meta>：提供了HTML文档的meta标记,标签描述了一些基本的元数据
<link>：标签定义了文档与外部资源之间的关系，标签通常用于链接到样式表
<style>：标签定义了HTML文档的样式文件引用地址，元素中你需要指定样式文件来渲染HTML文档，text/css
<script>：标签用于加载脚本文件，如： JavaScript

表格标签：table

<table> 定义表格
<th>    定义表格的表头

**<tr>  定义表格的行**
**<td>  定义表格单元**

<caption>   定义表格标题
<colgroup>  定义表格列的组
<col>   定义用于表格列的属性
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚

列表标签：有序（ol）/无序（ul）

<ol>    定义有序列表
<ul>    定义无序列表
<li>    定义列表项
<dl>    定义列表
<dt>    自定义列表项目
<dd>    定义自定义列表的描述

区块标签：div、span

HTML <div> 元素
HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

<div style="color:#0000FF">
  <h3>这是一个在 div 元素中的标题。</h3>
  <p>这是一个在 div 元素中的文本。</p>
</div>*强调内容*

HTML <span> 与元素
HTML <span> 元素是内联元素，可用作文本的容器
<span> 元素也没有特定的含义。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。   
<p>
我的母亲有 
<span style="color:blue;font-weight:bold">蓝色</span> 
的眼睛，我得父亲有
<span style="color:darkolivegreen;font-weight:bold">碧绿色</span> 
的眼睛。
</p>

表单标签：form

<form>  定义供用户输入的表单
<input> 定义输入域
    type="password"，定义密码
    type="radio", 定义了表单单选框选项
    type="checkbox", 定义了复选框
    type="submit", 定义了提交按钮
<textarea>  定义文本域 (一个多行的输入控件)
<label> 定义了 <input> 元素的标签，一般为输入标题
<fieldset>  定义了一组相关的表单元素，并使用外框包含起来
<legend>    定义了 <fieldset> 元素的标题
<select>    定义了下拉选项列表
<optgroup>  定义选项组
<option>    定义下拉列表中的选项
<button>    定义一个点击按钮
<datalist>New   指定一个预先定义的输入控件选项列表
<keygen>New 定义了表单的密钥对生成器字段
<output>New 定义一个计算结果

举例：

    <form action="demo_form.php" method="post/get">
    <input type="text" name="email" size="40" maxlength="50"> 
    <input type="password"> 
    <input type="checkbox" checked="checked"> 
    <input type="radio" checked="checked"> 
    <input type="submit" value="Send"> 
    <input type="reset"> 
    <input type="hidden"> 
    <select> 
    <option>苹果</option> 
    <option selected="selected">香蕉</option> 
    <option>樱桃</option> 
    </select>
    <textarea name="comment" rows="60" cols="20">
    </textarea> 
    </form>

框架标签：Iframe
src：链接地址
width：框架宽度
height：框架高度
frameborder：是否有边框
name：定义名字，利用name进行绑定定义

颜色值：color value
1.颜色十六进制 #000000-#FFFFFF
2.RGB模式（0，0，0）-（255，255，255）
3.颜色名：red，blue等

脚本标签：script

<script> 标签用于定义客户端脚本，比如 JavaScript。
<script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。
JavaScript 最常用于图片操作、表单验证以及内容动态更新。

HTML实体字符

这里写图片描述

插件标签：object或embed
建议用embed（html5支持）

视频标签：video
例子：

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240">
  </object> 
</video>

HTML 样式- CSS
CSS（Cascading Style Sheet）可译为“层叠样式表”或“级联样式表”，它定义如何显示 HTML 元素，用于控制Web页面的外观。通过使用CSS实现页面的内容与表现形式分离，极大提高了工作效率。样式存储在样式表中，通常放在部分或存储在外部CSS文件中。作为网页标准化设计的趋势，CSS取得了浏览器厂商的广泛支持，正越来越多的被应用到网页设计中去。
网页现在的新标准是W3C。目前的模式是html+css+javascript，如何理解呢，就是html是网页的结构，CSS是网页的样式，javascript是行为。结构就是盖房子先要把结构建出来，然后用CSS来装饰。其实你在用dreamweaver做网页时就已经用到了CSS，比如你用DW的属性面板来设置一个字的字体、颜色和大小，当你选好后，就会自动生成一个.style1的红色代码，在之间不知道你注意过没有，这就是CSS。
1.外部样式表就是新建一个文档，里面全写css，然后再通过 link 插入到html 代码中
2.内部样式表就是直接在HTML文档中写css代码，写在head中用style包围
3.内联样式就是直接在标签里写样式，形如 div style = “color:#000” /div