HTML入门

Sillage777

已于 2023-03-02 10:28:32 修改

阅读量87

点赞数 2

分类专栏： PHP 文章标签： html 前端 javascript

于 2023-03-02 09:04:17 首次发布

本文链接：https://blog.csdn.net/weixin_56378389/article/details/129293806

版权

PHP 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、HTML介绍

HTML简介

HTML简介（推荐使用5W1H学习法）

超文本标记语言 (Hyper Text Markup Language)，最新版本：HTML5，简称H5

HTML代码由浏览器执行。主流的5大浏览器：Chrome、Firefox、Opera、Safari、Edge

建议：从现在起停止使用360、qq等浏览器

HTML标准

HTML是由W3C制定的国际标准。W3C：国际万维网组织。

HTML开发

1.表单

<form>
...
</form>

2.文本框

  <input type="text"placeholder="">

3.密码框

<input type="password">

4.单选按钮

<input type="radio" name="gander">...
<input type="radio" name="gander">...
...

5.下拉选择

<select>
	<option>...</option>
	<option>...</option>
	...
</select>

6.复选框

<input type="checkbox">...
<input type="checkbox">...
...

7.文本域

<textarea rows"5" cols="50">//rows表示行数，cols表示列数
...
</textarea>

8.文件上传

<input type="file">

9.提交按钮

<input type="submit" value="提交">

10.重置按钮

<input type="resect" value="重置">

11.跳转网页

<form action="receive.html">
...
</form>

12.HTML表格

<table></table>表格标记
<tr></tr>表格行
<td></td>表格列
在<table>里放<tr>,在<tr>里放<td>
单元格的合并实用<td colspan="2"></td>

13.HTML的超链接

链接可以到自己的网页，也可以是外部网站
语法

<a href=""></a><br>

14.HTML的图片

语法

<img src="" width="" height="">

图片带链接在超链接中放入

15.HTML列表

有序列表<ol></ol>无序列表<ul></ul>
列表项<li></li>

16.标题

HTML中共有六级标题：从h1-h6

17.段落和DIV块

段落<p></p>会自动换行
块<div></div>会自动换行
<span><span>不会自动换行
<label><label>不会自动换行

18.HTML颜色

颜色表示两种：用颜色名；颜色的值（主要用它）,是16进制，以#开头
颜色是由3种色调配而成：RGB（red、green、blue）

19.字符实体

特殊字符	实体字符
空格	&nbsp
小于号	&lt
大于号	&gt
引号	&quot
版权	&copy

面试题：HTML中的空格怎么表示？

&nbsp;

HTML是W3C的标准，但W3C不是强制标准，每个浏览器对他的支持
程度都不尽相同，而且HTML语法比较宽松。浏览器是执行网页代码的。

20.iframe框架（常用）

<iframe src="table.html"name="mycontent"></iframe>

高频面试题：post和get有什么区别？

post方式提交表单，表单数据在地址栏不显示，比较安全
get方式提交表单，数据会显示在地址栏上，不安全
post提交数据，数据量大小不限；get一般最大

二、CSS

层叠式样式表，简称为样式。（Cascading Style Sheets）
由W3C制定的标准，最新版CSS3
由浏览器执行
作用：美化网页（HTML不具备美化网页的功能）

1.CSS选择器

标记选择器
id选择器
class选择器

2.CSS代码放置的位置

页内样式：放在head之间，用style标记
行内样式：放在标记的style属性里，行内样式优先级最高
外部样式：放在独立的.css文件中，在网页上用link标记引入

3.开发常用样式

背景颜色（background-color）
文本样式（color\text-align\text-decoration）
字体样式（font-family\font-size）网页上的文字默认是16px；在工程上，网页上的文字一般是12px或14px
链接样式（a:hover）
表格样式（细线表格border-collapse：collapse）
边框样式（边框变红 border:1px solid red）

4.CSS盒子模型

与网页布局密切相关
美工必须精通
开发工程师理解并会用
重要：外边距margin、内边距padding;内外边距是相对的，看站在哪一方来说。边距有4个方向：上下左右

5.登录网页

用到了盒子模型（内部外部边距等）
HTML表单元素（用户名，密码，登录按钮）

6.CSS显示

display：隐藏后释放区域。
visibility：隐藏后，但区域不释放。

面试题：display，visibility有什么区别

display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；
使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。

7.CSS浮动

网页美工必须精通。
主要用于：网页布局（CSS+DIV）
CSS+Div做网页离不开浮动，要理解浮动的意思；看网页效果，返回来理解用以。

三、Bootstrap技术

1. Bootstrap介绍

Twitter公司发明的技术
用Bootstrap做的网页，能够自动适应屏幕的大小（自适应、响应式）
移动端优先（伴随智能手机而来）
Bootdtrap技术是基于：HTML、CSS、JavaScript
Bootstrap本质：写好的CSS样式库（拿来就用-拿来主义）
Bootstrap不是编程语言，是一种技术。

2. Bootstrap如何使用

把Bootstrap文件从官网下载来，复制到自己的项目里
直接使用CDN（内容分发网络，其实就是：放在公网上的文件）
如果使用CDN方式，自己的电脑必须联网。

3. Bootstrap工作原理

网格系统（屏幕分成12列，使用者可以按自己需要组合列）
使用Bootstrap后，CSS样式就不用我们自己写了；直接用即可

4.Bootstrap表格

<html>
	<head>
		<meta charset="UTF-8">
		<title>Bootstrap表格</title>
		<!-- 新 Bootstrap 核心 CSS 文件 -->
		<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 
		<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
 
		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	</head>
	<body>
		<div class="container">
			<h1>主要岗位列表</h1>
			<table class="table table-bordered text-center table-striped">
				<tr>
					<td>编号</td>
					<td>岗位名称</td>
					<td>岗位说明</td>
					<td>薪资情况</td>
				</tr>
				<tr>
					<td>1</td>
					<td>Java研发工程师</td>
					<td>开发大型管理系统、信息化系统</td>
					<td>经验丰富工资越高：8K~40K</td>
				</tr>
				<tr>
					<td>2</td>
					<td>C/C++研发工程师</td>
					<td>开发嵌入式软件、操作系统底层软件、算法</td>
					<td>个人能力+技术+经验决定待遇</td>
				</tr>
				<tr>
					<td>3</td>
					<td>Web前端开发工程师</td>
					<td>开发纯前端、前后端分离</td>
					<td>个人能力+技术+经验决定待遇</td>
				</tr>
			</table>
		</div>
	</body>
</html>

四、JavaScript（后续会出详细文章）

对于Java研发工程师，JavaScrip是必须的，要能熟练的开发。
对于Web前端开发工程师，JavaScrip必须深入、精通。这个岗位使用的开发语言就是JavaScript.
大数据工程、爬虫工程师等：JavaScript也时需要掌握的。

1.JavaScript语言与C语言

没有任何关系，是两种独立的语言。
不同的编程语言，他们的语法有一定的相似度。想死不代表有关系。

2.不同的编程语言的应用场景（领域）

C语言（强调算法、数据结构）：面向过程，主要用于智能设备上的软件开发（嵌入式）、操作系统底层开发、算法等。
安卓手机的底层、Windows的底层就是C开发的（偏底层应用）
C++语言：面向对象，主要用于图形软件开发（美图秀秀、PS、酷狗音乐）、通信软件（QQ、钉钉）、游戏软件（带有图形页面的控制软件）、STM32开发（嵌入式）
Java语言（不太强调算法、数据结构，Java的数据结构是现成的）：面向对象，主要用于基于B/S结构的大型管理信息系统的开发（12306、教务系统）、大数据开放（Hadoop）、安卓手机应用开发、智能电子设备软件开发（数字电视机顶盒）
Python语言：胶水语言，什么都能干，全能型选手。主要用于：信息安全编程、爬虫、大数据分析、AI等
JavaScript语言：面向对象。脚本语言，运行在浏览器上。主要用于网页上的动态效果、网页和用户的交互等