前端知识之html基础

前端知识之html内容

web服务本质

浏览器发送请求-->http协议-->服务端接收请求-->服务端返回响应-->服务端把html文件内容发给浏览器-->浏览器渲染页面
实例简单的一个socket

import socket

sk = socket.socket()

sk.bind(("127.0.0.1", 9000))

sk.listen()

while 1:

    conn, addr = sk.accept()

    data = conn.recv(9000)

    print(data)

    conn.send(b"HTTP/1.1 200 OK\r\n\r\n")

    conn.send('hello'.encode('utf8'))

    conn.close()

html是什么
- 超文本标记语言（html）是一种用于创建网页的标记语言，它不属于编程语言
- 本质是浏览器可识别的规则
- 最基本的html文档
  1. <!DOCTYPE html> 声明为html5文档
    
    <!DOCTYPE>指web浏览器关于页面使用哪个html版本进行编写的指令
  2. <html> </html>是文档的开始和结束标记，是html的根源素，在他们之间是head（头部）和body（身体）
  3. <head> </head>head>定义了html文档的开头部分，他们之间的内容不会显示在浏览器的文档窗口上，包含文档的meta（元）数据
  4. <title> </title>定义了网页标题，在浏览器标题栏显示
  5. <body> </body>之间的文本是可见的网页主体内容
  6. 注释语法 
    
    注意：对于中文网页需要使用<meta charset='utf8'>声明编码，否则会出现乱码，有些浏览器会设置gbk为默认编码，则你需要将声明的编码改成gbk的样子
- ```
<!DOCTYPE html>



<html lang="zh-CN">

<head>

    

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

</body>

</html>
```
html标签格式
html标签
- 由尖括号包围的关键字形成
- 标签通常是成对出现，例<div>和</div>
- 部分标签是单独呈现的例<br>换行的意思
- 标签里面可以有若干属性，也可以不带属性
标签语法
- <标签名属性1=“属性值1” 属性2=“属性值2”>内容部分</标签名>
- <标签名属性1=“属性值1”>
几个很重要的属性
- id 定义标签的唯一id，一个html文档中唯一
- class 为html元素定义一个或多个类名（classname）（css样式类名）
- style：规定元素的行内样式（css样式）

html常用标签

head常用标签
- <title>网页标题</title>定义网页标题
- <style>内部样式</style>定义内部样式表
- <script></script>定义js代码或引入外部js文件
- <link>引入外部样式表文件
- <meta>定义网页元信息
  - 可提供有关页面的原信息，针对搜索引擎和更新频繁的描述和关键字
  - 位于head（头部），不包含任何内容
  - 提供的信息时用户不可见的
  - 含有http-equiv属性和name属性，（了解）
body内常用标签
- ```
<b>加粗</b>

<i>斜体字</i>

<u>下划线</u>

<s>删除文字中间一横杠</s>

<p>段落标签，该标签的内容为一段落</p>

<h1>标题</h1>

<h6>标题6</h6>



<br>



<hr>
```
  常用特殊字符（百度html特殊字符表）
```


&nbsp;



&gt;



&lt;



&amp;



&yen;



&copy;



&reg;
```
- div标签和span标签
  - 相同点：
    - 没有自带的样式
    - 可以通过使用css来调整样式
  - 不同点
    - div是块级元素，独占一行
    - span是行内（内联）元素，不会另起一行
  - 注意：块级标签支持嵌套
    - 通常块级元素可以包含内联元素或某些块级元素，但是内联元素不能包含块级元素
    - p段落标签不能包含块级元素，也不能包含p标签
- 块级标签和内联（行内）标签
  - 块级标签
    - P段落标签
    - h1~h6标题标签
    - hr 水平线标签
    - div标签
  - 内联标签
    - span标签
    - b加粗标签，i斜体标签，u下划线标签，s删除标签
- img标签
  - ```
  <img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">
```
- a超链接标签
  - 定义：指从一个网页指向一个目标的链接关系
  - ```
  <a href="http://www.oldboyedu.com" target="_blank" >点我</a>
```
  target属性值
  - _blank 表示在新标签页中打开目标网址
  - _self表示在当前标签中打开目标网址
- 列表标签
  - 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属性
    - 默认数字，A大写字母，a小写字母，I大写罗马，i小写罗马
    - start属性：排序从start是几开始
  - 标题列表
    - ```
    <dl>
    
      <dt>标题1</dt>
    
      <dd>内容1</dd>
    
      <dt>标题2</dt>
    
      <dd>内容1</dd>
    
      <dd>内容2</dd>
    
    </dl>
```
- 表格标签
  - ```
  <table>
  
    <thead>
  
    <tr>
  
      <th>序号</th>
  
      <th>姓名</th>
  
      <th>爱好</th>
  
    </tr>
  
    </thead>
  
    <tbody>
  
    <tr>
  
      <td>1</td>
  
      <td colspan="1">Egon</td>
  
      <td>杠娘</td>
  
    </tr>
  
    <tr>
  
      <td>2</td>
  
      <td rowspan="2">Yuan</td>
  
    </tr>
  
    </tbody>
  
  </table>
```
  属性：
  - border :表格边框
  - cellpadding 内边框
  - cellpacing 外边距
  - width 像素百分比（最好同过css来设置长宽）
  - rowspan 单元格竖跨多少行
  - colsapn 单元格横跨多少列（合并单元格）
- 获取用户输入的标签form
  - 功能：
    - 用于向服务器传输数据，从而实现用户与web服务器的交互
    - 包含input系列标签，例文本字段，复选框，提交按钮等
    - 包含textarea,select,fieldset和label标签
    - 表单属性
      - accept-charset 规定在被提交表单中使用的字符集(默认：页面字符集)
      - action 规定向何处提交表单的地址
      - autocomplete 规定浏览器应该自动完成表单（默认开启）
      - enctype 规定被提交数据的编码(默认 url-encoded)
      - method 规定在提交表单是所用的http方法默认get
      - name 规定识别表单的名称（对于dom使用document.forms.name)
      - novalidate 规定浏览器不验证表单
      - target 规定action属性中地址的目标
      - <form action="http://127.0.0.1:9000" method="post" enctype="multipart/form-data">
  - input标签
    - 通常和label标签配合使用
      
      例
```
<p>

    <label for="i1">用户名：</label>

  <input id="i1" type="text" name="username">

</p>



<p>

    <label>密码：

        <input type="password" name="pwd">

    </label>

</p>
```
    - type属性
      1. text 单行输入文本
      2. password 密码输入框（密文）
      3. date 时间输入框
      4. checkbox 复选框<input type="checkbox" checjed="checked" >
      5. radio 单选框 <input type="radio">
      6. submit 提交按钮 <input type="submit" value="提交">
      7. reset 重置按钮 input type="reset" value="重置按钮" >
      8. button 普通按钮 <input type="button" value="普通按钮" >
      9. hidden 隐藏输入框 <input type="hidden">
      10. file 文本选择框 <input type="file">

前端知识之html基础的更多相关文章

前端开发：css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局前言楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
3 HTML&JS等前端知识系列之javascript的基础
preface 作为一名运维开发,必须懂得前端知识,比如javascript,dom等等,下面就聊聊javascript. include 数据格式条件判断,循环流程等. 函数面向对象 what ...
web前端知识体系总结
1. 前言大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...
自己总结的web前端知识体系大全【欢迎补充】
1. 前言大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...
WEB前端知识体系脑图
说在开始的话: 我上大学那会,虽说主要是学Java语言,但是web前端也稍微学了一些,那时候对前端也没多在意,因为涉入的不深,可以搞一个差不多可以看的界面就可以了,其他也没过多在意. 因为稍微了解一点 ...
web前端知识体系大全
1. 前言大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...
[转]前端利器：SASS基础与Compass入门
[转]前端利器:SASS基础与Compass入门 SASS是Syntactically Awesome Stylesheete Sass的缩写,它是css的一个开发工具,提供了很多便利和简单的语法,让 ...
JS前端知识模块大全
公司前端:小胖提供,表示感谢 1. 基础 HTML, CSS, JS 文档 W3CSCHOOL: http://www.w3schools.com/ MDN: https://developer.mo ...
web前端知识体系小结（转）
1. 前言大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

随机推荐

03.python语法入门--注释、变量
注释 """多行注释加在整个py文件的开头用来对该py文件进行一个整体性的说明通常一个py中只有一个多行注释"""# 这是一行贼溜的代码p ...
Solution -「AGC 002F」「AT 2000」Leftmost Ball
\(\mathcal{Description}\) Link. 给你 \(n\) 种颜色的球,每个球有 \(k\) 个,把这 \(n\times k\) 个球排成一排,把每一种颜色的最左边出现 ...
Solution -「CF 1370F2」The Hidden Pair (Hard Version)
\(\mathcal{Description}\) Link (hard) & Link (easy). 这是一道交互题. 给定一棵 \(n\) 个结点的树,其中有两个是特殊结点. ...
Redis 中常见的集群部署方案
Redis 的高可用集群前言几种常用的集群方案主从集群模式全量同步增量同步哨兵机制什么是哨兵机制如何保证选主的准确性如何选主选举主节点的规则哨兵进行主节点切换切片集群 Redi ...
《手把手教你》系列技巧篇（六十九）-java+ selenium自动化测试 - 读取csv文件（详细教程）
1.简介在实际测试中,我们不仅需要读取Excle,而且有时候还需要读取CSV类的文件.如何去读取CSV的文件,宏哥今天就讲解和分享一下,希望对你能够有所帮助.前面介绍了如何读取excel文件,本篇介 ...
[LeetCode]LCP 01. 猜数字
小A 和小B 在玩猜数字.小B 每次从 1, 2, 3 中随机选择一个,小A 每次也从 1, 2, 3 中选择一个猜.他们一共进行三次这个游戏,请返回小A 猜对了几次? 输入的guess数组为小 ...
IP欺骗实验
实验目的 1.掌握IP欺骗的原理 2.学会利用IPSpoof软件工具进行伪造源IP地址的IP欺骗. 实验内容使用IPSpoof进行本机IP地址修改,与目标主机通信,进行IP欺骗实验实验环境描述 1 ...
零基础小白也能用的商业智能BI工具，自助式就是香！
随着数字化时代的到来,数据已经成为企业无形的资源,企业对员工的数据分析能力也提出了新的要求.掌握一定的数据分析能力无疑会大大增加自己在职场中的竞争力,但并不是所有人都具备专业的数据分析基础,尤其是虽 ...
【C#基础概念】程序集与托管模块的概念
本文是为了学习程序集而整理的网上资料,主要包括两个部分,概念和使用,前部分讲怎样理解程序集,后部分讲述怎样使用的细节. 程序集与托管模块的概念 "程序集与托管代码块"(摘自Hima ...
Linux 启动、停止、重启jar包脚本
转至:https://www.cnblogs.com/foolash/p/13824647.html startOrStropJar.sh #!/bin/bash #这里可替换为你自己的执行程序,其他 ...

前端知识之html基础

前端知识之html内容

html标签格式

html常用标签

前端知识之html基础的更多相关文章

随机推荐

热门专题