HTMl

2019年9月7日 89次阅读 来源: weiyuu

结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

HTML 代码由包含在尖括号中的字符组成。这些成为 HTML 代码元素。
通常由两个标签组成：一个起始标签个一个结束标签（结束标签要多一个斜杠）。
<html></html> 位于起始标签<html> 和 </html> 之间的代码都是 HTML 代码。
<body></body> 位于 body 标签之间的代码都会显示在浏览器的主窗口中
<head></head> 包含有关这个页面的一些信息
<title></title> 是显示网页标题的标签
<meta> 使用meta，我们可以定义页面编码语言、搜索引擎优化、自动刷新并指向新的页面、控制页面缓冲、响应式视窗等

总结

  • HTML 页面是文本文档
  • HTML 使用的标签（尖括号及其字符）位包含在其中的内容提供结构信息
  • 标签经常与元素互换使用
  • 标签通常成对出现。
  • 标签可以附带特性。特性由特性名称和特性值组成

文本

标题

<h1>主标题</h1>
<h2>次标题</h2>

<h1> 至 <h6>
<h1> 用在主标题上
<h2> 用在子标题上

段落

<p>要添加的段落</p>

<p> ：在成段的文字两端分别添加起始标签<p> 和结束标签 </p> 构成了HTML中的段落

默认情况下，浏览器在显示段落时会另起一行并于后续段落保持一定的距离

粗体/斜体

<b>要加粗的文本</b>

无其他特殊含义，但是它可以在外观上将其中的文字以粗体展示出来

<i>要倾斜的文本</i>

无其他特殊含义，但是它可以在外观上将其中的文字以倾斜展示出来

上标/下标

<sup>上标字符</sup>

用来记作上标的字符，像22

<sub>要倾斜的文本</sub>

用来记作下标的字符。通常用在脚注、化学式中：H2O

空白

当浏览器遇到两个或者两个以上的空格时，只将其显示位一个空格，换行同样是此问题，这一特性称为白色空间折叠

换行符/水平线

<br/>：换行符

<hr/>：水平线符

加粗/强调

<strong>:作用是表示内容十分重要，在浏览器中显示粗体
<em>：起强调作用，能够改变语句的含义，在浏览器中默认显示斜体

引用

<blockquote>：用来标记那些会占用一整段的较长的引用。通常浏览器会对此元素中的内容进行缩进。
<q>：用来标记段落中较短的引用

缩写词/首字母缩写词

<abbr>：缩写词/缩写字母可以使用此元素，其起始标签中的title特性用来指定相应的词汇的完整形式。

引文/定义

<cite>：当引用作品时（书籍、电影、研究报告）可以使用此元素
<dfn>：解释新术语时，可以用此元素

其他

<address>：设计者的联系方式
<ins>：显示已经插入到文档中的内容
<s>：表示不准确、不相关却不应当删除的内容
<del>：表示已经从文档中删除的内容

列表

有序列表

定义

有序列表是指为其中的每个项目编号的列表。

<ol>
      <li>项目1</li>
      <li>项目2</li>
      <li>项目3</li>
      <li>项目4</li>
      <li>项目5</li>
  </ol>

可以通过list-style-type css属性设置编号类型

无序列表

定义

无序列表是以点状（默认）项目符号作为开头的列表

<ul>
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
    <li>项目4</li>
    <li>项目5</li>
</ul>

可以通过list-style-type css属性设置编号类型

定义列表

定义

定义列表是由一系列术语及其定义组成的列表

<dl>
    <dt>被定义的术语</dt>
    <dd>定义</dd>
</dl>

嵌套列表

<ul>
    <li>
    <ul>
        <li></li>
        <li></li>
    </ul>
    </li>
    <li></li>
    <li></li>
</ul>

总结

  • HTML 中有三种列表：有序、无序、定义列表
  • 有序列表使用数字编号
  • 无序列表使用项目编号
  • 定义列表用来定义专业属于
  • 列表可以嵌套在其他列表中​

链接

作用

  • 跳转到另一个网站
  • 跳转到另一网页
  • 指向同一网页内的另一个位置
  • 在新的窗口打开链接

<a>:有一个重要的特性：href ，该特性的值设定了链接的目标。即点击该连接时所到达的页面地址。
默认情况下是蓝色并带有下划线的样式。

URL：全称是”Uniform resource locator（统一资源定位器）“
绝对 URL：以网站的域名开头，域名后面可以指定具体的页面路径，没指明具体路径将显示网站主页。
相对 URL：若是同一网站的其他页面，可使用相对路径，不用指定网站的域名。

Email 链接

<a href="mailto:xxxxx@xxx.com">email johnson </a>

新窗口打开链接

<a href="https://www.baidu.com" target="_blank"></a>

链接到当前页面的某个位置

     <h1 id="top">标题1</h1>
    <a href="#arc_shot">arc_shot</a>
    <a href="#interlude">interlude</a>
    <a href="#prologue">prologue</a>
    <h2 id="arc_shot">arc shot</h2>
    <p>fujashfujaskhfjkasdfjask</p>
    <h2 id="interlude">interlude</h2>
    <p>dfahuifhfuisdhbfujkasbfujkdas</p>
    <h2 id="prologue">prologue</h2>
    <p>fhasdiufhasjduihfujasidfh</p>
    <a href="#top">top</a>

总结

  • 链接是由<a>元素创建的
  • <a> 元素通过href属性来知名你所要链接的页面
  • 如果链接到网站的内部的某个页面相对于完全限定 URL ，最好使用相对链接
  • 可以通过 id 特性将某个科链接某个科链接的页面上的元素作为链接目标

图像

<img src=" " alt="" title="">

src 属性告诉浏览器在何处可以找到所需的图像文件
alt 属性是当图像文件显示不出来时对图像进行描述
title 当光标停留在图像上时会以提示的方式显示title属性的内容

总结

  • <img> 元素用于向网页中添加图像
  • 必须为<img> 元素指定 src 特性和 alt 特性，src 用来表示图像的源地址，alt 特性用来描述图像的内容。

表格

定义

表格以网格形式表示数据。

<table>
    <thead>
        <tr>
            <th>标题一</th>
            <th>标题二</th>
            <th>标题三</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>3</td>
            <td>2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>7</td>
        </tr>
    </tfoot>
</table>

<table>:用来创建表格，表格的内容逐行编写
<tr>：每行
<td>：单元格
<th>：表示行/列的标题。可以使用scope 表示此元素时列标题还是行标题。row 是指行标题，col 是指列标题。
colspan：跨列
rowspan：跨行

总结

  • <table>元素是用来向网页中添加表格
  • 表格是逐行绘制的，行是由<tr> 创建的
  • 每一行中都有一定数量的由<td>元素（表示标题是为<th>）表示的单元格
  • 可利用colspan（跨列）rowspan（跨行）来使表格中的单元格跨越多行/多列
  • 长表格可以分为<thead>、<tbody>、`<tfoot>三个部分

表单

表单结构

<form>：表单控件位于<form>元素中，每一个form 都应该设置 action 属性和 method属性。
action：属性值是服务器上一个页面的URL
method：可以采用get/post

单行文本框

<input type="text">

密码框

<input type="password">

文本框

<textarea name="" col="" row=""></textarea>

单选按钮

<input type="radio" name="" value="" id="" checked>

复选框

<input type="checkbox" name=”“ value="" checked>

下拉列表

<select name="" id="">
    <option value=""></option>
    <option value=""></option>
    <option value=""></option>
</select>

文件上传

<input type="file">

提交按钮

<input type="submit" >

按钮

<button></button>

标签表单控件

<label>
    age:
    <input type="text">
</label>

<input type="radio" value="man" name="sex"> 
<label for="man">男</label>
<input type="radio" value="woman" name="sex"> 
<label for="woman">女</label>

两种用法：

  • 将文本说明和表单输入框全部包围起来
  • 与表单控件分开，使用for属性来指明 <label> 元素所关联的表单控件。for属性值与他所标注的表单控件的 id 属性相匹配。

其他控件

 <input type="date" name="" id="">             //时间控件
 <input type="text" required="required">    //必填
 <input type="email" name="" id="">     // 邮件控件
 <input type="search" name="" id="">    //搜索控件

其他标记

DOCTYPE（文档类型）

！DOCTYPE 是一个文档类型标记，是一种标准通用标记语言的文档类型声明，在 web 设计中用来说明你用的 XHTML 或者 HTML 是什么版本。

标签定义及使用说明
<!DOCTYPE> 声明位于文档中的最前面的位置，处于<html> 标签之前。
<!DOCTYPE> 声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。
在 HTML 4.01 中， <!DOCTYPE> 声明需引用 DTD （文档类型声明），因为 HTML 4.01 是基于 SGML （Standard Generalized Markup Language 标准通用标记语言）。DTD 指定了标记语言的规则，确保了浏览器能够正确的渲染内容。

注释

<!--  -->

页面信息

<meta>

<meta>元素位于<head>中，对用户不可见。最常用的特性时name和content属性。

id/class属性

每一个元素都有id/class属性

行内元素

有些元素在显示时总是与它的临近元素出现在同一行内，这些元素被称为内联/行内元素。

块级元素

有些元素在浏览器窗口中显示总是另起一行，这些元素被称为块级元素

    原文作者：weiyuu
    原文地址: https://segmentfault.com/a/1190000016283814
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞