第一章、前端之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. 硬核讲解 Jetpack 之 LifeCycle 源码篇

    前一篇 硬核讲解 Jetpack 之 LifeCycle 使用篇 主要介绍了 LifeCycle 存在的意义,基本和进阶的使用方法.今天话不多说,直接开始撸源码. 本文基于我手里的 android_9 ...

  2. [Python]编译错误：编码错误问题（SyntaxError: (unicode error) ）

    1 错误信息 python文件 1 #coding:utf-8 2 3 class Clz: 4 def func(filePath): 5 """ 6 func 7 - ...

  3. 用alert打印js对象

    用alert查看对象: function writeObj(obj){ var description = ""; for(var i in obj){ var property= ...

  4. iOS开发之——keychain使用

    iOS的keychain服务提供了一种安全的保存私密信息(密码,序列号,证书等)的方式.每个ios程序都有一个独立的keychain存储.从ios 3.0开始,跨程序分享keychain变得可行. 使 ...

  5. Apache Spark大数据分析入门（一）

    摘要:Apache Spark的出现让普通人也具备了大数据及实时数据分析能力.鉴于此,本文通过动手实战操作演示带领大家快速地入门学习Spark.本文是Apache Spark入门系列教程(共四部分)的 ...

  6. Flutter 接口签名MD5加密

    第一步 更新pubspec.yaml crypto: ^+ 第二步 先引入头文件: import 'dart:convert'; import 'package:convert/convert.dar ...

  7. python全栈测试之路-py3基础：基础的常用语法知识

    python基础链接 python3速查参考- python基础 2 -> if语句应用 + while循环应用 https://www.cnblogs.com/wuzhiming/p/7795 ...

  8. 初学django框架 (urls,include子路由，render模板渲染)(一)

    一.urls url的使用为了告诉django哪个url调用那一段代码 如上左图所示,后面的test,test1如下图所示,为视图函数,通过前面的路径,调用后面函数的代码: 只有输入正确的url才会在 ...

  9. C语言字符串之无重复字符的最长子串

    题目描述 给定一个字符串,请你找出其中不含有重复字符的 最长子串 的长度. 示例 输入: "abcabcbb" 输出: 解释: 因为无重复字符的最长子串是 . 输入: " ...

  10. 使用webpack搭建一个多页应用

     一.前言 最近需要为公司的活动写8个左右的移动端分享页面,有比较多的页面是公用的,如果用传统的方式来写的话,对于公用的代码抽取,css代码的压缩都是比较麻烦的,所以选择了webpack来搭建一个基本 ...