HTML5-基础语法
为什么要学习HTML5
1>未来的一种趋势
2>增加面试,开发竞争力
前端工程师:HTML、CSS、JavaScript、框架使用
互联网原理:
请求数据。
用户通过在浏览器输入一个网址,通过HTTP协议向服务器发送一个请求,服务器做出响应,将相关的网页数据传输到本地计算机,在浏览器上渲染出来。
【输入网址->Browser发送请求->Server做出响应-> Browser获取网页数据->视图渲染】
数据:文字、图片、视频、音频等。
服务器:Server保存我们的数据。
浏览器:Browser。作用:HTTP请求的发起、接收,都是由浏览器来完成的。IE、谷歌(Chrome)、火狐(FireFox)、苹果(Safari)、欧朋
临时文件夹作用:第二次访问同一个网站速度会变快,因为第一次浏览的时候,大部分文件已经缓存到本地了。
Http请求
HTTP发送请求的方法:直接输入网址,点击超链接。
请求:Request,浏览器根据网址向对应的服务器发送请求。
响应:Response,服务器根据请求响应文件,将页面数据传输给客户端,在浏览器中进行页面的渲染。访问页面时会同时发送多个HTTP请求,包含网页的图片,视频,音频等文件。
手机App的开发模式
1>原生(纯OC)
2>纯HTML5
3>原生+HTML5
4>React Native
网页的组成:
一个有具体功能的完整的页面,一般由三部分组成
①HTML: 网页的具体内容和结构
②CSS: 网页的样式
③JavaScript【掌握】网页的交互效果,比如对用户鼠标事件作出响应。
什么是HTML:
HyperText Markup Language, 超文本标记语言, 其实就是文本,由浏览器负责将它解析成具体的网页内容。
HTML组成:N个标签(节点、元素、标记组成)
简单的HTML结构
<!--网页三要素:关键字,描述,标题--> <!DOCTYPE html> <!--声明文档类型,向下兼容老版本--> <html lang="en"> <!-- 网页最大的便签,圈地 lang=“en”网页翻译用的 --> <head><!-- 设置网页的基本信息,与浏览器通信--> <!--设置语言的编码格式,一般采用UTF-8--> <meta charset="UTF-8"> <!-- 设置关键词方便搜索引擎查找 --> <meta name="Keywords" content="简单的HTML结构"> <!-- 设置网页描述信息--> <meta name="Description" content="简单的HTML基础语法讲解"> <!-- 设置标题--> <title>简单的HTML结构</title> </head> <!--网页主题结构标签 给用户看的--> <body> <div > <p>简单的HTML结构~</p> </div> <!--script:定义客户端脚本元素既可以包含脚本语句,也可以通过 src 属性指向外部脚本文件。 必需的type 属性规定脚本的 MIME 类型。--> <script type="text/javascript"> </script> </body> </html>
HTML语法:
<!-- 1.标签之间对空格、换行、缩进是不敏感。 --> 标签对之间对嵌套敏感。注意:标签嵌套注意缩进。 <!-- 2.文本内容空白折叠现象。--> 我们文本内容对空格、换行、缩进会进行折叠。不管你有多少个空格、换行、缩进。在网页中只显示一个空格,这种现象就是空白折叠现象。 <!--3.标签语法 --> ①双标签必须成对出现(有开始和结束标签),单标签除外.<button></button>.【单标签 <img>】 ②标签必须写在一对尖括号里,里面书写标签名。 ③结束标签必须书写结束符号/。 ④标签的分类:容器级标签、文本级标签 【h1是一个容器级标签,内部可以书写任何内容,包括标签和任何文本】 【p标签是文本级标签,可以书写文本级内容,本文,图片,表单元素,font,b,u,i等废弃标签】 H:容器级标签,可以存放Div,ul。 <h2> <div>这是Div</div> <p>这是段落</p> </h2> <!--文本级标签--> <p> <img src="images/2.jpg" alt=""> </p>
①H系列标签 容器级标签,可以存放Div,ul。
用于给文本添加标题,语义,不能添加样式, 共6级,H1最大,H6最小. (h-Headline的缩写) 注意:h系列标签不能相互嵌套
<!--注意点: 1.H标签是给文本添加标题语义的,而不是用来修饰文本样式的 2.H标签一共有6个,从H1到H6,最多只能到6,超过6则无效 3.被H系列标签包裹的内容会独占一行 4.在H系列的标签中,H1最大,H6 最小 5.在企业开发中,一定要慎用H系列的标签,特别是H1标签,在企业开发中一般情况下一个界面只能出现一个H1 标签 和SEO 有关 --> <h1>我是标题h1</h1> <h2>我是标题h2</h2> <h3>我是标题h3</h3> <h4>我是标题h4</h4> <h5>我是标题h5</h5> <h6>我是标题h6</h6> 我是普通文本h7
②P标签,Paragraph的缩写,表示一个段落(段落标记). [文本级的标签,只能书写文字或者图片以及表单元素,font等废弃标签].
语义:给文本添加段落的一个语义。
<p> 我是段落p </p>
标签br和p有什么区别?
<br>是强制换行(让后面的文字、图片强制换行),<p>是段落。换行后<br>不会空行,而<p>换行后会空一行。
<hr>标签,是分割线
字符实体表
显示结果----------描述----------实体名称----------实体编号 ---------------------空格---------- ----------  <--------------------小于号---------- <---------- < >--------------------大于号---------- >---------- > &--------------------和号---------- &---------- & "--------------------引号---------- " ---------- " '--------------------撇号---------- ' (IE不支持)---------- ' ¢--------------------分---------- ¢---------- ¢ £--------------------镑---------- £---------- £ ¥--------------------日圆---------- ¥---------- ¥ €--------------------欧元---------- €---------- € §--------------------小节---------- §---------- § ©--------------------版权----------©---------- © ®--------------------注册商标---------- ®---------- ® ™--------------------商标---------- ™---------- ™ ×--------------------乘号---------- ×---------- × ÷--------------------除号---------- ÷---------- ÷
③img图像标签
src指定图片路径,width和height设置图片宽高,alt 设置占位文字,文件路径或者文件名格式错误,则无法加载图片
<img src="images/1.jpg" width="450" height="700" alt="未加载图片">
图片路径:
我们可以通过路径查找到目标文件。路径分为相对路径和绝对路径。
相对路径:从文件本身出发进行目标文件查找。
1>同级路径查找:直接书写文件名+扩展名
<img src="home.png" alt="">
2>子级路径查找:书写文件夹名称+/继续查找,一直查找到需要的目标文件,最终是文件名+扩展名
<img src="images/demo/home.png" alt="">
3>上级路径查找:【跳出当前文件夹】../+所需要的文件夹的名字/,继续查找,一直查找到需要的目标文件,最终是文件名+扩展名
<img src="../img/images/home.png" alt="">
注意:1 ../只能出现在路径的开头,只能出现一层。
2 相对路径不能跨盘符查找
绝对路径:从盘符出发进行目标文件查找
①从盘符出发进行查找。
可以双击路径栏
/Users/MengYu/Desktop/img/images/home.png
把文件直接拖拽到浏览器中,网址就是图片的绝对路径:
file:///Users/MengYu/Desktop/img/images/home.png
②以http://开头的网址都是绝对路径(常用)
http://a.hiphotos.baidu.com/baike/w%3D268%3Bg%3D0/sign=e49b8c6c3d9b033b2c88fbdc2df551ee/
④a超链接
使用方法:
href:是设置超级链接跳转路径。
title:设置鼠标悬停文本
target:目标,设置超级链接打开方式。
<a href="https://www.baidu.com" target="打开方式" name="页面锚点名称">链接文字或者图片</a>
<!--href :引入链接的地址,可以是一个网页,也可以是一个视频、图片、音乐等等.--> <!--href="#"当前页面刷新--> <!--href="//jd.com" 也可以跳转--> <!--默认target属性是self 当前窗口打开 回得来--> <!--target="_blank" 新建一个窗口打开 回不来--> <!--target="_self" 在当前窗口打开--> <!--target="_parent" 在父窗口打开--> <!--target="_top" 在顶层窗口打开--> <a target="_parent" href="http://www.jd.com">我的超链接</a><br> <!--# 表示当前页面--> <a href="#">当前页面刷新</a><br> <!--href 是引入--> <a href="//jd.com">京东</a>
1.根据id值进行跳转
<a href="#tiaozhaun1">跳转到标题1</a> <h3 id="tiaozhaun1">标题1</h3>
2根据name值进行跳转
<a href="#tiaozhaun2">跳转到标题2</a> <a href="" name="tiaozhuan2"></a>
跳转到页面顶部和底部和中部:通过 name 和 href 属性 #+定义的name 名称
<a href="#bottom">跳转到底部</a> <a href="#middle">跳转到中部</a> <p>原标题:他们用一生诠释“我爱你中国”!背后的故事太感!</p> <a name="middle"></a> <h1>这是中部</h1> <a href="#top" name="bottom">跳转到定部</a> <a href="#middle">跳转到中部</a>
设置超链接样式
1>link 设置连接颜色
<body link="blue"></body>
2>vlink 已经访问了的链接颜色
<body vlink="yellow"></body>
3>alink 正在被点击的链接颜色
<body alink="red"></body>
⑤列表标签有3种:有序列表、无序列表、定义列表
1.无序列表ul:
给我们的文本添加无序的列表语义。每一项之间没有顺序的先后之分。
ul无序列表;li 列表项。两个标签必须同时出现,不能单独书写。
ul里可以嵌套一个或多个li标签。
ul里面只能放li标签,不能放其他内容。
容器级标签,可以放置任何的内容标签,甚至可以放置ul>li.
ul和li只能添加无序列表的语义,不会给你增加前面小圆点的样式。
<ul> <li>苹果</li> <li>华为</li> <li>小米</li> </ul> list-style: none;/*清楚列表指示器*/清楚点点点...
2.有序列表ol:
给文本添加有序列表的语义
ol: ordered list 有序的列表 li:列表项
必须同时出现,ol只能嵌套li标签,li不能脱离ol自己出现。ol可以嵌套多个li.
虽然显示会有阿拉伯数字排序,但ol的作用仅仅是添加有序列表的语义,数字样式不是ol的作用。
快捷键:生成嵌套关系的快捷键:ol > li + Tab键
生成多个同种标签 ol > li* 3 + Tab键
<ol> <li>html成绩</li> <li>css成绩</li> <li>js成绩</li> <li>node成绩</li> </ol>
3.定义列表 dl,dt,dd:(名词解释)
定义列表包含3个标签:dl,dt,dd
给我们的文本添加定义列表的语义。
dl:definition list 定义列表
dt :definition title 定义标题
dd:definition Description 定义描述
dl里面嵌套dt和dd。dt和dd同一级的标签。dd是对dt的解释、说明、定义。dl里面只能放置dt和dd.
dt和dd都是容器级标签,里面的内容是不受限制的。
dl里面可以放置多个dt和dd.dt后面的dd可以有多个,这些dd都是在解释上面的dt,dt后面可以没有dd表示没有解释说明。
实际工作中,经常将每一组dt和dd单独放在一个dl标签内部。
<dl> <dt>苹果</dt> <!--dd是对dt的解释--> <dd>公司有多种产品,手机,平板,台式电脑,手表</dd> <dt>三星</dt> <dd>三星是一个韩国公司,最近有一个爆炸门事件</dd> <dt>华为</dt> <dd>华为是一个本土公司,企业感比较强</dd> </dl>
总结:根据需要和语义决定使用哪种列表。
⑥Div和Span
1.div和span的语义
<div>今天是HTML第二天的学习!</div> <div>今天是HTML第二天的学习!</div> <div>今天是HTML第二天的学习!</div> <span>今天是HTML第二天的学习!</span> <span>今天是HTML第二天的学习!</span> <span>今天是HTML第二天的学习!</span>
语义:div是大的区域,span是小的跨度区域
div:块级元素 division 范围,区域,分割 容器级标签,可以放置任何标签和内容。(本身在网页中没有任何的默认样式,里面可以存放一些相近、相同功能的标签。会把div内部的元素分割成一个小的区域)
span:内联元素 小范围,小跨度。文本级的标签,只能放文字、图片、表单元素等。
大的内容放在div里,小的元素放在span div是独占一行,span只会占用一小部分,内容多少就占多少,是静态排列。
span和div嵌套关系:<div><span></span></div>
div+css 布局,结构和样式分离
盒模型
盒子外边距 margin
盒子内边距 padding
盒子边框宽度 border
盒子宽度:width
盒子高度:height
⑦table表格
1、
tr:table rows 表格的行
td:table dock 单元格
border:设置分割线的宽度,以及样式
cellspacing 规定单元格之间的空白。
cellpadding 规定单元边沿与其内容之间的空白
frame 规定外侧边框的哪个部分是可见的
rules 规定内侧边框的哪个部分是可见的
caption 设置表格的标题
三个标签的一个嵌套关系:table > tr > td
最简单的,要求每一行的单元格个数都相同;
如果表格有表头的概念,只需要将tr换成th(table head)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML表格</title> <style> </style> </head> <body> <table width="960px" height="240" border="1px" align="center" cellspacing="2px" cellpadding="4px" frame="box" rules="all"> <caption align="top">表格的标题</caption> <tr bgcolor="#d3d3d3" align="left" valign="center"> <!--width="100px" height="80" rowspan="2" colspan="2"--> <th bgcolor="blue" align="center">班级</th> <th>姓名</th> <th>年龄</th> <th>成绩</th> </tr> <tr> <td>四年级一班</td> <td>张三</td> <td>16</td> <td>80</td> </tr> <tr> <td>四年级一班</td> <td>李四</td> <td>18</td> <td>85</td> </tr> <tr> <td>四年级一班</td> <td>王五</td> <td>17</td> <td>99</td> </tr> <tr> <td>四年级一班</td> <td>刘三</td> <td>19</td> <td>88</td> </tr> </table> </body> </html>
//案例二+表头thead
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格复杂练习</title> <style> th,td{ width: 200px; text-align:center; } </style> </head> <body> <table border="1"> <!--表格标题部分--> <caption>各地区固定资产投资情况</caption> <!--表头--> <thead> <tr> <th rowspan="2">地区</th> <th colspan="2">按总量分</th> <th colspan="2">按比重分</th> </tr> <tr> <th>自年初累计(亿元)</th> <th>比去年同期增长(%)</th> <th>自年初累计(%)</th> <th>去年同期(%)</th> </tr> </thead> <!--表格主题部分--> <tr> <td>全国</td> <td>187670.98</td> <td>9.6</td> <td>100.0</td> <td>100.0</td> </tr> <tr> <td>东部地区</td> <td>84509.91</td> <td>10.9</td> <td>45.0</td> <td>44.6</td> </tr> <tr> <td>北京市</td> <td>2200.84</td> <td>7.0</td> <td>1.2</td> <td>1.2</td> </tr> <tr> <td>天津市</td> <td>2200.84</td> <td>7.0</td> <td>1.2</td> <td>1.2</td> </tr> <tr> <td>河北省</td> <td>2200.84</td> <td>7.0</td> <td>1.2</td> <td>1.2</td> </tr> </table> </body> </html>
案例3:简单的网页布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简单的网页布局</title> <style> </style> </head> <body topmargin="0" leftmargin="0"> <table border="0" width="960" align="center" cellspacing="0" cellpadding="0"> <tr height="90px" bgcolor="red" align="center"> <td> <font size="6" color="white"><b>网页的头部</b></font> </td> </tr> <tr > <td> <!--使用嵌套表格 --> <table bgcolor="yellow" height="500px" width="30%" align="left"> <tr align="center"> <td> <font size="6" color="white"><b>网页的左部分</b></font> </td> </tr> </table> <table bgcolor="#00ffff" height="500px" width="70%" align="left"> <tr align="center"> <td> <font size="6" color="white"><b>网页的右部分</b></font> </td> </tr> </table> </td> </tr> <tr height="90px" bgcolor="#f4a460" align="center"> <td> <font size="6" color="white"><b>网页的底部</b></font> </td> </tr> </table> </body> </html>
2、合并单元格
td有两个属性可以合并单元格。
rowspan : 跨行合并
colspan:跨列合并
属性值:是几就合并几个单元格。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>合并单元格</title> <style> td{ width: 100px; } </style> </head> <body> <table border="1"> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td rowspan="2">6</td> <td colspan="2">7</td> <td>8</td> <td>9</td> </tr> <tr> <td colspan="4">10</td> </tr> <tr> <td>11</td> <td colspan="2">12</td> <td colspan="2">13</td> </tr> </table> </body> </html>
⑧Form表单
用于为用户创建HTML表单,向服务器传输数据。
action 规定当提交表单时向何处发送表单数据。
method 用于规定发送form-data的HTTP方法。
target 规定在何处打开action URL
1>单行文本框
<form action="1.php" method="post"> <p> 单行文本框(账号) <input type="text" name="手机号" value="15136485334" placeholder="请输入手机号????"> </p> </form>
2>密码框
<p> 密码框 <input type="password" placeholder="请输入密码"> </p>
3>单选按钮
<p> 单选按钮 <input type="radio" name="gender">男 <input type="radio" name="gender">女 <input type="radio" name="gender">保密 </p>
4>文本域(textarea),相当于OC-UITextView
<p> 文本域(相当于OC的UITextView) <textarea name="" id="textView" cols="30" rows="10">请输入多行文字,我是一个文本域!</textarea> </p>
5>下拉框
<p> 下拉框: <select name="city" > <option value="北京市">北京市</option> <option value="上海市">上海市</option> <option value="杭州市" selected="selected">杭州市</option> <option value="郑州市">郑州市</option> </select> </p>
6>按钮
<p> <input type="button" value="按钮"> </p>
7>重置
<p> <input type="reset" value="重置"> </p>
8>提交表单submit
<p> <!--submit 此操作会向浏览器提交用户输入的内容,格式为:name=value 即手机号=15136485334--> <input type="submit" value="提交"> </p>
⑨结构性标签:负责上下文的语义
article 文章主题内容
footer 标记脚部分区域内容
section 区域章节描述
nav 菜单导航,链接导航
案例:新闻详情页
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>罕见!部委和省级党政一把手,为了这件事密集出镜</title> </head> <body> <!--文章--> <article> <!--头部--> <header> <h2>罕见!部委和省级党政一把手,为了这件事密集出镜</h2> <h4>百家号11-1708:53</h4> </header> <!--内容--> <p> “比如,有的人提出所谓‘民营经济离场论’,说民营经济已经完成使命,要退出历史舞台;有的人提出所谓‘新公私合营论’,把现在的混合所有制改革曲解为新一轮‘公私合营’;有的人说加强企业党建和工会工作是要对民营企业进行控制,等等。”在11月1日的座谈会上,说。 </p> <img width="60%" height="300" src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=236939424,2143050445&fm=173&app=49&f=JPEG?w=640&h=430&s=8B1A6585089B2ECE7C3808630300E048" alt=""> <p> 在座谈会召开之后,两高先后召开会议对座谈会上的讲话精神进行传达。就在11月14日,*政法委全体会议召开,在这个*政法委书记郭声琨、*部部长赵克志、最高法院院长周强、最高检检察长张军出席的会议上,审议了一个重要文件——*政法委关于依法保障和服务民营企业健康发展的指导意见。 </p> <img width="60%" height="300" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=582020858,3268209347&fm=173&app=49&f=JPEG?w=640&h=435&s=7D925B9F160D40EC3CF5F0F103000031" alt=""> <br> <a href="#"> 回到顶部 </a> </article> <hr> <meter value="60" max="100" min="20"></meter><br> <progress value="100" max="200"></progress> </body> </html>
转载于:https://www.cnblogs.com/StevenHuSir/p/HTML_Grammar.html