浅谈前端的HTML
HTML&css&js,jq 三者关系
HTML是前端的本质,如果将前端比作 一个人的话,那么HTML就相当于这个人的骨架,也就是基本。但是一个人是不可能只有一个骨架的,所以css相当于赋予了这个人血肉。但是一个人如果一动不动的站在那里也不能算是一个完整的人,因此js和jq相当于赋予了这个人语言和动作。
html
我们之前讲过socket,socket属于c/s,即client(客户端)/server
那么b/s呢?这里的b就是浏览器,浏览器本质上也是一种客户端。我们可以直接用代码进行校验
import socket sk = socket.socket() sk.bind(("127.0.0.1",8080)) sk.listen(5) while True: conn,addr = sk.accept() data = conn.recv(8096) conn.send(b"HTTP/1.1 200 OK\r\n\r\n") conn.send(b"<h1>Hello World!</h1>") conn.close()
随后再浏览器中输入ip即端口号:http://127.0.0.1:8080/,会发现浏览器中打印出了hello。可见,浏览器是可以作为客户端接收信息的
什么是html
html又被称为超文本标记语言(Hypertext MarkuP Language,HTML)是一种用于创建网页的标记语言
本质上是浏览器可识别的规则,我们按照规则写网页,浏览器根据规则渲染我们的网页。对于不同的浏览器,对同一个标签可能会有不同的解释。(兼容性问题)
一般来说,网页文件的扩展名为 .html或.htm,其中htm是很早以前的版本,因为操作系统的关系,那个时候的后缀名只能有三个字符
但值得注意的是,HTML是一种标记语言(markuP Language),它不是一种编程语言,它使用标签来描述网页。
HTML文档结构
<!DOCTYPE html> <!--告诉浏览器你应该用什么版的html去解析 --> <!-- <html></html>中间所有的内容才是我们真正html lang="zh-CN"表示哪个国家的语言 --> <html lang="zh-CN"> <head> <!--<Meta charset="UTF-8"> 我们html的编码格式--> <!--<title>Title</title> 网站的标题--> <Meta charset="UTF-8"> <title>css样式优先级</title> </head> <body> <!-- body之间一般是网站的主题内容 --> </body> </html> <!--其中<!--表示的是注释-->
标签
双标签:<html >内容</html> 单标签:<br/> 标签的属性 <div id="属性值" class="属性值" 属性名="属性值">
head内常用标签
标签 | 意义 |
---|---|
定义网页标题 | |
定义内部样式表 | |
定义JS代码或引入外部JS文件 | |
引入外部样式表文件或网站图标 | |
定义网页原信息 |
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``>`
当然body里还可以插入超链接或者图片,我们可以用代码实现:
<!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8"> <title>Title</title> </head> <body> <!--行内标签--> <!--块级标签--> <!--标题标签--> <h1 id="h1">我是标题1</h1> <h2>我是标题2</h2> <h3>我是标题3</h3> <h4>我是标题4</h4> <h5>我是标题5</h5> <h6>我是标题6</h6> <h7>我是标题7</h7> 我是标题7 <!--段落标签--> <p>我是p</p> <p>我是p</p> <!--a标签,链接标签,href="链接的地址" target属性默认是_self,如果是self就会覆盖当前的html,如果target属性默认是_blank,就会重新打开窗口 --> <a href="02.html" target="_blank">首页</a> <a href="02.html" target="_self">首页</a> <!--锚点--> <a href="#h1">首页</a> <!--id属性, id="属性值",如果是id属性,属性值必须全页面唯一 class属性 class属性可以全局不唯一 <a class="a b c k"></a> --> <!-- img 图片标签 src="图片的地址" alt="当图片不能加载的时候,就会显示,还有给搜索引擎提示我们图片的内容" title="当我们的鼠标悬浮在图片上的时候,就会显示" --> <img src="http://s9.rr.itc.cn/r/wapChange/20174_1_21/a7o3k08442035758542.jpg" title="这是你们的老婆"> </body> </html>
列表
无序列表
<ul type="disc"> <li>第一项</li> <li>第二项</li> </ul>
type属性:
有序列表
<ol type="1" start="2"> <li>第一项</li> <li>第二项</li> </ol>
type属性:
- 1 数字列表,默认值
- A 大写字母
- a 小写字母
- Ⅰ大写罗马
- ⅰ小写罗马
3.标题列表
<dl> <dt>标题1</dt> <dd>内容1</dd> <dt>标题2</dt> <dd>内容1</dd> <dd>内容2</dd> </dl>
实例
<!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8"> <title>Title</title> </head> <body> <!--无序列表标签 disc(实心圆点,默认值) circle(空心圆圈) square(实心方块) none(无样式) --> <ul class="a" type="circle"> <li>1</li> <li>2</li> <li>3</li> </ul> <!--有序列表标签 type属性: 1 数字列表,默认值 A 大写字母 a 小写字母 Ⅰ大写罗马 ⅰ小写罗马 --> <ol type="A" start="2"> <li>1</li> <li>2</li> <li>3</li> </ol> <!--标题列表--> <!--标题1--> <!--nie--> <!--nei--> <!--挑剔--> <!--nier--> <!--strs="23456789abcdefghik"--> <!--5--> <!--标题列表--> <dl> <dt>标题1</dt> <dd>内容1</dd> <dt>标题2</dt> <dd>内容1</dd> <dd>内容2</dd> </dl> <!--表格标签 border: 表格边框. cellpadding: 内边距 cellspacing: 外边距. width: 像素 百分比.(最好通过css来设置长宽) rowspan: 单元格竖跨多少行 colspan: 单元格横跨多少列(即合并单元格) --> <table border="1" cellpadding="20" cellspacing="20" > <thead> <tr> <th>name</th> <th>age</th> <th>sex</th> </tr> </thead> <tbody> <tr> <td rowspan="3">egon</td> <td>39</td> <td>男</td> </tr> <tr> <td colspan="2">egon</td> <td>39</td> <td>男</td> </tr> <tr> <td>egon</td> <td>39</td> <td>男</td> </tr> </tbody> </table> </body> </html>
特殊字符
内容 | 对应代码 |
---|---|
空格 | ? |
> | > |
< | < |
& | & |
¥ | ¥ |
版权 | ? |
注册 | ? |
div标签和span标签
div标签用来定义一个块级元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现。
span标签用来定义内联(行内)元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现。
块级元素与行内元素的区别:
所谓块元素,是以另起一行开始渲染的元素,行内元素则不需另起一行。如果单独在网页中插入这两个元素,不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的。
<!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8"> <title>Title</title> </head> <body> 普通文本 <br> <b>加粗</b> <br> <i>斜体</i> <br> <u>下划线</u> <br> <s>删除</s> <!--换行--> <a href="">a</a> <br> <a href="">a</a> <br> <a href="">a</a> <!--水平线--> <hr> <div>我是块级</div> <span>我是行内</span> <span>我是行内</span> <!--html中特殊符号--> <span>我是 行内</span> <!--空格 --> <!--> >--> <!--< <--> <!--& &--> <!--¥ ¥--> <!--版权 ©--> <!--注册 ®--> <!--<script>--> <!--alert("123")--> <!--</script>--> <hr> <hr> <hr> <hr> <hr> 1<span> ¥ 版权 © 注册 ® </body> </html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。