第一章、前端之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. 下了个pkg包的jenkins，的使用方法

    三.如何启动Jenkins1.最简单的方法是双击Jenkins的pkg包,一步一步点同意,默认8080端口2.使用命令行启动打开terminal,进入到war包所在目录,执行命令: java -jar ...

  2. xhprof代码添加分析性能

    <?php xhprof_enable( XHPROF_FLAGS_MEMORY, [ 'ignored_functions' => [ //'call_user_func', //'ca ...

  3. swift 第三课 宏定义 宏方法

    swift 与oc 不同,没有宏的定义就像 oc 可以这样写,直接调用: /* 默认颜色 */ #define RGBCOLOR_HEX(h) RGBCOLOR((((h)>>16)&am ...

  4. Python3 Selenium自动化web测试 ==>FAQ：Unittest测试报告生成文件名加测试完成时间字符串

    测试代码,虽然有点笨重,以后再修改: if __name__ == '__main__': report = os.path.join('D:/Python36/report/report.html' ...

  5. CodeForces 1251A --- Broken Keyboard

    [CodeForces 1251A --- Broken Keyboard ] Description Recently Polycarp noticed that some of the butto ...

  6. 虚拟机中CentOS 7 x64图形化界面的安装

    VMware的初始设置如下: 图1 待虚拟机读取完iso,出现此界面 图2 我们主要是安装图形化界面的系统,所以在软件选择栏下如图选择: 图3 设置root密码,创建用户,等候安装完成: 图4 安装完 ...

  7. selenium3关于ddt数据驱动。。

    from selenium import webdriver import ddt import time import unittest @ddt.ddt class TestLogin(unitt ...

  8. Python基础总结之第七天开始【总结字符串、列表、元组的常用方法】（新手可相互督促）

    前面的笔记说,python中的一切数据类型都是对象 我们在细化下就是:对象可由两部分组成:对象数据和对象方法 针对不同类型的数据对象,有不同的操作对象的方法. 那么我们开始看下字符串对象的常用方法: ...

  9. 【AtCoder】AGC001

    AGC001 A - BBQ Easy 从第\(2n - 1\)个隔一个加一下加到1即可 #include <bits/stdc++.h> #define fi first #define ...

  10. thinkphp5分页查询paginate()传递参数

    使用paginate()分页,我这里实现的是搜索后分页显示,翻页后传递搜索关键字 www.demo.com/home/search/?k=搜索关键字&page=2 搜索分页源码在: think ...