前端之 HTML

前端

什么是前端

前端就是网站的前台部分，运行在浏览器上展现给用户浏览的网页。

广义前端：所有用户可以直接看见并交互的界面
狭义前端：浏览器上运行的用户交互的界面

技术栈

HTML

超文本标记语言Hyper Text Markup Language，负责完成页面的结构，文件的后缀为：.html .htm

CSS

级联样式表Cascading Style Sheet，负责页面风格的设计，样式，美观，文件后缀为：.css

JavaScript

浏览器脚本语言，可以编写运行在浏览器上的程序，负责编写页面特效，调用浏览器的API(BOM)、操作改变页面(DOM)，从后端获取数据(Ajax)，渲染页面等。文件后缀为：.js

浏览器输入网址发送了几件事？

1.输入网址
2.朝服务端发送请求
3.服务器接收请求并查询浏览器想要的数据返回给浏览器
4.浏览器拿到数据展示页面

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>
标签对中的第一个标签是开始标签，第二个标签是结束标签，开始和结束标签也被称为开放标签和闭合标签

标签的语法：

<标签名属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
<标签名属性1=“属性值1” 属性2=“属性值2”…… />

几个很重要的属性：

id：定义标签的唯一ID，HTML文档树中唯一
class：为html元素定义一个或多个类名（classname）(CSS样式类名)
style：规定元素的行内样式（CSS样式）

<!DOCTYPE html>
<html>
    <head>
        head存放的内容用户是看不到的，主要是给浏览器和搜索引擎看的
        <meta charset="UTF-8"> 
        <title>我是页面标题</title> 
    </head>
    <body>
        用户能够看见的内容都在body里面
        <h1>我是第一个标题</h1> 
		<p>我是第一个段落。</p> 
        <!--这是单行注释-->
    <!--
    这是多行注释
    -->
    </body>
</html>

说明：

DOCTYPE 声明了文档的类型,DOCTYPE 声明是不区分大小写的
<html> 标签是HTML页面的根元素，该标签的结束标志为 </html>
<head>标签包含了文档的元（meta）数据，如<meta charset=“utf-8”>定义网页编码格式为utf-8。该标签的结束标志为</head>
<title>标签定义文档的标题，该标签的结束标志为</title>
<body> 标签定义文档的主体，即网页可见的页面内容，该标签的结束标志为 </body>
<h1> 标签作为一个标题使用，该标签的结束标志为 </h1>
<p> 标签作为一个段落显示，该标签的结束标志为 </p>

Meta标签

Meta标签介绍：

<meta>元素可提供有关页面的元信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。
<meta>标签位于文档的头部，不包含任何内容。
<meta>提供的信息是用户不可见的。

meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

1.http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

<!--指定文档的编码类型(需要知道)-->
<meta http-equiv="content-Type" charset=UTF8">  
<!--2秒后跳转到对应的网址，注意引号(了解)-->
<meta http-equiv="refresh" content="2;URL=https://www.linwow.com">
<!--告诉IE以最高级模式渲染文档(了解)-->
<meta http-equiv="x-ua-compatible" content="IE=edge">

2.name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="简介信息">

HTML 标题

HTML 标题（Heading）是通过h1~h6：标签来定义的。

HTML 段落

HTML 段落是通过标签 <p> 来定义的，P 是英文paragraph段落的缩写，经常被用来创建一个段落。

HTML 链接

HTML 链接是通过标签 <a> 来定义的.a标签，也叫anchor（锚点）元素，既可以用来链接到外部地址实现页面跳转功能，也可以链接到当前页面的某部分实现内部导航功能。在 href 属性中指定链接的地址。target 属性用来控制是否在当前页面跳转，默认是_self当前页，也可以指定成_blank新建页面跳转

<a href="要跳转的网址">这是一个链接</a>

HTML 图像

HTML 图像是通过标签 <img> 来定义的。使用img元素来为你的网站添加图片，使用 src 属性指向一个图片的具体地址，即可以是网络上的图片地址也可以是本地的图片地址。<img> 标签是自关闭元素，不需要结束标签。img元素具有 alt 属性。 alt 属性中的文本用于屏幕阅读器以提高可访问性，并且如果图像无法加载，则会显示。 title 属性是鼠标悬停在图片上时显示的文本。图片调节长宽的时候只需要调节一个另外一个参数自动等比例缩放

<img src="图片的路径" width="104" height="142" alt="对图片的描述">

HTML 换行

在 HTML 语言中， <br >标签定义为一个换行符，它可以理解为简单的输入一个空行，而不是用来对内容进行分段。

HTML 文本格式化标签

标签	描述
<b>	定义粗体文本
<em>	定义着重文字
<i>	定义斜体字
<small>	定义小号字
<strong>	定义加重语气
<sub>	定义下标字
<sup>	定义上标字
<ins>	定义插入字
<del>	定义删除字

特殊字符

内容	对应代码
空格
>	>
<	<
&	&
¥	¥
版权	©
注册	®

HTML 表格

表格由<table>标签来定义。每个表格均有若干行（由<tr> 标签定义），每行被分割为若干单元格（由<td>标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

属性:

border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）

标签	描述
<table>	定义表格
<th>	定义表格的表头
<tr>	定义表格的行
<td>	定义表格单元
<caption>	定义表格标题
<colgroup>	定义表格列的组
<col>	定义用于表格列的属性
<thead>	定义表格的页眉
<tboday>	定义表格的主体
<tfoot>	定义表格的页脚

<table border="1"> 
    <!--border不设置或设置为0，则没有边框-->
    <thead>
        <tr>
            <th>name</th>
            <th>age</th>
            <th>hobby</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>lonwow</td>
            <td>19</td>
            <td rowspan="2">学习</td>
        </tr>
        <tr>
            <td>lin</td>
            <td>20</td>
            <!--<td>吃饭</td>-->
        </tr>
        <tr>
            <td>wow</td>
            <!--<td>22</td>-->
            <td colspan="2">睡觉</td>
        </tr>
    </tbody>
    <!--
	通过rowspan和colspan进行跨行的操作
	-->

HTML 列表标签

1.无序列表

<ul type="disc">
  <li>第一项</li>
  <li>第二项</li>
</ul>

type属性：

disc（实心圆点，默认值）
circle（空心圆圈）
square（实心方块）
none（无样式）

2.有序列表

<ol type="1" start="2">
  <li>第一项</li>
  <li>第二项</li>
</ol>

type属性：

1 数字列表，默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马

3.标题列表

<dl>
  <dt>标题1</dt>
  <dd>内容1</dd>
  <dt>标题2</dt>
  <dd>内容1</dd>
  <dd>内容2</dd>
</dl>

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

HTML 区块元素

大多数 HTML 元素被定义为块级元素或内联元素。

HTML块级元素

块级元素在浏览器显示时，通常会以新行来开始（和结束）。<div> 标签可以把文档分割为独立的、不同的部分。HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。

实例: <h1>, <p>, <ul>, <table>

HTML内联元素

内联元素在显示时通常不会以新行开始。HTML <span> 元素是内联元素，可用作文本的容器。
实例: <b>, <td>, <a>, <img>

HTML 表单

表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容，比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。表单使用表单标签 <form> 来设置:

HTML 表单 - 输入元素

多数情况下被用到的表单标签是输入标签（<input>）。<input> 元素是最重要的表单元素。输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

文本域（Text Fields）

文本域通过<input type=“text”> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

密码字段

密码字段通过标签<input type=“password”> 来定义。密码字段字符不会明文显示，而是以星号或圆点替代。

单选按钮（Radio Buttons）

<input type=“radio”> 标签定义了表单单选框选项。

复选框（Checkboxes）

<input type=“checkbox”> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

获取文件

<input type=“file” >选择本机文件进行上传。

日历

<input type=“date”>提供日历进行选择’

下拉选择框(select)

默认是单选的，可以通过multiple参数将单选变为多选，一个option就是一个选项。select 元素可创建单选或多选菜单。当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将 <select> 表单数据提交给服务器时包括 name 属性。

文本域(Textarea)

<textarea name=“info” id="" cols=“30” rows=“10”></textarea>用户可在文本域中写入文本。可写入字符的字数不受限制。

提交按钮(Submit Button)

<input type=“submit”> 定义了提交按钮。当用户单击确认按钮时，表单的内容会被传送到服务端。如果不想通过input标签来触发提交动作那么可以直接写一个 <button>button按钮</button>

重置按钮(reset)

<input type=“reset”>重置form表单内容。

普通按钮(button)

<input type=“button” >定义一个普通的按钮，可以自己绑定对应的事件。

input属性说明:

name：表单提交时的“键”，注意和id的区别
value：表单提交时对应项的值
- type=“button”, “reset”, "submit"时，为按钮上显示的文本年内容
- type=“text”,“password”,"hidden"时，为输入框的初始值
- type=“checkbox”, “radio”, “file”，为输入相关联的值
checked：radio和checkbox默认被选中的项
readonly：text和password设置只读
disabled：所有input均适用

select属性说明：

multiple：布尔属性，设置后为多选，否则默认单选
disabled：禁用
selected：默认选中该项
value：定义提交时的选项值

代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--<meta http-equiv="refresh" content="10;url=https://blog.csdn.net/linwow">-->
    <title>我的第一个网页</title>
    <a href="" id="a1"></a>

</head>
<body>
<div style="height: 100px; background: #caffd0"></div>
<h3>用户注册</h3>
<form action="">
    <p>username: <input type="text" name="username"></p>
    <p>password: <input type="password" name="password"></p>
    <p>birthday: <input type="date" name="birthday"></p>
    <p>gender:
        <input type="radio" name="gender" value="0">男
        <input type="radio" name="gender" value="1">女
        <input type="radio" name="gender" checked="checked" value="2">保密
    </p>
    <p>habby
        <input type="checkbox">篮球
        <input type="checkbox">足球
        <input type="checkbox">双色球
    </p>
    <p>province默认单选:
        <select name="province" id="">
            <option value="beijin">北京</option>
            <option value="shanghai">上海</option>
            <option value="shenzhen">深圳</option>
        </select>
    </p>
    <p>province多选:
        <select name="" id="" multiple>
            <option value="">北京</option>
            <option value="">上海</option>
            <option value="">深圳</option>
        </select>
    </p>
    <p>province归属选项:
        <select name="" id="">
            <optgroup label="北京">
                <option value="">朝阳区</option>
                <option value="">海淀区</option>
                <option value="">昌平区</option>
            </optgroup>
            <optgroup label="上海">
                <option value="">浦东新区</option>
                <option value="">静安区</option>
                <option value="">徐汇区</option>
            </optgroup>
            <optgroup label="深圳">
                <option value="">南山区</option>
                <option value="">宝安区</option>
                <option value="">福田区</option>
            </optgroup>
        </select>
    </p>
<p>文本框
    <textarea name="info" id="t1" cols="30" rows="10"></textarea>
</p>
<p>文件
    <input type="file" name="file">
</p>
    <input type="submit" value="提交">
    <input type="button" value="没用">
    <input type="reset" value="重置">
    <button>button</button>
</form>


<h1>这是一级标题</h1>
<h6>这是六级标题</h6>
<p>这是一个段落</p><br>
<a href="https://blog.csdn.net/linwow">点我一下试试</a><br>
<img src="https://www.bing.com/th?id=OGC.59a001c80cb085d03ff52eaf34bd132c&pid=1.7&rurl=http%3a%2f%2fatt.bbs.duowan.com%2fforum%2f201405%2f19%2f2015461v0s48j05j8je2i0.gif&ehk=6ZVeno%2bXyeqNMnv7dcz%2fAQ"
     width="500" height="250"
     title="夸你呢"
     alt="没事，夸你呢"><br>

<div>
    <span>
        <b>我是粗体</b>
    </span>
    <span>
        <em>我是着重体</em>
    </span>
    <span>
        <small>我是小字体</small>
    </span>
    <span>
        <strong>我是加重语气的</strong>
    </span>
    <span>
        <ins>这是插入字</ins>
    </span>
    <span>
        <i>我是斜体</i>
    </span>
    <span>
        <sub>我在下边</sub>我是正常的<sup>我在上边</sup><br>
    </span>
    <span>
        <del>这是删除字</del>
    </span>
    <span>
        <s>这也是删除字</s>
    </span>
</div>


<table border="1">
    <caption>这是标题</caption>
    <thead>
    <tr>
        <th>name</th>
        <th>age</th>
        <th>pwd</th>
    </tr>
    </thead>
    <tbody>
        <tr>
            <td>lin</td>
            <td>23</td>
            <td>132</td>
        </tr>
        <tr>
            <td>wow</td>
            <td>22</td>
            <td>321</td>
        </tr>
        <tr>
            <td>linwow</td>
            <td>21</td>
            <td>888</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>666</td>
            <!--<td>666</td>-->
            <!--<td>666</td>-->
        </tr>
    </tfoot>
</table>
 <ul type="disc">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
 </ul>
<ol type="1" start="2">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>
<dl>
    <dt>标题一</dt>
    <dd>内容一</dd>
    <dt>标题二</dt>
    <dd>内容二</dd>
    <dt>标题三</dt>
    <dd>内容三</dd>
</dl>


	<a href="#a1">bottom</a>

</body>
</html>

HTML 统一资源定位器(Uniform Resource Locators)

Web浏览器通过URL从Web服务器请求页面。当您点击 HTML 页面中的某个链接时，对应的 <a> 标签指向万维网上的一个地址。一个统一资源定位器(URL) 用于定位万维网上的文档。

scheme://host.domain:port/path/filename

说明:

scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称

以下是一些URL scheme：

Scheme	访问	作用
http	超文本传输协议	以 http:// 开头的普通网页。不加密。
https	安全超文本传输协议	安全网页，加密所有信息交换。
ftp	文件传输协议	用于将文件下载或上传至网站。
file		自己计算机上的文件。

主要知识总结

前端HTML
		超文本标记语言
	注释
		<!--单行注释-->
		<!--
		多行注释
		-->
		ps:写HTML的时候，注释一般都是成双成对的
		即
		<!--xx功能开始-->
		<!--xx功能结束-->
	文件的后缀名(给用户看的)
head内常用标签(不是给用户看的)
	title：定义网页标题
	style：内部写css样式代码
	link：引入外部css样式文件
	script：可以在内部直接写js代码也支持src属性
		    导入外部js文件
	meta：定义网页原信息
		name='keywords' content="......"
		name='description' content="......"
body内常用标签(body内标签才是给用户看的)
	基本标签
		h1~h6 p u i s b br hr 
	特殊符号
		&nbsp;
		&lt;
		&gt;
		&copy;
		&reg;
		&amp;
		&yen;
	常用标签
		div
		span
		a	
			href='url'：跳转到指定网址。
			锚点功能：一个a调到另一个a标签。具体案例:回到顶部
			target：默认是在当前页面跳转 _self，指定成_blank新建页面跳转。		
		img
			src：放图片地址(可以是本地的也可以是网络上的)
			alt：当图片加载失败时可以指定显示的提示信息
			title：鼠标悬停上之后显示的提示信息
			width：长宽在设置的时候只需要设置一个另一个自动等比例缩放
			heigth
	列表标签
		无序列表
			ul>li：可以通过ul内type属性来控制无序的标识
		有序列表
			ol>li：可以通过ul内type属性来控制有序的标识(1,a,A,I,i)
		标题列表
			dl：
				dt：标题
				dd：内容
	表格标签
		table标签内可以设置的属性
			type：可以通过type参数设置边框
			cellspacing：设置单元格与边框之间的距离
			cellpadding：设置文本值域单元格之间的距离
		单元格标签可以设置的属性
			rowspan：垂直方向
			colspan：水平方向
	form表单
		以用户注册为例
		input：type属性可以变化的值
				text
				password
				date
				radio：checked   如果属性名和属性值相等那么可以简写
				checkbox：checked
				file：form表单上传文件需要修改两个参数的值
						1.将method由默认的get改为post
						2.将enctype编码格式由默认的urlencoded改为formdata
				submit：提交按钮 触发form表单提交数据的动作
				button：上面功能都没有。就是一个普通按钮
				reset：重置用户填写的信息
		select :选择标签，默认是单选的，可以通过设置multiple参数改为多选
				一个个的option就是一个个的选项
		textarea:大段文本框
		button标签:也可以出发form表单的提交动作
	总结:
		1 获取用户输入的标签都必须有一个name属性
			用户输入的值会被存放到标签的value属性中
			你可以理解为name属性对应是字典的key
			用户输入的被value属性获取的到值是字典的value
		2 label标签
			通常是和input标签组合使用
			<form action="">
				<label for="i1">username:<input type="text" id="i1" name="username"></label>
				<label for="i2">password: <input type="password" name="pwd" id="i2"></label>
				<input type="submit">
			</form>
	请求方法:
		get请求:朝服务端获取资源(可以携带参数供服务端校验)
			get请求携带的参数是有大小限制的，大概4KB。可以携带一些不重要的参数，不推荐携带敏感型的参数。
		post请求:朝服务端提交数据，敏感性的信息都应该采用post提交方式
标签分类1:
	双标签:h1~h6 a p div span table ul ol dl 
	自闭和标签: img br hr input
标签分类2:
	块级标签
		独占一行
		块级标签可以嵌套块级标签和行内标签
		p标签虽然是块级标签但是不能嵌套任何的块级标签只能嵌套行内标签
		可以设置长宽
	行内标签
		大小取决于内容大小
		不能设置长宽

文章目录

前端

什么是前端

技术栈

浏览器输入网址发送了几件事？

HTML

什么是HTML

HTML 标签

Meta标签

HTML 标题

HTML 段落

HTML 链接

HTML 图像

HTML 换行

HTML 文本格式化标签

特殊字符

HTML 表格

HTML 列表标签

HTML 区块元素

HTML块级元素

HTML内联元素

HTML 表单

HTML 表单

HTML 表单 - 输入元素

代码展示

HTML 统一资源定位器(Uniform Resource Locators)

主要知识总结

猜你喜欢

前端 之 HTML

文章目录

前端

什么是前端

技术栈

浏览器输入网址发送了几件事？

HTML

什么是HTML

HTML 标签

Meta标签

HTML 标题

HTML 段落

HTML 链接

HTML 图像

HTML 换行

HTML 文本格式化标签

特殊字符

HTML 表格

HTML 列表标签

HTML 区块元素

HTML块级元素

HTML内联元素

HTML 表单

HTML 表单

HTML 表单 - 输入元素

代码展示

HTML 统一资源定位器(Uniform Resource Locators)

主要知识总结

猜你喜欢

前端之 HTML