前端HTML基础知识

载戢

已于 2022-12-31 10:32:14 修改

阅读量196

点赞数

文章标签：前端 html javascript

于 2022-12-30 20:59:30 首次发布

本文链接：https://blog.csdn.net/m0_52293697/article/details/128500492

版权

一、   概述
1、网页与网站
网页：网站中的一页，一个网站中的网页通过“超链接”的方式被组织到一起。
网站：互联网上用于展示特定内容的相关网页的集合。
2、网页元素：站标（logo）、导航栏、文字超链接、banner广告横幅、表单

网站就是文件夹，网页就是文件
3、浏览器：解析网页源代码，渲染网页。
常用浏览器主要有：chrome、Firefox、IE、Safari、Opera，其中IE浏览器速度较慢。
4、前端技术构成：
   （1）结构：html决定。从语义的角度，描述页面结构。
   （2）样式：CSS决定。从审美的角度，美化页面。
   （3）行为：JavaScript决定。从交互的角度，提升用户体验。

5、前端技术标准：W3C标准

二、标题标签
1、文本标题
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题H3</h3>
<h4>四级标题H4 </h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

注:文本标题标签自带加粗，有自己的文本大小，并且独占一行，有默认间距
2、段落文本(p)
<p>段落文本内容</p>
标识一个段落(段落与段落之间有段间距)
不同段落之间会自动换行
多个空格只显示一个空格
空行也是只会显示一个空格，只有一个不显示。
3、段内换行(br)
<br />
换行是一个空标记(强制换行)
4、水平线
<hr />空标记

5、加粗有两个标记(推荐strong)
<b>加粗内容</b>只是显示加粗
<strong>强调的内容</strong>突出的文本
6、倾斜有两个标记(推荐em)
<em>强调文本</em>
<i>倾斜文本</i>
7、删除线有两个标记(推荐del)
<s>文本</s>删除线
<del>文本</del>删除线
8、扩展
<u>文本</u>下划线
<sub> </sub>下标
<sup> </sup>.上标
9、div标签没有具体含义，用来划分页面的区域，独占一行。
10、span标签没有实际意义，主要应用在对于文本独立修饰的时候，内容有多宽就占用多宽的空间距离。

连续多个空格标签：&nbsp
空行标签：两个<br />(单独标签）
预留格式：pre(保存源代码格式），内部可直接输入源代码。

三、 HTML的基本语法

1、<常规标记>也叫双标记

<标记></标记>
<标记属性=“属性值”属性= "属性值”> </标记>
标记也可叫标签或叫元素
例如: <head> </head>
2.空标记也叫单标记

<标记/>
<标记属性=“属性值”/>
例如: <br />

四、特殊符号的表示方式
1、尖角号<>
   <   左尖角号<
   >   右尖角号>
2、空格
       该空格占据宽度受[字体]影响明显而强烈
   &emsp;   占据的宽度正好是1个中文宽度，且基本上不受字体影响
3、版权
   ©   ©
4、商标
   ™ TM
   &req;    ®

五、超链接标签

能够实现不同页面的跳转
<a href="路径” title=“ 鼠标悬停上去之后的提示信息” target="规定在何处打开文档">内容</a>

Target属性:规定在何处打开文档。
A. target="_ self" 默认值
B. target=" _blank“新窗口打开

六、表格属性

1、table表格属性
宽度 width
高度 height
边框 border（外边框的宽度）
边框颜色 bordercolor
背景颜色 bgcolor
水平对齐 align=“left或right或center”
cellspacing="单元格与单元格之间的间距“
cellpadding="单元格与内容之间的空隙"

2、行tr 属性
高度 height
背景颜色 bgcolor
文字水平对齐 align=“left或right或center”
文字垂直对齐 valign=“top或middle（默认）或bottom";

3、单元格td属性注释：如果一个单元格设置的宽度，影响的是一列的宽度；类似地，设置高度影响一行的高度
宽度 width
高度 height
背景颜色 bgcolor
文字水平对齐 align=“left或right或center”
文字垂直对齐 valign=“top或middle或bottom";

4、单元格合并
Colspan=“所要合并的单元格的列数” 必须给td。
例如：Colspan=“2”，就是将两个单元格列合并为一个单元格

Rowspan=“所要合并的单元格的行数” 必须给td。

七、表单标签
<form method=“get或者post” action=“向何处发送表单数据”>
<input />
A:属性 type 定义输入框的类型
   a):文本框 type="text“ 密码框 type=“password“
   b):提交框 type=“ submit“ 和 <button>提交按钮</button> 一样
   c):按钮框 type=“button“ 单纯的按钮
   d):重置框 type=“reset”清空的效果
B:属性 placeholder 描述输入字段预期值的简短的提示信息。兼容到IE8以上
C:属性 name 必须设置，否则在提交表单时，用户在其中输入的数据不会被发送给服务器
D:属性 value

</form>

Form当中method的post和get的区别？
1. get是从服务器上获取数据，post是向服务器传送数据。
2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
3. 对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。
4. get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4（Internet Information Service 互联网信息服务）中最大量为80KB，IIS5中为100KB
5. get安全性非常低，post安全性较高。但是执行效率却比Post方法好。