HTML(上)_简单_前端开发者

目录
  • HTML(上)
  • HTML(上)

  • 浏览器
  • 浏览器

  • HTML
  • HTML

  • 什么是HTML
  • 什么是HTML

  • HTML的作用
  • HTML的作用

  • 编写HTML的规范
  • 编写HTML的规范

  • HTML结构
  • HTML结构

  • HTML常用标签
  • HTML常用标签

  • head内常用标签
  • head内常用标签

  • 基本标签
  • 基本标签

  • meta标签
  • meta标签

  • body内常用标签
  • body内常用标签

  • 基本标签
  • 基本标签

  • 特殊字符
  • 特殊字符

  • div标签和span标签
  • div标签和span标签

  • img标签
  • img标签

  • a标签
  • a标签

  • 列表
  • 列表

  • 无序列表

    • 无序列表

        • 有序列表

          1. 有序列表

              1. 标题列表

              2. 标题列表

              3. 表格
              4. 表格

              5. HTML标签速记
              6. HTML标签速记

              7. 块级标签
              8. 块级标签

              9. 内联标签
              10. 内联标签

                html(上)

                浏览器

                • 浏览器也是一个客户端
              11. 浏览器也是一个客户端
              12. #这是一个服务器,我们通过浏览器就可以访问的到服务器发送的"hello"
                import socket
                sk = socket.socket()
                sk.bind(('127.0.0.1',8080))
                sk.listen(5)
                while True:
                    conn,addr = sk.accept()
                    data = conn.recv(1024)
                    conn.send(b"HTTP/1.1 200 ok\r\n\r\n")  #必须要加上这一句,不然浏览器不认识
                    conn.send(b"hello")
                    conn.close()
                

                #这是一个服务器,我们通过浏览器就可以访问的到服务器发送的"hello"
                import socket
                sk = socket.socket()
                sk.bind(('127.0.0.1',8080))
                sk.listen(5)
                while True:
                conn,addr = sk.accept()
                data = conn.recv(1024)
                conn.send(b"HTTP/1.1 200 ok\r\n\r\n") #必须要加上这一句,不然浏览器不认识
                conn.send(b"hello")
                conn.close()

                • 浏览器不通过服务端也可以渲染文本
              13. 浏览器不通过服务端也可以渲染文本
              14. html

                什么是html

                HTML全称HyperText Markup Language,超文本标记语言,是一种描述性的标记语言。

                • 超文本:音频、视频、图片
                • 标记:<英文单词或者字母>称为标记,一个HTML页面都是由各种标记组成。
              15. 超文本:音频、视频、图片
              16. 标记:<英文单词或者字母>称为标记,一个HTML页面都是由各种标记组成。
              17. HTML的作用

                负责描述文档语义的语言

                编写HTML的规范

                1)所有标记元素都要正确的嵌套,不能交叉嵌套。eg:

                <h1><a></a></h1>

                <h1><a></a></h1>

                2)所有标记都必须小写

                3)所有标记都必须关闭

                • 双标签:<h></h1>
                • 单标签:<img src=“URL” />
              18. 双标签:<h></h1>
              19. <h></h1>

              20. 单标签:<img src=“URL” />
              21. <img src=“URL” />

                4)所有属性值必须加引号。eg:<h1 id="head"></h1>

                <h1 id="head"></h1>

                5)所有属性必须有值:<a href="02.html" target="_blank">首页</a>

                <a href="02.html" target="_blank">首页</a>

                HTML结构

                用pycharm新建一个HTML文件,文件会自动生成如下代码的一个HTML模板

                <!DOCTYPE html>
                <!--文档声明头,告诉浏览器它应该用什么版本的html去解析以下代码-->
                
                <html lang="en">
                <!--文档的开始标记和结束标记,lang="en"表示用英语或者其他国家的语言,在它们之间是文档的头部(head)和主体(body)-->
                <head>
                <!--定义了HTML文档的开头部分,不会再浏览器的文档窗口显示-->
                    <meta charset="UTF-8">
                    <!--HTML的编码格式-->
                    <title>Title</title>
                    <!--网页标题,在浏览器标题栏显示-->
                </head>
                <body>
                <!--文本主体,他们之间的文本是可见的网页主题内容-->
                
                </body>
                </html>
                

                <!DOCTYPE html>
                <!--文档声明头,告诉浏览器它应该用什么版本的html去解析以下代码-->

                <html lang="en">
                <!--文档的开始标记和结束标记,lang="en"表示用英语或者其他国家的语言,在它们之间是文档的头部(head)和主体(body)-->
                <head>
                <!--定义了HTML文档的开头部分,不会再浏览器的文档窗口显示-->
                <meta charset="UTF-8">
                <!--HTML的编码格式-->
                <title>Title</title>
                <!--网页标题,在浏览器标题栏显示-->
                </head>
                <body>
                <!--文本主体,他们之间的文本是可见的网页主题内容-->

                </body>
                </html>

                HTML常用标签

                head内常用标签

                基本标签
                标签 意义
                <title></title> 定义网页标题
                <style></style> 定义内部样式表
                <script></script> 定义js代码或引入外部js文件
                <link/> 引入外部样式表文件
                <meta/> 定义网页原信息
                标签 意义 标签 意义 标签 意义 <title></title> 定义网页标题 <style></style> 定义内部样式表 <script></script> 定义js代码或引入外部js文件 <link/> 引入外部样式表文件 <meta/> 定义网页原信息 <title></title> 定义网页标题 <title></title>

                <title></title>

                定义网页标题 <style></style> 定义内部样式表 <style></style>

                <style></style>

                定义内部样式表 <script></script> 定义js代码或引入外部js文件 <script></script>

                <script></script>

                定义js代码或引入外部js文件 <link/> 引入外部样式表文件 <link/>

                <link/>

                引入外部样式表文件 <meta/> 定义网页原信息 <meta/>

                <meta/>

                定义网页原信息
                meta标签
                <meta http-equiv="refresh" content="2;URL = https://www.cnblogs.com/yanjiayi098-001/">
                <!--2秒过后跳到 https://www.cnblogs.com/yanjiayi098-001 网页-->
                
                <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
                <!--对网页并没有什么影响,就是给网页关键字,便于搜索引擎机器人查找信息和分类信息用的-->
                
                <meta name="description" content="老男孩教育Python学院">
                <!--这个也没有什么影响,就是给网页一个描述,便于搜索引擎机器人查找信息和分类信息用的-->
                
                <meta http-equiv="content-Type" charset=UTF8">
                <!--指定文档的编码类型-->
                                                             
                <meta http-equiv="x-ua-compatible" content="IE = edge">
                <!--告诉IE以最高级模式渲染文档-->
                

                <meta http-equiv="refresh" content="2;URL = https://www.cnblogs.com/yanjiayi098-001/">
                <!--2秒过后跳到 https://www.cnblogs.com/yanjiayi098-001 网页-->

                <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
                <!--对网页并没有什么影响,就是给网页关键字,便于搜索引擎机器人查找信息和分类信息用的-->

                <meta name="description" content="老男孩教育Python学院">
                <!--这个也没有什么影响,就是给网页一个描述,便于搜索引擎机器人查找信息和分类信息用的-->

                <meta http-equiv="content-Type" charset=UTF8">
                <!--指定文档的编码类型-->

                <meta http-equiv="x-ua-compatible" content="IE = edge">
                <!--告诉IE以最高级模式渲染文档-->

                body内常用标签

                基本标签
                <b>加粗</b>
                <i>斜体</i>
                <u>下划线</u>
                <s>删除</s>
                
                <p>段落标签,写在这个标签内的东西就是一个段落</p>
                
                <h1>1号标题</h1>
                <h2>2号标题</h2>
                <h3>3号标题</h3>
                <h4>4号标题</h4>
                <h5>5号标题</h5>
                <h6>6号标题</h6>
                
                <br>
                <!--这是一个换行标签-->
                
                <hr>
                <!--这是一个水平线标签-->
                

                <b>加粗</b>
                <i>斜体</i>
                <u>下划线</u>
                <s>删除</s>

                <p>段落标签,写在这个标签内的东西就是一个段落</p>

                <h1>1号标题</h1>
                <h2>2号标题</h2>
                <h3>3号标题</h3>
                <h4>4号标题</h4>
                <h5>5号标题</h5>
                <h6>6号标题</h6>

                <br>
                <!--这是一个换行标签-->

                <hr>
                <!--这是一个水平线标签-->

                特殊字符
                &nbsp;
                <!--空格-->
                
                &gt;
                <!--大于号(>)-->
                
                &lt;
                <!--小于号(<)-->
                
                &amp;
                <!--&符号-->
                
                &yen;
                <!--人民币(¥)符号-->
                
                &copy;
                <!--版权符号-->
                
                &reg;
                <!--注册符号-->
                
                

                &nbsp;
                <!--空格-->

                &gt;
                <!--大于号(>)-->

                &lt;
                <!--小于号(<)-->

                &amp;
                <!--&符号-->

                &yen;
                <!--人民币(¥)符号-->

                &copy;
                <!--版权符号-->

                &reg;
                <!--注册符号-->

                div标签和span标签
                div标签:
                <div>
                    <!--块级标签,无意义,通过css样式为其赋予不同的表现-->
                </div>
                
                
                span标签:
                <span>
                    <!--内联标签,无意义,通过css样式为其赋予不同的表现-->
                </span>
                
                **块级标签与内联标签的区别**
                块级标签:另起一行开始渲染元素
                内联标签:不需要另起一行
                如果单独在网页中插入这两个元素,不会对页面产生任何的影响,他们是专门为定义css样式而生的
                

                div标签:
                <div>
                <!--块级标签,无意义,通过css样式为其赋予不同的表现-->
                </div>

                span标签:
                <span>
                <!--内联标签,无意义,通过css样式为其赋予不同的表现-->
                </span>

                **块级标签与内联标签的区别**
                块级标签:另起一行开始渲染元素
                内联标签:不需要另起一行
                如果单独在网页中插入这两个元素,不会对页面产生任何的影响,他们是专门为定义css样式而生的

                注意:

                注意:

                ​ 块级标签可以嵌套内联标签或者某些块级标签

                ​ 内联标签不能嵌套块级标签

                p标签不能嵌套块级标签,也不能嵌套p标签

                p标签不能嵌套块级标签,也不能嵌套p标签

                img标签
                <img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息">
                <img src="https://goss.veer.com/creative/vcg/veer/800water/veer-132444248.jpg" alt="故宫" title="美丽的故宫" >
                

                <img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息">
                <img src="https://goss.veer.com/creative/vcg/veer/800water/veer-132444248.jpg" alt="故宫" title="美丽的故宫" >

                a标签

                a标签又叫做超链接标签

                所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序

                我们就先拿另一个网页举例

                href属性指定目标网页地址。该地址可以有几种类型:
                
                绝对URL - 指向另一个站点(比如 href="http://www.jd.com)
                相对URL - 指当前站点中确切的路径(href="index.htm")
                锚URL - 指向页面中的锚(href="#top")
                

                href属性指定目标网页地址。该地址可以有几种类型:

                绝对URL - 指向另一个站点(比如 href="http://www.jd.com)
                相对URL - 指当前站点中确切的路径(href="index.htm")
                锚URL - 指向页面中的锚(href="#top")

                <a href="https://www.cnblogs.com/yanjiayi098-001/" target="_blank">点我会跳转哦!</a>
                <!--target="_blank"表示重新打开一个网页进行跳转-->
                
                
                <a href="https://www.cnblogs.com/yanjiayi098-001/" target="_self">点我会跳转哦!</a>
                <!--target="_self"表示就在当前网页进行跳转-->
                
                
                <a href="https://www.cnblogs.com/yanjiayi098-001/">点我会跳转哦!</a>
                <!--默认target="_self"-->
                
                
                <a href="#b1">点我回到加粗</a>
                <!--b1是id属性,#b1表示回到id属性为b1的这个位置,这个位置就是<b id = "b1">加粗</b> -->
                
                
                <a href="body内常用标签.html">点我转到这个网页哦!</a>
                <!--他会跳到 body内常用标签.html 网页-->
                

                <a href="https://www.cnblogs.com/yanjiayi098-001/" target="_blank">点我会跳转哦!</a>
                <!--target="_blank"表示重新打开一个网页进行跳转-->

                <a href="https://www.cnblogs.com/yanjiayi098-001/" target="_self">点我会跳转哦!</a>
                <!--target="_self"表示就在当前网页进行跳转-->

                <a href="https://www.cnblogs.com/yanjiayi098-001/">点我会跳转哦!</a>
                <!--默认target="_self"-->

                <a href="#b1">点我回到加粗</a>
                <!--b1是id属性,#b1表示回到id属性为b1的这个位置,这个位置就是<b id = "b1">加粗</b> -->

                <a href="body内常用标签.html">点我转到这个网页哦!</a>
                <!--他会跳到 body内常用标签.html 网页-->

                列表
                无序列表<ul></ul>

                <ul></ul>

                <ul type="disc">
                    <li>第一项</li>
                    <li>第二项</li>
                    <li>第三项</li>
                </ul>
                

                <ul type="disc">
                <li>第一项</li>
                <li>第二项</li>
                <li>第三项</li>
                </ul>

                type属性:

                • type="disc"(实心圆点,默认值)
                • type="circle"(空心圆圈)
                • type="square"(实心方块)
                • type="none"(无样式)
              22. type="disc"(实心圆点,默认值)
              23. type="circle"(空心圆圈)
              24. type="square"(实心方块)
              25. type="none"(无样式)
              26. 有序列表<ol></ol>

                <ol></ol>

                <ol type="1" start="3">
                    <li>第一项</li>
                    <li>第二项</li>
                    <li>第三项</li>
                </ol>
                

                <ol type="1" start="3">
                <li>第一项</li>
                <li>第二项</li>
                <li>第三项</li>
                </ol>

                type属性:

                • 1 数字列表,默认值
                • A 大写字母
                • a 小写字母
                • Ⅰ大写罗马
                • ⅰ小写罗马
              27. 1 数字列表,默认值
              28. A 大写字母
              29. a 小写字母
              30. Ⅰ大写罗马
              31. ⅰ小写罗马
              32. start属性:

                start="3"只能写数字,表示从第3个开始

                start="3"

                标题列表<dl></dl>

                <dl></dl>

                <dl>
                    <dt>标题1</dt>
                        <dd>内容</dd>
                    <dt>标题2</dt>
                        <dd>内容1</dd>
                        <dd>内容2</dd>
                </dl>
                

                <dl>
                <dt>标题1</dt>
                <dd>内容</dd>
                <dt>标题2</dt>
                <dd>内容1</dd>
                <dd>内容2</dd>
                </dl>

                表格
                <table>
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>姓名</th>
                        <th>爱好</th>
                    </tr>
                    </thead>
                    <tr>
                        <td>1</td>
                        <td>yjy</td>
                        <td>跳舞</td>
                    </tr>
                     <tr>
                        <td>2</td>
                        <td>wwb</td>
                        <td>唱歌</td>
                    </tr>
                </table>
                
                
                <!--
                看到 <table> 就说明接下来是一个表格
                <thead>是表格的表头
                <tr>表示一行,而在这一行中又有<th>
                <th>表示表头的内容,表示整个一列的属性,eg:姓名
                同理<tr>中的<td>就表示表格内容,按照<th>的要求写就行了,eg:姓名就写人名
                -->
                

                <table>
                <thead>
                <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>爱好</th>
                </tr>
                </thead>
                <tr>
                <td>1</td>
                <td>yjy</td>
                <td>跳舞</td>
                </tr>
                <tr>
                <td>2</td>
                <td>wwb</td>
                <td>唱歌</td>
                </tr>
                </table>

                <!--
                看到 <table> 就说明接下来是一个表格
                <thead>是表格的表头
                <tr>表示一行,而在这一行中又有<th>
                <th>表示表头的内容,表示整个一列的属性,eg:姓名
                同理<tr>中的<td>就表示表格内容,按照<th>的要求写就行了,eg:姓名就写人名
                -->

                属性:

                • border: 表格边框 eg:border="6"
                • cellpadding: 内边距 eg:cellpadding="8"
                • cellspacing: 外边距 eg:cellspacing="2"
                • width: 像素 百分比 eg:width="100%"
              33. border: 表格边框 eg:border="6"
              34. cellpadding: 内边距 eg:cellpadding="8"
              35. cellspacing: 外边距 eg:cellspacing="2"
              36. width: 像素 百分比 eg:width="100%"
              37. 以上这些属性要在<table>中设置

                以上这些属性要在<table>中设置<table>

                • rowspan: 单元格竖跨多少行(上下合并单元格) eg:rowspan="3"
                • colspan: 单元格横跨多少列(左右合并单元格) eg:colspan="2"
              38. rowspan: 单元格竖跨多少行(上下合并单元格) eg:rowspan="3"
              39. colspan: 单元格横跨多少列(左右合并单元格) eg:colspan="2"
              40. 以上这些属性要在<td>中设置

                以上这些属性要在<td>中设置<td>

                HTML标签速记

                块级标签

                标题 h1 h2 h3 h4 h5 h6
                列表 ul ol li dl dt dd
                排版标签 p div hr center pre
                表格 table
                表单 form
                标题 h1 h2 h3 h4 h5 h6 标题 h1 h2 h3 h4 h5 h6 标题 h1 h2 h3 h4 h5 h6 列表 ul ol li dl dt dd 排版标签 p div hr center pre 表格 table 表单 form 列表 ul ol li dl dt dd 列表 ul ol li dl dt dd 排版标签 p div hr center pre 排版标签 p div hr center pre 表格 table 表格 table 表单 form 表单 form

                内联标签

                字体 b i sup sub u
                排版 span br
                超链接 a
                图片 img
                字体 b i sup sub u 字体 b i sup sub u 字体 b i sup sub u 排版 span br 超链接 a 图片 img 排版 span br 排版 span br 超链接 a 超链接 a 图片 img 图片 img

                补充

                补充

                • 文本级标签:p、span、a、b、i、u、em。
                • 容器级标签:div、h系列、li、dt、dd
              41. 文本级标签:p、span、a、b、i、u、em。
              42. 容器级标签:div、h系列、li、dt、dd
              43. » 本文来自:前端开发者 » 《HTML(上)_简单_前端开发者》
                » 本文链接地址:https://www.rokub.com/73567.html
                » 您也可以订阅本站:https://www.rokub.com
                赞(0)
                64K

                评论 抢沙发

                评论前必须登录!