千锋逆战班学员教你从零基础了解HTML5的知识

H5基本结构：
基本结构分为：

< head>描述区< /head>

< body>内容区< /body>

 具体：<!DOCTYPE html> <!--声明文档类型--><html lang="en">  <!--根标记、根标签、根元素   lang="en" 语言形态--><head><!-- head描述区 --><meta charset="UTF-8"><!-- 字符编码格式   UTF-8  国际性编码格式--><!-- charset="GB2312/GBK" --><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 控制视口的比例 --><meta http-equiv="X-UA-Compatible" content="ie=edge"><!-- 按照IE最高版本 去渲染当前网页 --><title>欢迎走入胖帅心里</title><!-- 当前网页的标题  - 显示在状态栏上面 --></head><body><!-- 内容区域 -->只要是网页中能看到内容，都是放在body里面胖帅</body></html>

H5语法说明：
标签：
单标签：< br>…
双标签：< p>< /p>…
语法：
< input type=“text”>
input：标签名称
type：属性
text：属性值

     总结： a：在尖角号里面的第一个单词就是标签的名称。b: 在标签后面，用空格隔开是属性c: 属性和属性值之间用等号连接d: 属性值放在引号里面（单双引号都可以）e: 如果一个标签拥有多个属性的时候，属性和属性之间用空格隔开

一、标题标签；h
< h1>< /h1>:一个页面只能有一个，一般放置logo
h2~h6:小标题，默认大小各不一致，文本默认加粗

二、段落标签：p
< p>内容< /p>

三、加粗标签
< b>内容1< /b>
< strong>内容2< /strong>
strong标签更加强调加粗

四、文本倾斜标签：i em
< em>内容1< /em>
< i>内容2< /i>

五、下划线标签
< u>内容3< /u>

六、换行标签：br
内容1< br>内容2
单标签，使用在内容后方，将br标签后的内容2放在下一行显示

七、水平线标签：hr
不常用，用法：
内容
< hr>

八、上下标标签sup sub
< sup>< /sup>双标签，上标
a的平方：a< sup>2< /sup>
双标签，下标
水的化学式：H< sub>2< /sub>O

九、span标签
< span>内容1< /span>
将内容1单独区分出来，在css中设置样式

十、转义字符标签
文本中需要显示字符的样子，使用：
显示空格： & nbsp;
显示左右尖括号：
左尖括号（小于号）<：& lt;
右尖括号（大于号）>：& gt;
显示人民币符号¥：& yen;
显示版权符号©：& copy;

十一、< div>< /div>
div标签：双标签，将网页划分为块的标签，类似于容器。

十二、列表：
无序列表：
代码：
< ul>
< li>内容1< /li>
< li>内容2< /li>
< li>内容3< /li>
< /ul>
内容1、2、3的前面默认自带黑色实心圆且三个内容以上下格式排列。

  有序列表：代码： <ol><li>内容1< /li><li>内容2</li><li>内容3</li></ol>内容1、2、3的前面默认自带序号1、2、3     且三个内容以上下格式排列。自定义列表：也可用于上方图片，下面补充文字进行解释。代码：<dl><dt>属性</dt><dd>对属性的解释</dd></dl>

注：1、改变内容前序号和实心圆的方式 type属性，type=""通过在双引号之间添加属性值来改变内容前的默认样式。
代码：
< ul type=“circle”>
< li>
内容
< /li>
< /ul>

   代码：<ol type="a"><li>内容</li></ol>
2、改变内容开始的符号   start属性，start=""通过在双引号之间添加数字来改变有序列表开始的符号。      代码：<ol start="3"><li>内容</li></ol>

十三、超链接：< a >< /a>
< a href="">内容< /a>
1> href=""，双引号之间填写需要跳转的地址
< a href="" target="">内容< /a>
2> target=""，双引号之间填写跳转的方式
_self或者不写，默认是在当前窗口跳转
_blank实在新窗口打开
3> 提示信息，鼠标移入时会有提示文字
< a href="" title="">内容< /a>
title=""，双引号之间填写提示文字

十四、插入图片：< img>
< img src="" alt="">
1> src=""，双引号之间填写图片的路径
2> alt=""，双引号之间填写的是提示文字，当图片加载失败时显示。
3> 提示信息，鼠标移入图片时会有提示文字
< img src=“路径” alt=“提示文字” title="">
title=""，双引号之间填写提示文字

十五、路径
相对路径：
< img src=“路径” alt="">
1>和目标在同一个教室，你去找他，即同一个目录下：
< img src="./他.jpg" alt="">
2>你在教室外，他在教室内，你去找他，即他在该目录的下一级目录下：
< img src="./教室/他.jpg" alt="">
3>你在教室内，他在教室外，你去找他，即他在该目录的上一级目录下：
< mg src="…/教室/他.jpg" alt="">
4>你在教室A内，他在教室B内，你去找他，即他在不同目录下：
< img src="…/教室A/教室B/他.jpg" alt="">
绝对路径：
不推荐！
eg:
< img src=“https://csdnimg.cn/cdn/content-toolbar/csdn-logo_.png?v=20190924.1” alt="">

十六、表格：< table>< /table>
作用：显示数据！
代码：
< table>
第一行
< tr>
第一行的第一列
< td>111 < /td>
第一行的第二列
< td>222< /td>
< /tr>
第二行
< tr>
第二行的第一列
< td>3333< /td>
第二行的第二列
< td>444< /td>
< /tr>
< /table>

111	222
3333	444

tr:表格的行
td:表格的列

千锋逆战班学员教你从零基础了解HTML5的知识相关推荐

千锋逆战班学习第二十五天
千锋逆战班学习第25天努力或许没有收获,但不努力一定没收获,加油. 今天我学了Java课程的集合. 中国加油!!!武汉加油!!!千锋加油!!!我自己加油!!! 4.有如下代码: public cla ...
千锋逆战班学习第二十三天集合练习（一）
千锋逆战班在千锋"逆战"学习第23天, 每个人生阶段都需要努力去扮好自己的角色,越努力越轻松,越坚强越幸运! 加油! 2(List)有如下代码 import java.util. ...
千锋逆战班学习日志Day47
千锋逆战班学习第47天表单标签 CSS介绍二.CSS和HTML结合 2.1CSS和HTML结合之内联结合 2.2CSS与HTML结合之内部部结合 2.3CSS和HTML结合之外部结合三.访问路径 ...
千锋逆战班学习第二十四天
千锋逆战班在千锋"逆战"学习第24天, 每个人生阶段都需要努力去扮好自己的角色,越努力越轻松,越坚强越幸运! 加油! 1(Object类)有下面代码 interface IA{v ...
1903java全套_#千锋逆战班，java1903#
在千锋"逆战"学习第17天 SpringMVC运行流程: SpringMVC基础配置: 1.web.xml: dispatcherServlet / 2.controller层方法 ...
#千锋逆战班，拼搏永向前#
在千峰"逆战"学习第十一天如果有天我们湮没在人潮之中,庸碌一生,那是因为我们没有努力要活得丰盛今天我学习了一下内容: 1.什么是JSP 2.JSP的语法 3.JSP的指令 4. ...
千锋逆战班，css注册案例
千锋学习的第四十八天, 不积跬步无以至千里,不积小流无以成江河: 注册案例代码: <!DOCTYPE html> <html><head><meta char ...
千锋逆战班，网络编程
在千锋学习的第33天努力努力在努力,坚持坚持再坚持!!!加油今天我学习了网络的划分层次,以及其中的TCP和IP协议,学习了IntAddress类和ServerScoket和Scoket 1.填空: ...
千锋逆战班，网络编程应用
在千锋学习的第34天努力努力在努力,坚持坚持再坚持!!!加油今天我学习ServerScoket和Scoket应用交互登录注册案例注册的用户信息会存在properties文件中 package ...

千锋逆战班学员教你从零基础了解HTML5的知识

千锋逆战班学员教你从零基础了解HTML5的知识相关推荐

最新文章

热门文章