Web前端-HTML基础

Posted 2022-12-14 再来半包

Web前端

• Web前端基础
• • HTML
  • • 编程中命名规范
    • 网页的基本结构：
    • 网页运行的原理：
    • HTML常见标签
    • • 标题标签
      • 段落标签
      • 水平线标签
      • 有序列表标签
      • 无序列表标签
      • 描述标签
      • 表格标签
      • 表单
      • • form表单中常用的表单元素
      • div分区标签
      • span范围标签
      • a超级链接标签
    • HTML4和HTML5的区别
    • 页面错误调试的几种常见手段

Web前端基础

html：是一种编程语言，意思为“扩展标记语言”，可以简单的理解为一个“毛坯房子”

CSS：是层叠样式表，是一种技术，其主要目的是为了帮助美化HTML页面的，可以简单的理解为“装修过的房子”

JS：是一种编程语言，起作用是帮助美化国的页面使得其更加只能，更加人性化，可以简单的理解为“智能家居房”

Jquery: 是js封装后的一个组件，可以用更加简洁的代码使得页面更加美化更加智能更加人性化通用性更强，可以简单的理解为“微型智能家居助手”

HBUlider:是基于eclipse用java开发一款软件，所以在运行的时候要有java的环境，（但是pycharm安装的时候默认是打上勾（自动安装且配置了环境变量）的所以就避免了）

HTML

HTML：超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，

它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等 ）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。

简而言之：

1.就是一种编写网页的语言

2.且是运行在浏览器端的

3.且是解释（是由浏览器自动解释的）执行的

2.网页的基本结构：

：标识出当前文件是html5,其作用是告诉浏览器不要解释错误，要严格按照W3C标准模式进行解析

备注：W3C是一个国际标准组织

网页的基本结构：

头：

主体：

3.网页运行的原理：

html文件—>浏览器解析（Webkit渲染引擎）—>在页面上呈现效果

编程中命名规范

1）不要使用关键字，保留字：因为会产生二义性

2）不要随便的写：例如：a aa aaa

3 ) 尽量避免中文：转码容易出错

4）尽可能的以字母，下划线，$开头

5）尽可能的安照驼峰规范

原则：见名知意，尽可能的规范 假正经

编程书写规范：

因为html的兼容性比较器，但是这并不是意味着我们可以随便写，反之我们更要严格规范要求自己

例如:1).html与.htm虽说效果一样，但是在引擎渲染的时候还是默认先找.html

2）

虽然效果能出来，但是在不同浏览器的时候也是会有差异的

网页的基本结构：

：标识出当前文件是html5,其作用是告诉浏览器不要解释错误，要严格按照W3C标准模式进行解析

备注：W3C是一个国际标准组织

网页的基本结构：

头：

主体：

网页运行的原理：

html文件—>浏览器解析（Webkit渲染引擎）—>在页面上呈现效果

HTML常见标签

标题标签

用于来存放标题内容

<h1>...</h1>  <!--标题标签-->
<h1>第一章</h1>  <!--将第一章设为一级标题-->

段落标签

用来存放正文

<p></p>    <!--段落标签：主要用于存放一些内容-->

水平线标签

用来当作网页中的分割线

<hr/>      <!--水平线标签--> <!--类似于  --------------   独占一行-->

有序列表标签

创建一个有序列表

<ol><
    li></li>
</ol>   <!--有序列表标签-->

无序列表标签

创建一个无序列表

<ul>
    <li></li>
</ul>   <!--无序列表标签-->

描述标签

用来描述一些图片、视频的标签

<dl>
    <dt></dt>
    <dd></dd>
</dl>  <!--描述标签-->

表格标签

创建一个多行多列的表格

<table align="center" border="2px" bordercolor="green">
				<tr>
					<td>第一行第一列</td>
					<td colspan="2">第一行第二列</td>
					<!--<td>第一行第三列</td>-->
				</tr>
				<tr>
					<td rowspan="2">第二行第一列</td>
					<td>第二行第二列</td>
					<td>第二行第三列</td>
				</tr>
				<tr>
                <!--<td>第三行第一列</td>-->
					<td>第三行第二列</td>
					<td>第三行第三列</td>
				</tr>
			</table>

table 的align属性可以控制左对齐、右对齐、居中对齐等功能

border用来增加边框， bordercolor是设置边框的颜色

colspan：列合并单元格

rowspan: 行合并单元格

表单

格式为：

… 文本框、按钮等表单元素…

表单提交地址：指定提交后，由服务器上哪个处理程序处理

提交方法：指定向服务器提交的方法，一般为post或get方法, post方法比较安全，但是get可以携带参数进行传递且参数大小不能超过2K

扩展知识点：post和get的区别

1.get是从服务器上获取数据，post是向服务器传送数据。

2.get是把参数数据队列加到提交表单的action属性所指的URL中，在URL中可以看到。post是通过HTTP post机制，用户看不到这个过程 。

3.get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。

4.get安全性非常低，post安全性较高。但是执行效率却比Post方法好。

form表单中常用的表单元素

<form action="https://www.baidu.com/?tn=62095104_33_oem_dg" method="post">
			<table>
                <!--单行文本框-->
				<tr>
					<td>用户名</td>
					<td><input type="text" name="nf" value=""  /></td>
				</tr>
                <!--密码框-->
				<tr>
					<td>密码</td>
					<td><input type="password" name="ps"  value="" /></td>
				</tr>
                <!--文本域   多行文本框-->
				<tr>
					<td>文本域/多行文本框</td>
					<td><textarea cols="4" rows="2" name="tx"></textarea></td>
				</tr>
				<!--单选按钮-->
				<tr>
					<td>单选按钮：</td>
					<td>男<input type="radio" name="ra" value=""/></td>
					<td>女<input type="radio" name="ra" value=""/></td>
				</tr>
                <!--复选框-->
				<tr>
					<td>复选框</td>
					<td>游泳<input type="checkbox" name="ck"  value="" />
					篮球<input type="checkbox" name="ck"  value="" />
					足球<input type="checkbox" name="ck"  value="" /></td>
				</tr>
				<!--下拉列表-->
				<tr>
					<td>下拉框/下拉列表性别</td>
					<td>
						<select>
							<option>---请选择---</option>
							<option>男</option>
							<option>女</option>
						</select>
					</td>
				</tr>
                <!--提交按钮-->
				<tr>
					<td></td>
					<td ><input type="submit" name="bt" id="bt" value="提交" /></td>
				</tr>
                <!--重置按钮-->
				<tr>
					<td>重置按钮</td>
					<td><input type="reset" /></td>
				</tr>
                <!--普通按钮-->
				<tr>
					<td>普通按钮</td>
					<td><input type="button" name="ta" id="ta" value="按钮" /></td>
					<td><input type="hidden" name="ge" id="ge" value="123321" /></td>
				</tr>
				<!--时间选择器-->
				<tr>
					<td>日期</td>
					<td><input type="week" /></td>
				</tr>
			</table>
			
			
			</form>

div分区标签

1、可以在这里写基本的数据信息，当然也可以写其他的标签元素

2、起作用是相当于在页面上开辟了一块区域

<div style="height: 300px;background-color: blue;">可以在div中使用基本数据
	<br />
	<h1>可以在div中使用其他标签</h1>
    <p>我是段落</p>
</div>

span范围标签

1、既可以放基本的数据内容，也可以放其他的标签内容

2、其是作用于一行

<p>我的母亲有 <span style="color:blue">蓝色</span> 的眼睛。</p> 

效果：

我的母亲有 蓝色 的眼睛。

a超级链接标签

<a name="abc" href="http://www.baidu.com">a标签可以实现超级链接</a>

代码效果

a标签可以实现超级链接

在网页中点击一下可以实现页面的跳转

HTML4和HTML5的区别

1.DOCTYPE的声明

HTML4的DOCTYPE声明方式：

HTML5 的DOCTYPE声明方式：

2.指定字符编码：在HTML4中 编码需要有很多的声明，但在HTML5中，写法变得非常简单，我们来看一下代码

3.新增的结构元素（section、article、aside、header、hgroup、footer、nav、figure）

新增的其他元素（video、audio、embed、mark、 progress、 meter、time、ruby、rt、rp、wbr、canvas、command、details、datagrid、keygen、output、source、menu）

新增的input元素的类型（email、url、number、range、Date Pickers）

4.废除的元素

能使用CSS代替的元素（basefont、big、center、font、s、tt、u）等等

只有部分浏览器支持的元素

其他被废除的元素

h5中可以使用框架页，也可以不使用

小结：H5语法更加简洁，标签更加全面，效果更加美好

页面错误调试的几种常见手段

1、直接看源代码

意思为看开发工具中写的源代码，但不是特别明显，因为HTML是解释型语言，一行一行解释，有得自动会解释通，解释不通则会直接跳过

2、查看页面源代码

在网页中右键，查看源代码，会跳转到另一个网页中，显示你网页中的所有代码

3、页面开发者控制台

F12可以快捷打开页面控制台，可以在控制台中查看你所写的源代码，也可以对单个元素进行审查