html基础手册（html入门核心）
前言（学习目的）：
在学习javase前，先对页面的结构进行初略的了解，以便为后期的学习打好基础。本文初始目的是为了自己的学习，记录自己学习中的难题与进步。
希望能看到的朋友能在错误上进行指点，如果本博客内容有对你提供到帮助，也请能发表评论。
开发工具
在学习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="今日头条,西瓜视频,，抖音，轻颜相机"> <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">
1
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等
块标签
有语义标签，表示标题。
<!-- h1-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
a表示链接，href表示链接的地址
绝对路径:从盘符开始的路径就是绝对路径。
相对路径:没有盘符，从当前路径开始。当前操作的文件所在的路径就是当前路径，用.表示。
空链接
<a href="###">空链接</a>
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">
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等表单元素都是行内元素,且可以设置宽高。
我是小川，一枚计算机专业单身狗，不定期分享计算知识，分享大学生活，喜欢我的话，关注我吧！
,
免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
