前言（学习目的）：
在学习javase前，先对页面的结构进行初略的了解，以便为后期的学习打好基础。本文初始目的是为了自己的学习，记录自己学习中的难题与进步。
希望能看到的朋友能在错误上进行指点，如果本博客内容有对你提供到帮助，也请能发表评论。
其中我是把我在https://blog.csdn.net/weixin_41321790/article/details/98517529上写的文章给复制过来了，博客园这边等以后会改进html+css后会重写来修改内容的。
html核心入门
开发工具
在学习html+css前我们需要了解开发工具，按最近相对较火的几款工具进行粗略介绍。
vs code ：全栈开发工具 可以说是一款非常方便同时好用的一款工具。免费，大部分前端开发人员都是使用着这款开发工具。
hbuilder：纯前端开发工具，最近几年可以看到没什么人员使用了，因为其运行速度还是让人不怎么满意的。
sublime：和vs code 很像，如果是打算纯敲代码，不怎么希望提示的人，可以用来练语法。是一个纯文本软件。
webstorm：这一款软件是收费的，但在网上有教程。其是java程序开发人员最喜欢的软件。其优秀的编程环境，代码提示都做得很好，最关键可以直接替代到后期java开发的Intellij IDEA
浏览器渲染原理
浏览器本质上是一个渲染引擎，可以把html代码渲染成人类更容易接受的符号。
HTML
超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。
标签
以开始，以结束的标记就是标签。标签中间可以放文本内容，还可以放其他标签。标签可以嵌套。
元素
标签和其内容称为元素
属性
标签的属性以key=value形式存在于标签中。
<img width=“100px” height=’20px’/>
标准文档结构
<!-- 启动浏览器渲染引擎的版本 -->
<!doctype html>
<html>
<!-- head 告知浏览器的预设置 -->
<head>
<!-- 字符集解码 -->
<meta charset="UTF-8">
<!-- 标签的标题 -->
<title>百度一下，你就上当</title
<!-- 设置浏览器的视口 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- seo 优化 -->
<meta name="keywords" content="小米,小米9,小米cc9,Redmi K20,Redmi Note 7,小米MIX3,小米商城">
<meta name="description" content="为发烧而生">
<!-- 告知IE使用文档模式为Edge -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
</head>
<body>
我是HTML
<h1 style="color:red">我是HTML</h1>
<img src="https://www.baidu.com/img/bd_logo1.png" />
</body>
</html>
html 文档结构是以一个html为根节点，其下包含head 和 body
head标签用于告知浏览器渲染的相关配置。body才是浏览器渲染的内容。
浏览器视口
<metaa name="viewport" content="width=device-width, initial-scale = 1.0">
viewport 表示浏览器视口，视口的大小为设备大小（device-width），初始缩放比例为（initial-scale=1.0）表示不缩放
相关属性值
width：控制viewport的宽度，这个值可以被指定。
height：控制viewport的高度
initial-scale：初始缩放比例，即每一次加载时页面缩放的比例。
maximum-scale：允许用户缩放到的最大缩放比例。
minimum-scale：允许用户缩放到的最小缩放比例。
user-scaleable：是否允许用户缩放，可以传“yes”或“no”
技巧:
!+tab快捷键 快速生成标准的html5文档结构。
强调，一般情况下，这些是不需要自己亲手打的，一般通过软件直接生成，在需要使用的时候在进行相应的更改。
html 核心标签
html标签按照排版可以分为两个类型的标签
块标签
行内标签
块标签（block tags）
1.独占一行，垂直方向排列
2.可以设置宽高
行内标签（inline tags）
1.在一行内并排排列，水平方向排列
2.不能设置宽高，内容撑开高度
有语义标签
标签有特定的含义，例如显示图片的标签img,播放音频的标签audio,播放视频的标签video。
有语义标签不能用在其他用途。
无语义标签
标签没有特定含义，标签什么都可以显示，一般作为容器，可以用于页面布局。例如:div/span等
块标签
div
无语义标签块标签,一般作用容器用于页面布局。
<body>
<div style="height:100px;background:red;">hello world</div> test
</body>
h1-h6
有语义标签，表示标题。
<!-- h1-h6 -->
<h1>我是标题1</h1>
<h2>我是标题2</h2>
<h3>我是标题3</h3>
<h4>我是标题4</h4>
<h5>我是标题5</h5>
<h6>我是标题6</h6>
ol/ul/dl
ol 表示有序列表 ordered list li 表示列表项，必须位于ol中。
<ol>
<li>我是第一项</li>
<li>我是第二项</li>
<li>我是第三项</li>
</ol>
ul 表示有序列表 unordered list li 表示列表项，必须位于ul中。
<ul>
<li>我是列表1</li>
<li>我是列表2</li>
<li>我是列表3</li>
</ul>
dl 表示定义列表 defined list
dt 表示定义标题 defined title
dd 表示定义表示 defined description
其中dt和dd可以由任意多个
<!-- dl -->
<dl>
<dt>屌丝</dt>
<dd>屌丝来源于中国大陆地区的中国网络文化。表达意思是讽刺；另一意思是指喻不方便明言或不合适直言的隐语，多用于熟人之间互侃或者互贬。同时指的是比喻自嘲。多用自嘲来活跃气氛，屌丝一词传用至今已无特定人群的界限，多用于朋友，熟人之间的戏侃。</dd>
</dl>
<dl>
<dt>程序员鼓励师</dt>
<dd>1、长相清新，声线甜美，微笑常在，人见人爱；</dd>
<dd>2、善于倾听，善不善沟通不重要，能忍受IT工程师死宅无法交流的性格；</dd>
<dd>3、耍不耍脾气不重要，要善于发现每一个程序暖男的天性，成功驯服；</dd>
<dd>4、了解互联网，懂科技，不然聊起来云里雾里，工程师会更受打击。</dd>
</dl>
table
表格table是有行(tr)构成的，行是有列(td)构成的。
<table border="1">
<tr>
<td>aaa1</td>
<td>aaa2</td>
<td>aaa3</td>
</tr>
</table>
<!-- table>tr*2>td{aaa$}*3 -->
<table border="1">
<tr>
<td>aaa1</td>
<td>aaa2</td>
<td>aaa3</td>
</tr>
<tr>
<td>aaa1</td>
<td>aaa2</td>
<td>aaa3</td>
</tr>
</table>
合并单元格
colspan:单元格向右跨越几列
rowspan:单元格向下跨越几行
<!-- table>tr*2>td{aaa$}*3 -->
<table border="1">
<tr>
<td colspan="3">aaa2</td>
</tr>
<tr>
<td>aaa1</td>
<td>aaa2</td>
<td>aaa3</td>
</tr>
</table>
<!-- rowspan -->
<table border="1">
<tr>
<td rowspan="3">bbb1</td>
<td>aaa2</td>
<td>aaa3</td>
</tr>
<tr>
<td>aaa2</td>
<td>aaa3</td>
</tr>
<tr>
<td>aaa2</td>
<td>aaa3</td>
</tr>
</table>
p/br
p标签表示段落
<br />表示换行
行内标签
span
无语义行内标签，作为容器使用。
<span style="background:red;height: 1000px;">Lorem, ipsum dolor.</span>
<span style="background:red;">Lorem, ipsum dolor.</span>
a表示链接，href表示链接的地址
绝对路径:从盘符开始的路径就是绝对路径。
相对路径:没有盘符，从当前路径开始。当前操作的文件所在的路径就是当前路径，用.表示。
空链接
<a href="###">空链接</a>
1
title 属性表示鼠标悬停到链接上时的提示文本
锚点:页面内跳转称为锚点。
img
img 表示图片,有语义标签。
src表示图片的地址。
alt 图片加载失败后的提示文本
title 鼠标悬停的提示文本
<!-- 1.img.src -->
<img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2599516185,3761655849&fm=58&bpow=447&bpoh=737" alt="">
<img src="./img/1.jpg">
<!-- base64 -->
.... 64位的图片编码现在用的很少了
img 可以设置宽高。
strong/em/var
var/strong/em 都表示强调。
<!-- var/strong/em -->
<var>我是强调</var>
<strong>我是强调</strong>
<em>我是强调</em>
实际开发过程中，三个标签会被降级成无语义标签用于容器。
作为后台开发人员，如果需要没见过的标签 => 测试属于行内标签还是块标签。
form 表单
表单form用于向后台提交数据。
<form action="" method="POST">
.....
</form>
action 表示后台处理程序。
method 表示提交方式get/post
<!-- form -->
<form action="###" method="POST">
<!-- 1.单行文本输入框 -->
用户名:<input type="text" name="user" /> <br />
密码:<input type="password" name="pwd" /> <br />
<!-- 2.多行文本输入框 -->
<textarea cols="30" rows="10" name="info"></textarea> <br />
<!-- 3.单选按钮 -->
<input type="radio" name="sex" checked value="男"> 男
<input type="radio" name="sex" value="女"> 女
<br />
<!-- 4.多选 -->
爱好:
<input type="checkbox" checked name="hobby" value="写代码"> 写代码
<input type="checkbox" name="hobby" value="打游戏"> 打游戏
<input type="checkbox" name="hobby" value="旅游"> 旅游
<input type="checkbox" name="hobby" value="泡妞"> 泡妞
<br />
<!-- 5.下拉列表 -->
理想的城市:
<select name="">
<option value="">请选择...</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
<option selected value="北京">北京</option>
<option value="上海">上海</option>
</select>
<br />
<!-- 6.隐藏域 -->
<input type="hidden" value="10">
<!-- 6.按钮 -->
<input type="button" value="普通按钮" />
<input type="reset" value="重置" />
<input type="submit" value="提交" />
</form>
总结
[1] form 用于提交表单,input等表单元素不能脱离form使用。
[2] form 是块元素，input等表单元素都是行内元素,且可以设置宽高。
调试工具
所有浏览器 右键->检查元素/查看元素/检查 启动devTools,快捷键F12。
其中以谷歌和火狐浏览器的调试工具，也叫开发者工具，最好用。
---------------------
版权声明：本文为CSDN博主「NotaChtholly」的原创文章，遵循CC 4.0 by-sa版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_41321790/article/details/98517529