第二章HTML基础
1、web相关名词
www:当前的互联网服务（所谓的服务是用户通过客户端与服务器进行信息的交换）
客户端：用户用来访问服务器的设备
服务端：给用户提供访问服务的设备
URL：写在浏览器地址栏中的一长串内容，包括协议、域名、端口号、路径、参数
网站：多个网页组合而成的集合
网页由人使用HTML编写而成，前端使用HTML编写代码，然后由浏览器将其渲染解析成相应的图形界面
前端三大组成部分：HTML（结构）{超文本标记语言}、样式（CSS）、JS（行为、动作）
2、HTML语法规则（HTML由正确嵌套的标签构成）
（1）标签分为：单标签【 <单标签名称/> 】、双标签【<双标签名称> </双标签名称>】
（2）属性的语法
属性名=“属性值”（键对值或KV对）
（3）空格和换行的实现方式
空格( ) 换行<br/>
（4）HTML基础标签
HTML骨架标签
<!DOCTYPE HTML>
-- 文档类型是html
<html> </html>
-- 页面中最外层标签--根标签
<head> </head>
-- 网页头部标签-里面内容主要是给浏览器看的内容
<meta charset="UTF-8">
-- 页面编码标准
<title> </title>
-- 网页标题标签-里面内容会显示在浏览器窗口标签上
<body> </body>
-- 网页主体标签-里面内容显示在浏览器的窗口中
标题段落标签
标题标签p1-p6 （双标签） 段落标签p（双）
文字标签（双标签）
弱语义：加粗（b） 删除（s）倾斜（i）
强语义：加粗（strong） 删除（del）倾斜（em）
布局标签（无语义）
独占一行 大盒子 div
非独占一行 小盒子 span
特殊标签
注释ctrl+?(表示注释的内容只会在源码中显示，不会在网页中显示)
图片标签：<img src=”” title=”” alt=””/>
【src代表图片，title代表鼠标悬停在图片时的提示文字，alt代表图片无法正常加载时候显示的文字，一般是对图片内容的描述】
标签语义化：指在合适的地方使用合适的标签，好处：在搜索引擎中排名更靠前，获得更多的点击率
3、HTML基础
（1）路径（绝对路径和相对路径）
绝对路径：从盘符（根目录）为起点--找到目标文件--经过目录用/隔开（资源路径不能保证不会变化，所以不用绝对路径）
相对路径：?同级路径：直接写目标文件
?下级路径：下级目录/目标文件
?上级路径：../目标文件
（2）超链接（使用<a></a>标签实现）
点击的内容：<a>请点击我</a>
跳转的位置：<a >点击的内容</a>
<a href="本地资源相对路径">点击的内容</a>
新窗口打开链接地址：<a href="本地资源相对路径" target="_blank">点击的内容</a>
空链接（点击后不会发生页面跳转）：1. <a href="#">点击的内容_点击后不跳转</a>
1. 一个#号点击后会瞬移到页面顶部
2. <a href="###">点击的内容_点击后不跳转</a>
2. <a href="javascript:;">点击的内容_点击后不跳转</a>
3. <a href="javascript:void(0);">点击的内容_点击后不跳转</a>
（3）表单（通过method收集用户数据，通过action提交给后台某个程序，get表示明文传送，post表示加密传送）
表单标签：<form action=””method=”post”>内容</form>
表单元素标签：?<input type=””/>
type属性指定元素类型包括：
文本框-text（提示内容--添加属性placeholder="提示内容"）
密码框-password（输入内容被星号*代替）
单选按钮-radio（单选实现--多个单选按钮设置相同name属性值）（默认选中添加属性checked=“checked”）
多选框-checkbox（默认选中添加属性checked=“checked”）
扩大表单范围（即选中文字也可以选中）：<label></label>
文字部分填入双标签之间
添加属性for="表单元素的id属性值"
<label for="id值">被点击的内容</label>
效果:点击文字可以选中表单元素
普通按钮-butoon（按钮显示内容--添加属性value=“按钮”）
重置按钮-reset（按钮显示内容--添加属性value=“重置”）
提交按钮-submit（按钮显示内容--添加属性value=“提交”）
?下拉框标签：<select></select>
<select>
<option>选项1</option>
<option>选项2</option>
</select >
(选项默认选中在option中添加属性selected="selected")
?文本域标签：<textarea></textarea>
rows -- 行
cols -- 列
但是一般不通过这两个属性设置文本域的大小,而使用CSS来设置
同时 -- 文本域会通过CSS来关闭大小缩放功能
这两个操作都是避免文本域的兼容性问题
?列表标签
无序列表：
<ul>
<li>内容</li>
<li>内容</li>
</ul>
有序列表：
<ol>
<li>内容</li>
<li>内容</li>
</ol>
推荐了解热门学科
传智播客是一家致力于培养高素质软件开发人才的科技公司，“黑马程序员”是传智播客旗下高端IT教育品牌。自“黑马程序员”成立以来，教学研发团队一直致力于打造精品课程资源，不断在产、学、研3个层面创新自己的执教理念与教学方针，并集中“黑马程序员”的优势力量，针对性地出版了计算机系列教材50多册，制作教学视频数+套，发表各类技术文章数百篇。
传智播客从未停止思考
传智播客副总裁毕向东在2019IT培训行业变革大会提到，“传智播客意识到企业的用人需求已经从初级程序员升级到中高级程序员，具备多领域、多行业项目经验的人才成为企业用人的首选。”
中级程序员和初级程序员的差别在哪里?
项目经验。毕向东表示，“中级程序员和初级程序员最大的差别在于中级程序员比初级程序员多了三四年的工作经验，从而多出了更多的项目经验。“为此，传智播客研究院引进曾在知名IT企业如阿里、IBM就职的高级技术专家，集中研发面向中高级程序员的课程，用以满足企业用人需求，尽快补全IT行业所需的人才缺口。
何为中高级程序员课程?
传智播客进行了定义。中高级程序员课程，是在当前主流的初级程序员课程的基础上，增加多领域多行业的含金量项目，从技术的广度和深度上进行拓展。“我们希望用5年的时间，打造上百个高含金量的项目，覆盖主流的32个行业。”传智播客课程研发总监于洋表示。
黑马程序员热门视频教程
JavaEE
鸿蒙应用开发
集成电路应用开发
人工智能开发
AI+Linux云计算运维
Python+大数据开发
跨境电商
AI+设计
AI测试
新媒体+短视频
HTML&JS+前端
