第一章、前端之html

一. html介绍

  1. web服务本质
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()

过程：**浏览器发请求 --> HTTP协议 --> 服务端接收请求 --> 服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面 **

  1. html是什么？

    • 超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言。
    • 本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）
    • 网页文件的扩展名：.html或.htm

  2. html不是什么？

    HTML是一种标记语言（markup language），它不是一种编程语言。

HTML使用标签来描述网页。

  3. html文档结构

    最基本的HTML文档：

    <!DOCTYPE html>
    
<html lang="zh-CN">
    
<head>
    
  <meta charset="UTF-8">
    
  <title>css样式优先级</title>
    
</head>
    
<body>

</body>
    
</html>

    补充：

    1. <!DOCTYPE html>声明为HTML5文档。
    
2. <html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）。
    
3. <head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据。
    
4. <title>、</title>定义了网页标题，在浏览器标题栏显示。
    
5. <body>、</body>之间的文本是可见的网页主体内容。

  4. html标签

    单标签：<br/>、<hr/>、<img src="1.jpg" />等。 

双标签：<div>和</div>，第一个标签是开始，第二个标签是结束。

  5. 几个重要的属性

    id:定义标签的唯一id，就好像人的身份证
    
class：为html元素定义一个或多个类名
    
style：规定元素的行内样式（CSS样式）

  6. html注释

    <!--注释内容-->
  7. 声明必须是 HTML 文档的第一行，位于 \ 标签之前。

二.html常用标签

<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;


img标签

 img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">


a标签

超链接标签

a href="http://www.oldboyedu.com" target="_blank" >点我</a> 

所谓的超链接是指从一个网页指向一个目标的连接关系

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

绝对URL - 指向另一个站点（比如 href="http://www.jd.com）

相对URL - 指当前站点中确切的路径（href="index.htm"）

锚URL - 指向页面中的锚（href="#top"）

target属性：

_blank表示在新标签页中打开目标网页

_self表示在当前标签页中打开目标网页

补充

URL地址由4部分组成

第1部分：为协议：http://、ftp://等

第2部分：为站点地址：可以是域名或IP地址

第3部分：为页面在站点中的目录：stu

第4部分：为页面名称，例如 index.html

各部分之间用“/”符号隔开。


列表

1.无序列表

<ul type="disc">

　　<li>第一项</li>

　　<li>第二项</li>

</ul>

type属性：

disc（实心圆点，默认值）

circle（空心圆圈）

square（实心方块）

none（无样式）


有序列表

<ol type="1" start="2">

　　 <li>第一项</li>

　　 <li>第二项</li>

</ol>

type属性：

1 数字列表，默认值

A 大写字母

a 小写字母

Ⅰ大写罗马

ⅰ小写罗马


标题列表标签

<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>Egon</td>

　　　　　　 <td>杠娘</td>

　　　　　</tr>

　　　　 <tr>

　　　　　　  <td>2</td>

　　　　　　　<td>Yuan</td>

            <td>日天</td>

　　　　　　</tr> 　　

　　　　</tbody>


form表单标签

<form type="">  </from>

type属性：

属性	描述

accept-charset	规定在被提交表单中使用的字符集（默认：页面字符集）。

action	规定向何处提交表单的地址（URL）（提交页面）。

autocomplete	规定浏览器应该自动完成表单（默认：开启）。

enctype	规定被提交数据的编码（默认：url-encoded）。如果是上传文件需要将enctype="multipart/form-data"

method	规定在提交表单时所用的 HTTP 方法（默认：GET）。

name	规定识别表单的名称（对于 DOM 使用：document.forms.name）。

novalidate	规定浏览器不验证表单。

target	规定 action 属性中地址的目标（默认：_self）。


input元素

type属性值	表现形式	对应代码

text	单行输入文本	<input type=text" />

password	密码输入框	<input type="password"  />

date	日期输入框	<input type="date" />

checkbox	复选框	<input type="checkbox" checked="checked"  />

radio	单选框	<input type="radio"  />

submit	提交按钮	<input type="submit" value="提交" />

reset	重置按钮	<input type="reset" value="重置"  />

button	普通按钮	<input type="button" value="普通按钮"  />

hidden	隐藏输入框	<input type="hidden"  />

file	文本选择框	<input type="file"  />

----------------------------------------------------------------------

属性：

name：表单提交时的“键”，注意和id的区别

value：表单提交时对应项的值

type="button", "reset", "submit"时，为按钮上显示的文本年内容

type="text","password","hidden"时，为输入框的初始值

type="checkbox", "radio", "file"，为输入相关联的值

checked：radio和checkbox默认被选中的项

readonly：text和password设置只读

disabled：所有input均适用


select标签

<form action="" method="post">

　　<select name="city" id="city">

　　　　<option value="1">北京</option>

　　　　<option selected="selected" value="2">上海</option>

　　　　<option value="3">广州</option>

　　　　<option value="4">深圳</option>

　　</select>

</form>

　　

属性说明：

multiple：布尔属性，设置后为多选，否则默认单选

disabled：禁用

selected：默认选中该项

value：定义提交时的选项值


textarea多行文本

<textarea name="memo" id="memo" cols="30" rows="10"> 默认内容 </textarea>

属性说明

name：名称

rows：行数

cols：列数

disabled：禁用


块级标签：

<h1>...</h1>  标题一级

  <h2>...</h2>  标题二级

  <h3>...</h3>  标题三级

  <h4>...</h4>  标题四级

  <h5>...</h5>  标题五级

  <h6>...</h6>  标题六级

  <hr>  水平分割线

  <p>...</p>  段落

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

  <ol>...</ol>  有序列表

  <dl>...</dl>  定义列表

  <table>...</table>  表格

  <form>...</form>  表单

  <div>...</div>

 特点：

  1.总是从新的一行开始

  2.高度、宽度都是可控的

  3.宽度没有设置时，默认为100%

  4.块级元素中可以包含块级元素和行内元素


行内标签：

<span>...</span>

  <a>...</a>  链接

  <br>  换行

  <b>...</b>  加粗

  <strong>...</strong>  加粗

  <img >  图片

  <i>...</i>  斜体

  <em>...</em>  斜体

  <del>...</del>  删除线

  <u>...</u>  下划线

  <input>...</input>  文本框

  <textarea>...</textarea>  多行文本

  <select>...</select>  下拉列表

  特点：

  1.和其他元素都在一行

  2.高度、宽度以及内边距都是不可控的

  3.宽高就是内容的高度，不可以改变

  4.行内元素只能行内元素，不能包含块级元素

第一章、前端之html的更多相关文章

  1. web前端学习python之第一章_基础语法(二)

    web前端学习python之第一章_基础语法(二) 前言:最近新做了一个管理系统,前端已经基本完成, 但是后端人手不足没人给我写接口,自力更生丰衣足食, 所以决定自学python自己给自己写接口哈哈哈 ...

  2. web前端学习python之第一章_基础语法(一)

    web前端学习python之第一章_基础语法(一) 前言:最近新做了一个管理系统,前端已经基本完成, 但是后端人手不足没人给我写接口,自力更生丰衣足食, 所以决定自学python自己给自己写接口哈哈哈 ...

  3. 第一章 React新的前端思维方式

    ---恢复内容开始--- 第一章 React新的前端思维方式 1.1 初始化一个React项目 1.安装create-react-app npm install --global create-rea ...

  4. 《JavaScript高级程序设计（第3版）》阅读总结记录第一章之JavaScript简介

    前言: 为什么会想到把<JavaScript 高级程序设计(第 3 版)>总结记录呢,之前写过一篇博客,研究的轮播效果,后来又去看了<JavaScript 高级程序设计(第3版)&g ...

  5. 【vue.js权威指南】读书笔记（第一章）

    最近在读新书<vue.js权威指南>,一边读,一边把笔记整理下来,方便自己以后温故知新,也希望能把自己的读书心得分享给大家. [第1章:遇见vue.js] vue.js是什么? vue.j ...

  6. SpringMVC从入门到精通之第一章

    第一节 简介:SpringMVC是Spring框架的一个模块,Spring和SpringMVC无需通过中间整合层进行整合.SpringMVC是基于MVC的WEB框架.MVC设计模式在B/S下的应用: ...

  7. Laxcus大数据管理系统2.0（2）- 第一章 基础概述 1.1 基于现状的一些思考

    第一章 基础概述 1.1 基于现状的一些思考 在过去十几年里,随着互联网产业的普及和高速发展,各种格式的互联网数据也呈现爆炸性增长之势.与此同时,在数据应用的另一个重要领域:商业和科学计算,在各种新兴 ...

  8. (转)iOS Wow体验 - 第一章 - iOS人机界面设计规范纵览

    本文是<iOS Wow Factor:Apps and UX Design Techniques for iPhone and iPad>第一章译文精选,其余章节将陆续放出. 关于本套译文 ...

  9. 你不知道的javaScript上卷(第一章 作用域是什么)

    在写这篇博客时这本书我已经是看过一遍了,为了加深印象和深入学习于是打算做这系列的前端经典书籍导读博文,大家如果觉得这本书讲的好可以自己买来看看,我是比较喜欢看纸质版书的,因为这样才有读书的那种感觉. ...

随机推荐

  1. bs4笔记

    1.网页输出乱码的解决办法 r= requests.get('https://www.baidu.com/') r.encoding = 'gbk2312'   #有可能 gbk.utf-8 soup ...

  2. JAVA 基础编程练习题44 【程序 44 偶数的素数和】

    44 [程序 44 偶数的素数和] 题目:一个偶数总能表示为两个素数之和. package cskaoyan; public class cskaoyan44 { @org.junit.Test pu ...

  3. JAVA 基础编程练习题33 【程序 33 杨辉三角】

    33 [程序 33 杨辉三角] 题目:打印出杨辉三角形(要求打印出 10 行如下图) 程序分析: 1 1 1 1 2 1 1 3 3 1 1 4 6 4 1 1 5 10 10 5 1 package ...

  4. ivy使用Maven阿里云镜像的问题

    ivy默认使用的Maven仓库下载速度有点慢,所以想改成国内的,添加如下resolver: <ibiblio name="working-chinese-mirror" ro ...

  5. python 实现对象去重

    利用set()方法实现对象去重,重写__hash__方法和__eq__方法告诉程序什么样的对象是同一个对象 # 写一个类 拥有100个对象 # 拥有三个属性 name age sex # 如果两个对象 ...

  6. 集群架构03·MySQL初识，mysql8.0环境安装，mysql多实例

    官方网址 https://dev.mysql.com/downloads/mysql/社区版本分析 MySQL5.5:默认存储引擎改为InnoDB,提高性能和可扩展性,增加半同步复制 MySQL5.6 ...

  7. 【计算机视觉】深度相机（五）--Kinect v2.0

    原文:http://blog.csdn.NET/qq1175421841/article/details/50412994 ----微软Build2012大会:Kinect for Windows P ...

  8. npm run build 报错 Error: No PostCSS Config found in...

    module.exports = { plugins: [ require('autoprefixer')//自动添加css前缀 ] }; 在项目根目录新建postcss.config.js文件,添加 ...

  9. Goahead 编译

    目录 Goahead 目录说明 Ubuntu编译 交叉编译 方便测试 参考 title: Goahead date: 2019/11/6 09:45:01 toc: true --- Goahead ...

  10. redis同步到磁盘