Web基本知识点梳理
<h2 style="color: black; text-align: left; margin-bottom: 10px;">HTML</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">概念：HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”，<span style="color: black;">重点</span>是<span style="color: black;">经过</span>HTML标签对网页中的文本、<span style="color: black;">照片</span>、声音等内容进行描述。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">格式</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">HTML有自己的语法格式约定：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><</span><span style="color: black;">HTML</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">head</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">meta</span> <span style="color: black;">charset</span><span style="color: black;">=</span><span style="color: black;">"UTF-8"</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">meta</span> <span style="color: black;">http-equiv</span><span style="color: black;">=</span><span style="color: black;">"X-UA-Compatible"</span> <span style="color: black;">content</span><span style="color: black;">=</span><span style="color: black;">"IE=edge"</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">meta</span> <span style="color: black;">name</span><span style="color: black;">=</span><span style="color: black;">"viewport"</span> <span style="color: black;">content</span><span style="color: black;">=</span><span style="color: black;">"width=device-width, initial-scale=1.0"</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">head</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">body</span><span style="color: black;">></span>
//TODO...
<span style="color: black;"></</span><span style="color: black;">body</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">HTML</span><span style="color: black;">></span>
</div><html> 标签： <span style="color: black;">表率</span>当前书写的是一个HTML文档 <head>标签：存储的本页面的<span style="color: black;">有些</span><span style="color: black;">要紧</span>的信息，它不会<span style="color: black;">表示</span> <head>标签：有一个子标签<title>它是用于定义页面的标题的 <body>标签：书写的内容会<span style="color: black;">表示</span>出来<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">归类</span> </p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在HTML页面中，带有“< >”符号的元素被<span style="color: black;">叫作</span>为HTML标签，如上面<span style="color: black;">说到</span>的 HTML、head、body都是HTML标签。<span style="color: black;">所说</span>标签<span style="color: black;">便是</span>放在“< >” 标签符中<span style="color: black;">暗示</span>某个功能的编码命令，<span style="color: black;">亦</span><span style="color: black;">叫作</span>为HTML标签或 HTML元素。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">双标签</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><</span><span style="color: black;">body</span><span style="color: black;">></span>文字<span style="color: black;"></</span><span style="color: black;">body</span><span style="color: black;">></span></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">单标签</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><</span><span style="color: black;">br</span><span style="color: black;">/></span></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">标签关系</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">标签关系就分为两种：并列关系和嵌套关系。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">并列关系</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><</span><span style="color: black;">head</span><span style="color: black;">></</span><span style="color: black;">head</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">body</span><span style="color: black;">></</span><span style="color: black;">body</span><span style="color: black;">></span>
</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">嵌套关系</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><</span><span style="color: black;">head</span><span style="color: black;">><</span><span style="color: black;">title</span><span style="color: black;">></</span><span style="color: black;">title</span><span style="color: black;">></</span><span style="color: black;">head</span><span style="color: black;">></span></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">平常</span>标签样式</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">换行标签</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><</span><span style="color: black;">br</span><span style="color: black;">/></span></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">段落标签</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><</span><span style="color: black;">p</span><span style="color: black;">></</span><span style="color: black;">p</span><span style="color: black;">></span></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">水平线标签</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><</span><span style="color: black;">hr</span><span style="color: black;">></</span><span style="color: black;">hr</span><span style="color: black;">></span></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">行内标签</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span></span></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">块标签</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><</span><span style="color: black;">div</span><span style="color: black;">></</span><span style="color: black;">div</span><span style="color: black;">></span></div>div和span都<span style="color: black;">能够</span>起到容器的<span style="color: black;">功效</span>，区别是什么？div标签会自动换行，span标签不会div划分整体，span划分局部<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">字体标签</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><</span><span style="color: black;">font</span><span style="color: black;">></</span><span style="color: black;">font</span><span style="color: black;">></span></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">标题标记标签</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><</span><span style="color: black;">h1</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">h2</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">h3</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">h4</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">h5</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">h6</span><span style="color: black;">></span>
</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">标题标签中h1最大h6最小，会自动换行，会字体加粗，还会有<span style="color: black;">必定</span>距离</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">没</span>序列表标签</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><</span><span style="color: black;">ul</span><span style="color: black;">></</span><span style="color: black;">ul</span><span style="color: black;">></span></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">有序列表标签</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><</span><span style="color: black;">ol</span><span style="color: black;">></</span><span style="color: black;">ol</span><span style="color: black;">></span></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">图像标签</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><</span><span style="color: black;">img</span><span style="color: black;">></</span><span style="color: black;">img</span><span style="color: black;">></span></div>src：<span style="color: black;">表率</span><span style="color: black;">照片</span>路径width和height分别<span style="color: black;">表率</span>宽高alt：<span style="color: black;">倘若</span><span style="color: black;">照片</span>不<span style="color: black;">表示</span>，默认<span style="color: black;">表示</span>文本信息title：鼠标悬停时，<span style="color: black;">表示</span>文本信息align：<span style="color: black;">照片</span>附件文字对齐方式<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">超链接标签</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><</span><span style="color: black;">a</span><span style="color: black;">></</span><span style="color: black;">a</span><span style="color: black;">></span></div>href：<span style="color: black;">表率</span><span style="color: black;">转</span>路径target：规定在何处打开这个链接文档。blank<span style="color: black;">暗示</span>新窗口，self为当前窗口<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">表格标签</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><</span><span style="color: black;">table</span><span style="color: black;">></</span><span style="color: black;">table</span><span style="color: black;">></span>
//表格中的行
<span style="color: black;"><</span><span style="color: black;">tr</span><span style="color: black;">></</span><span style="color: black;">tr</span><span style="color: black;">></span>
//表格中的单元格
<span style="color: black;"><</span><span style="color: black;">td</span><span style="color: black;">></</span><span style="color: black;">td</span><span style="color: black;">></span>
</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">表单标签</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><</span><span style="color: black;">form</span><span style="color: black;">></</span><span style="color: black;">form</span><span style="color: black;">></span></div>action：<span style="color: black;">全部</span>表单提交的目的地method：表单提交的方式。get<span style="color: black;">或</span>post<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">表单中的元素标签</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">//用于搜集用户信息，<span style="color: black;">按照</span>type属性值的<span style="color: black;">区别</span>，样式<span style="color: black;">区别</span>
<span style="color: black;"><</span><span style="color: black;">input</span><span style="color: black;">></</span><span style="color: black;">input</span><span style="color: black;">></span>//下拉列表<span style="color: black;"><</span><span style="color: black;">select</span><span style="color: black;">></</span><span style="color: black;">select</span><span style="color: black;">></span>
//文本域
<span style="color: black;"><</span><span style="color: black;">textarea</span><span style="color: black;">></</span><span style="color: black;">textarea</span><span style="color: black;">></span>
</div>text：默认值，文本输入框password：<span style="color: black;">暗码</span>样式checkbox：复选框radio：单选file：文件上传reset：重置按钮submit：提交按钮button：普通按钮<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">框架标签</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><</span><span style="color: black;">frameset</span><span style="color: black;">></</span><span style="color: black;">frameset</span><span style="color: black;">></span></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">重视</span>：框架标签和body标签<span style="color: black;">不可</span>共存。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">元信息标签</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">//当前页面的字符编码
<span style="color: black;"><</span><span style="color: black;">meta</span> <span style="color: black;">charset</span><span style="color: black;">=</span><span style="color: black;">"UTF-8"</span><span style="color: black;">></span>
//窗口的宽度为设备宽度 文字和图形初始比例为1.0
<span style="color: black;"><</span><span style="color: black;">meta</span> <span style="color: black;">name</span><span style="color: black;">=</span><span style="color: black;">"viewport"</span> <span style="color: black;">content</span><span style="color: black;">=</span><span style="color: black;">"width=device-width, initial-scale=1.0"</span><span style="color: black;">></span>
//任何IE版本都以当前版本所支持的最高级标准模式渲染
<span style="color: black;"><</span><span style="color: black;">meta</span> <span style="color: black;">http-equiv</span><span style="color: black;">=</span><span style="color: black;">"X-UA-Compatible"</span> <span style="color: black;">content</span><span style="color: black;">=</span><span style="color: black;">"ie=edge"</span><span style="color: black;">></span>
</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">重视</span>：元信息标签<span style="color: black;">必要</span>写在头标签之间。</p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">CSS</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">概念：CSS指层叠样式表(Cascading Style Sheets) ，<span style="color: black;">重点</span>用于设</p>
谢谢、感谢、感恩、辛苦了、有你真好等。 请问、你好、求解、谁知道等。 我完全同意你的观点，说得太对了。
页:
[1]