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

或者先打出标签再把语句拖进标签中

HTML之前端组成、标签的更多相关文章

前端c标签foreach传值给后台
前端c标签foreach传值给后台 <div style="margin-bottom: 10px"> <c:forEach items="${good ...
移动前端头部标签(HTML5 head meta)
移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析html代码,更好地将移动web前端页面表现出来.本文整理一些常用的meta标签. <!DOCTYPE html&g ...
移动前端头部标签(HTML5 meta)
在移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析html代码 <!DOCTYPE html> 使用 HTML5 doctype,不区分大小写 <he ...
移动前端头部标签(HTML5 head meta)转载
移动web页面头部书写字数2516 阅读1128 评论0 喜欢30 HTTP 标题信息(http-equiv) 和页面描述信息(name) http-equiv:该枚举的属性定义,可以改变服务器和用 ...
前端 HTML标签属性
HTML标签可以设置属性,如下: <div id="i1">这是一个div标签</div> <p class='p1 p2 p3'>这是一个段落 ...
前端 HTML 标签嵌套规则
标签嵌套规则块元素可以包含内联元素或某些块元素,但内联元素却不能包含块元素,它只能包含其它的内联元素,例如: <div><div></div><h1> ...
前端 HTML 标签分类
三种: 1.块级标签: 独占一行,可设置宽度,高度.如果设置了宽度和高度,则就是当前的宽高.如果宽度和高度没有设置,宽度是父盒子的宽度,高度根据内容填充. 2.行内标签:在一行内显示,不能设置宽度,高 ...
前端 HTML标签介绍
那什么是HTML标签呢? 1. 在HTML中规定标签使用英文的的尖括号即"<"和">"包起来,如`<html>`.`<p>` ...
前端 s 标签获取值
1. s标签获取action中的值: <s:property value="#parameters.mySessionPropKey"/> or <s:prop ...
前端1-----A标签 (锚点)
Title 头部,顶端, 点击跳转到id='abc' 1 2 到百度这里,点击跳转百度 3 到这里了 4 alex1 5 6 根据id 从底部到头根据id='a1' 到指定位置 ...

随机推荐

CentOS76 安装k8s1.18的简单步骤
1. 前提条件就不再详细描写了: 关闭防火墙升级内核到至少4. 关闭swap 关闭selinux 等 2. 本次安装采用酸酸乳和privoxy的方式进行, 不过发现部分rpm 包还是特别慢,没办法用 ...
HIT软件构造课程3.4总结（Object-Oriented Programming ）
上一节学习了ADT理论,这一节学习ADT的具体实现:OOP 1.基本概念:对象,类,属性,方法对象对象是状态和行为的捆绑.java中,状态=成员变量,行为=方法. 类每个对象都定义了一个类,类定 ...
Aho-Corasick automaton
目录 KMP 算法 BF 算法 KMP 算法避免重复遍历算法思想代码实现匹配函数求 next 数组字典树多模匹配构造字典树字典树的结构体定义构造算法伪代码代码实现失配指针功 ...
CF633(div.2)B. Sorted Adjacent Differences
题目描述 http://codeforces.com/contest/1339/problem/B 有一个长度为 $n(3\le n \le 10^5)$ 的整数序列 \(a_1,a_2,..., ...
mybatis源码配置文件解析之一：解析properties标签
mybatis作为日常开发的常用ORM框架,在开发中起着很重要的作用,了解其源码对日常的开发有很大的帮助.源码版本为:3-3.4.x,可执行到github进行下载. 从这篇文章开始逐一分析mybati ...
(js描述的)数据结构[树结构之红黑树](13）
1.二叉送搜索树的缺点: 2.红黑树难度: 3.红黑树五大规则: 4.红黑树五大规则的作用: 5.红黑树二大变换: 1)变色 2)旋转 6.红黑树的插入五种变换情况: 先声明--------插入的数据 ...
wireshark抓包实战（一），抓包原理
一.什么样的"包"能被wireshark抓住呢? 1.本机即直接抓取进出本机网卡的流量包.这种情况下,wireshark会绑定本机的一块网卡. 2.集线器用于抓取流量泛洪,冲突 ...
Gallery实现图片拖动切换
Gallery中文意思为画廊,通过Gallery能够实现用手指在屏幕上滑动实现图片的拖动.效果如下: 上面,为了学习了解,只用了android默认的Icon图片. 主程序中创建了一个继承自BaseAd ...
【做中学】第一个 Go 语言程序：漫画下载器
原文地址: 第一个 Go 语言程序:漫画下载器: https://schaepher.github.io/2020/04/11/golang-first-comic-downloader 之前学了点 ...
第三章：shell变量知识进阶
特殊变量:位置变量大于9的时候,需要加上(),例如$(10)$*获取脚本的所有参数,如果不加""和$@是一样的效果,如果加上"",则表示所有参数组成一个字符串$ ...

HTML之前端组成、标签

HTML之前端组成、标签的更多相关文章

随机推荐

热门专题