第一章、前端之html
- 一. html介绍
- 二.html常用标签

第一章、前端之html

一. html介绍

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文件内容发给浏览器 --> 浏览器渲染页面 **

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

html不是什么？

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

HTML使用标签来描述网页。

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>之间的文本是可见的网页主体内容。

html标签

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

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

几个重要的属性

id:定义标签的唯一id，就好像人的身份证

class：为html元素定义一个或多个类名

style：规定元素的行内样式（CSS样式）

html注释
```

```
声明必须是 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的更多相关文章

web前端学习python之第一章_基础语法(二)
web前端学习python之第一章_基础语法(二) 前言:最近新做了一个管理系统,前端已经基本完成, 但是后端人手不足没人给我写接口,自力更生丰衣足食, 所以决定自学python自己给自己写接口哈哈哈 ...
web前端学习python之第一章_基础语法(一)
web前端学习python之第一章_基础语法(一) 前言:最近新做了一个管理系统,前端已经基本完成, 但是后端人手不足没人给我写接口,自力更生丰衣足食, 所以决定自学python自己给自己写接口哈哈哈 ...
第一章 React新的前端思维方式
---恢复内容开始--- 第一章 React新的前端思维方式 1.1 初始化一个React项目 1.安装create-react-app npm install --global create-rea ...
《JavaScript高级程序设计（第3版）》阅读总结记录第一章之JavaScript简介
前言: 为什么会想到把<JavaScript 高级程序设计(第 3 版)>总结记录呢,之前写过一篇博客,研究的轮播效果,后来又去看了<JavaScript 高级程序设计(第3版)&g ...
【vue.js权威指南】读书笔记（第一章）
最近在读新书<vue.js权威指南>,一边读,一边把笔记整理下来,方便自己以后温故知新,也希望能把自己的读书心得分享给大家. [第1章:遇见vue.js] vue.js是什么? vue.j ...
SpringMVC从入门到精通之第一章
第一节简介:SpringMVC是Spring框架的一个模块,Spring和SpringMVC无需通过中间整合层进行整合.SpringMVC是基于MVC的WEB框架.MVC设计模式在B/S下的应用: ...
Laxcus大数据管理系统2.0（2）- 第一章基础概述 1.1 基于现状的一些思考
第一章基础概述 1.1 基于现状的一些思考在过去十几年里,随着互联网产业的普及和高速发展,各种格式的互联网数据也呈现爆炸性增长之势.与此同时,在数据应用的另一个重要领域:商业和科学计算,在各种新兴 ...
(转)iOS Wow体验 - 第一章 - iOS人机界面设计规范纵览
本文是<iOS Wow Factor:Apps and UX Design Techniques for iPhone and iPad>第一章译文精选,其余章节将陆续放出. 关于本套译文 ...
你不知道的javaScript上卷(第一章作用域是什么)
在写这篇博客时这本书我已经是看过一遍了,为了加深印象和深入学习于是打算做这系列的前端经典书籍导读博文,大家如果觉得这本书讲的好可以自己买来看看,我是比较喜欢看纸质版书的,因为这样才有读书的那种感觉. ...

随机推荐

Clonezilla克隆还原系统
简介 Clonezilla是一个专门用来克隆磁盘驱动器的Linux发行版.它可以操作任何你所能想象到的文件系统类型.Clonezilla有两种版本:Live和SE.Live版本与Ubuntu的Live ...
搭建小规模邮件服务器（winmail-server）
Winmail mail server邮件系统的安装及使用. 在安装之前首先要配置服务器固定的IP地址.子网掩码和DNS服务器(网关我这里暂时用不着). 先来配置IP地址信息,使两台虚拟机能够互联互通 ...
Mysql的binlog 和InnoDB的redo-log
来源:https://www.jianshu.com/p/4bcfffb27ed5 mysql日志系统之redo log和bin log Mr林_月生关注 12018.12.02 01:35:06字数 ...
【编程开发】CMake相关注意事项
[编程开发]CMake相关注意事项声明:引用请注明出处http://blog.csdn.net/lg1259156776/ CMake是一个非常常用的跨平台移植的工具,CMake可用来生成不同平台下 ...
深入理解JS的事件绑定、事件流模型
一.JS事件 (一)JS事件分类 1.鼠标事件: click/dbclick/mouseover/mouseout 2.HTML事件: onload/onunload/onsubmit/onresi ...
java获取单张网页中img标签中的src
/** * 得到网页中图片的地址 */ public static List<String> getImgStr(String htmlStr) { List<String> ...
TheSierpinskiFractal(POJ-1941)【递推】
题意:用‘\’,'/','_'按照给定规则画出三角形题目链接:https://vjudge.net/problem/POJ-1941 思路:题中的三角形生成规则是符合递推关系的,可以先手动完成第一个 ...
Scrapy爬虫-win7下创建运行项目
开始的时候,我只安装了python3.5,安装不了scrapy库,网上搜了一下说是scrapy不支持python3.x 然后,我就又安装了python2.7 为了,默认使用2.7,我在环境变量path ...
Python基础第三章使用字符串（1）精简版
所有标准序列操作(索引,切片,乘法,成员资格检查,长度,最小值,最大值)都适于字符串. 但,字符串是不可变得,故所有得元素赋值和切片赋值都是非法的. 1. %s 转换说明符设置字符串格式 %左边指定 ...
Python爬虫—requests库get和post方法使用
目录 Python爬虫-requests库get和post方法使用 1. 安装requests库 2.requests.get()方法使用 3.requests.post()方法使用-构造formda ...

第一章、前端之html

第一章、前端之html

一. html介绍

二.html常用标签

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

随机推荐

热门专题