HTMl

结构

<!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>中,对用户不可见。最常用的特性时namecontent属性。

id/class属性

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

行内元素

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

块级元素

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

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