HTML之前端组成、标签
详情见:https://www.cnblogs.com/liwenzhou/p/7988087.html
https://www.cnblogs.com/zhangguosheng1121/p/10940312.html
一.前端组成
二、Web开发本质
(1) 浏览器输入网址回车都发生了什么?
浏览器 给服务端 发送了一个消息
服务端拿到消息
服务端返回消息
浏览器展示页面
C/S架构 --> B/S架构
客户端和服务端 消息的格式是约定好的
HTTP协议: 浏览器和服务器之间约定好的消息格式 ==> "PUT|xxx.avi|1024"
WEB本质:
服务端
浏览器
HTML文件 (学习前端就是需要写HTML文件)
import socket sk = socket.socket()
sk.bind(("127.0.0.1", 8000))
sk.listen(5) while 1:
conn, addr = sk.accept()
data = conn.recv(1024) # 收消息
conn.send(b'HTTP/1.1 200 OK\r\n\r\n') # 按照HTTP协议的格式发消息
# 从文件读取\
with open("data.html", "rb") as f:
msg = f.read()
conn.send(msg) # 发消息
conn.close() #data.html
<!DOCTYPE html>
<html>
<head> </head>
<body>
<h1>hello s99!</h1>
<img src="https://a-ssl.duitang.com/uploads/item/201904/22/20190422084837_ihryp.jpg">
<a href="http://www.sogo.com">sogo</a>
</body>
</html>
Web本质示例
写HTML文件时就不需要写以上那些程序,只需右击data.html ->shows in explorer ->文件右击选择打开方式为浏览器
HTML是一个标准,规定了大家怎么写网页.
修改网页的语言:
三、标签
学HTML就是学标签
<标签名> --> 标记语言 (HTML, XML)
标签分类:
双标签
单标签
1)HTML文件的结构:
1. 文档声明
2. html标签
- head标签
head内常用标签
body内常用标签
- body标签(用户在浏览器能看到的内容)
2)HTML文件的注释:ctrl+/
head内常用标签:
body内常用标签:(*****)
标签分类:
块儿级标签 h1~h6 div p hr
默认占浏览器宽度
能设置长和宽
内联标签(行内标签) a img u s i b span
根据内容决定长度
不能设置长和宽
标签的嵌套规则:
1. 行内标签不能嵌套块级标签
2. p标签不能嵌套块级标签
div:用来定义一个块儿级元素,通过css样式为其赋予不同的表现。
span:用来定义内联(行内)元素,通过CSS样式为其赋予不同的表现。
区别:所谓块元素,是以另起一行开始渲染的元素,
行内元素则不需另起一行。
如果单独在网页中插入这两个元素,不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的。
<h1></h1> 标题标签:
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6> 标题字体从大到小 ,标题字体粗&黑
例:<h1>回眸一笑百媚生</h1>
<img> 图片标签:
其中src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)"
src图片路径:可以是网络上的图片地址也可以是本地的图片地址
例:<img id="i1" src="https://b-ssl.duitang.com/uploads/item/201905/20/20190520133149_rguyy.jpg" alt="新垣结衣" title="老婆"> <a></a> 超链接标签:
所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,
一个电子邮件地址,一个文件,甚至是一个应用程序。
例:<a href="http://www.luffycity.com" target="_blank">路飞学城</a>
当点击路飞学城的时候会新打开一个网页跳转到相关网站上
<p></p> 段落标签:
body内基本标签
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>
<br> 换行标签
<hr> 水平线标签
body内特殊字符
body列表标签
1.无序列表
<ul type="disc">
<li>第一项</li>
<li>第二项</li>
</ul>
type属性:
disc(实心圆点,默认值)
circle(空心圆圈)
square(实心方块)
none(无样式)
2.有序列表
<ol type="1" start="2">
<li>第一项</li>
<li>第二项</li>
</ol>
type属性:
1 数字列表,默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马
start表示序号从第几位开始
3.标题列表
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <ul type="disc">
<li>第一项</li>
<li>第二项</li>
</ul> <ol type="1" start="2">
<li>第一项</li>
<li>第二项</li>
</ol> <!-- 标题列表 -->
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl> </body>
</html>
列表代码
列表代码打印结果:
body表格标签
表格是一个二维数据空间,一个表格由若干行组成,一个行又有若干单元格组成,单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式(即按行和列组织)的数据。
表格的基本结构:
属性:
border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.(最好通过css来设置长宽)
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列(即合并单元格)
表格结构:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表格示例</title>
</head>
<body> <table border="1" cellpadding="10" cellspacing="10">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">小强</td>
<td rowspan="2">戴帽子</td>
</tr>
<tr>
<td>射哥</td>
<td>18</td>
</tr>
</tbody>
</table>
打印结果:
补充:
1)./表示在当前目录下
2)快捷写法:
h1*4>a.cl[id=a$]{a标签$}
然后按Tab键会出现:
<h1><a href="" class="c1" id="a1">a标签1</a></h1>
<h1><a href="" class="c1" id="a2">a标签2</a></h1>
<h1><a href="" class="c1" id="a3">a标签3</a></h1>
<h1><a href="" class="c1" id="a4">a标签4</a></h1>
其中:
*4 表示4个h1标签,
>a 表示在h1中嵌一个a标签,
.cl表示给所有a标签加一个class,
$自动生成序号,
{}里面写a标签的内容
[id=a$]表示给a标签添加属性
3)迅速整理HTML格式
点击:Code -> Reformat Code (Ctrl+Alt+L)
4)多行操作
按住Alt鼠标选择要操作的多行
5)
什么是URL?
URL是统一资源定位器(Uniform Resource Locator)的缩写,也被称为网页地址,是因特网上标准的资源的地址。
URL举例
http://www.sohu.com/stu/intro.html
http://222.172.123.33/stu/intro.html URL地址由4部分组成
第1部分:为协议:http://、ftp://等
第2部分:为站点地址:可以是域名或IP地址
第3部分:为页面在站点中的目录:stu
第4部分:为页面名称,例如 index.html
各部分之间用“/”符号隔开。
URL
6)把莫几条代码语句用标签包起来
选中要包围的语句 ->Code ->Surround with ->Emmet
或者先打出标签再把语句拖进标签中
最新文章
- EF操作MySql
- POJ-3061
- CSS 样式优先级
- OC中.pch文件的解释
- wordpress 中禁止更新提示
- Java 正则表达式学习总结和一些小例子
- PS基础学习 2---图层蒙版
- Cassandra1.2文档学习(1)——Cassandra基本说明
- python 列表、字典的方法
- RIP 相对寻址
- Linux 按时间批量删除文件(删除N天前文件)
- Ionic3 编程-应用启动进入引导页
- Alpha冲刺Day2
- 什么是 CI/CD?
- Kafka运维填坑(转)
- Wi-Fi 协议和数率?
- [工具] TreeSizeFree 查看每个文件夹的大小
- Jersey 2.x 分支 Java SE 兼容性
- 编译EXE文件的时候pcap编译不进去。 pyinstaller pcap pypcap 报错
- java-appium-527手机浏览器、PC端程序、grid模式