前段基础之HTML

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video { margin: 0; padding: 0; border: 0 }
body { font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 14px; line-height: 1.6; color: #333; background-color: #fff; padding: 20px; max-width: 960px; margin: 0 auto }
body>*:first-child { margin-top: 0 !important }
body>*:last-child { margin-bottom: 0 !important }
p,blockquote,ul,ol,dl,table,pre { margin: 15px 0 }
h1,h2,h3,h4,h5,h6 { margin: 20px 0 10px; padding: 0; font-weight: bold }
h1 tt,h1 code,h2 tt,h2 code,h3 tt,h3 code,h4 tt,h4 code,h5 tt,h5 code,h6 tt,h6 code { font-size: inherit }
h1 { font-size: 28px; color: #000 }
h2 { font-size: 24px; border-bottom: 1px solid #ccc; color: #000 }
h3 { font-size: 18px }
h4 { font-size: 16px }
h5 { font-size: 14px }
h6 { color: #777; font-size: 14px }
body>h2:first-child,body>h1:first-child,body>h1:first-child+h2,body>h3:first-child,body>h4:first-child,body>h5:first-child,body>h6:first-child { margin-top: 0; padding-top: 0 }
a:first-child h1,a:first-child h2,a:first-child h3,a:first-child h4,a:first-child h5,a:first-child h6 { margin-top: 0; padding-top: 0 }
h1+p,h2+p,h3+p,h4+p,h5+p,h6+p { margin-top: 10px }
a { color: #4183C4; text-decoration: none }
a:hover { text-decoration: underline }
ul,ol { padding-left: 30px }
ul li>:first-child,ol li>:first-child,ul li ul:first-of-type,ol li ol:first-of-type,ul li ol:first-of-type,ol li ul:first-of-type { margin-top: 0px }
ul ul,ul ol,ol ol,ol ul { margin-bottom: 0 }
dl { padding: 0 }
dl dt { font-size: 14px; font-weight: bold; font-style: italic; padding: 0; margin: 15px 0 5px }
dl dt:first-child { padding: 0 }
dl dt>:first-child { margin-top: 0px }
dl dt>:last-child { margin-bottom: 0px }
dl dd { margin: 0 0 15px; padding: 0 15px }
dl dd>:first-child { margin-top: 0px }
dl dd>:last-child { margin-bottom: 0px }
pre,code,tt { font-size: 12px; font-family: Consolas, "Liberation Mono", Courier, monospace }
code,tt { margin: 0 0px; padding: 0px 0px; white-space: nowrap; border: 1px solid #eaeaea; background-color: #f8f8f8 }
pre>code { margin: 0; padding: 0; white-space: pre; border: none; background: transparent }
pre { background-color: #f8f8f8; border: 1px solid #ccc; font-size: 13px; line-height: 19px; overflow: auto; padding: 6px 10px }
pre code,pre tt { background-color: transparent; border: none }
kbd { background-color: #DDDDDD; background-image: linear-gradient(#F1F1F1, #DDDDDD); background-repeat: repeat-x; border-color: #DDDDDD #CCCCCC #CCCCCC #DDDDDD; border-style: solid; border-width: 1px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 10px; padding: 1px 4px }
blockquote { border-left: 4px solid #DDD; padding: 0 15px; color: #777 }
blockquote>:first-child { margin-top: 0px }
blockquote>:last-child { margin-bottom: 0px }
hr { clear: both; margin: 15px 0; height: 0px; overflow: hidden; border: none; background: transparent; border-bottom: 4px solid #ddd; padding: 0 }
table th { font-weight: bold }
table th,table td { border: 1px solid #ccc; padding: 6px 13px }
table tr { border-top: 1px solid #ccc; background-color: #fff }
table tr:nth-child(2n) { background-color: #f8f8f8 }
img { max-width: 100% }

转自

HTML 初识

web服务本质

import socket

def main():

    sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
    sock.bind((‘localhost‘,8081))
    sock.listen(5)

    while True:
        print("server is working.....")
        conn, address = sock.accept()

        request = conn.recv(1024)

        conn.sendall(bytes("HTTP/1.1 201 OK\r\n\r\n<h1>Hello Yuan</h1>","utf8"))
        conn.close()

if __name__ == ‘__main__‘:

    main()

html是什么？

  • 超文本标记语言（Hypertext Markup Language，HTML）通过标签语言来标记要显示的网页中的各个部分。一套规则，浏览器认识的规则
  • 浏览器按顺序渲染网页文件，然后根据标记符解释和显示内容。但需要注意的是，对于不同的浏览器，对同一标签可能会有不完全相同的解释（兼容性）
  • 静态网页文件扩展名：.html 或 .htm

html不是什么？

HTML 不是一种编程语言，而是一种标记语言 (markup language)
HTML 使用标记标签来描述网页

html结构

  • <!DOCTYPE html> 告诉浏览器使用什么样的html或者xhtml来解析html文档
  • <html></html>是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML 文档，在它们之间是文档的头部<head>和主体<body>。
  • <head></head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。
  • <title></title>定义网页标题，在浏览器标题栏显示。
  • <body></body>之间的文本是可见的网页主体内容

html标签格式

标签的语法：

<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
<标签名 属性1=“属性值1” 属性2=“属性值2”…… />

常用标签

<!DOCTYPE>标签

<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

作用：声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。

document.compatMode：

  1. BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。
  2. CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。

这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat

<head>内常用标签

<meta>标签

meta介绍
<meta>元素可提供有关页面的元信息（meta-information），针对搜索引擎和更新频度的描述和关键词。
<meta>标签位于文档的头部，不包含任何内容。
<meta>提供的信息是用户不可见的

meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

(1)name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">

<meta name="description" content="老男孩培训机构是由一个很老的男孩创建的">

(2)http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

<meta http-equiv="Refresh" content="2;URL=https://www.oldboy.com"> //(注意后面的引号，分别在秒数的前面和网址的后面)

<meta http-equiv="content-Type" charset=UTF8">

<meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />

非meta标签

    <title>oldboy</title>
    <link rel="icon" href="http://www.jd.com/favicon.ico">
    <link rel="stylesheet" href="css.css">
    <script src="hello.js"></script>　

<body>内常用标签

基本标签（块级标签和内联标签）

‘‘‘
<hn>: n的取值范围是1~6; 从大到小. 用来表示标题.

<p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.

<b> <strong>: 加粗标签.

<strike>: 为文字加上一条中线.

<em>: 文字变成斜体.

<sup>和<sub>: 上角标 和 下角表.

<br>:换行.

<hr>:水平线

特殊字符：
      &lt; &gt；&quot；&copy;&reg;

‘‘‘

<div>和<span>

<div></div> ： <div>只是一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现.
<span></span>： <span>表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现.

块级元素与行内元素的区别
所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的。

图形标签: <img>

‘‘‘
src: 要显示图片的路径.

alt: 图片没有加载成功时的提示.

title: 鼠标悬浮时的提示信息.

width: 图片的宽

height:图片的高 (宽高两个属性只用一个会自动等比缩放.)

‘‘‘

超链接标签(锚标签): <a> </a>

什么是超级链接？
所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上
的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序

什么是URL？
URL是统一资源定位器(Uniform Resource Locator)的缩写，也被称为网页地址，是因特网上标准的资源的地址。
URL举例
http://www.sohu.com/stu/intro.html
http://222.172.123.33/stu/intro.html

URL地址由4部分组成
第1部分：为协议：http://、ftp://等
第2部分：为站点地址：可以是域名或IP地址
第3部分：为页面在站点中的目录：stu
第4部分：为页面名称，例如 index.html
各部分之间用“/”符号隔开。

URL

‘‘‘

<a href="" target="_blank" >click</a>

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

    绝对 URL - 指向另一个站点（比如 href="http://www.jd.com）
    相对 URL - 指当前站点中确切的路径（href="index.htm"）
    锚 URL - 指向页面中的锚（href="#top"）

‘‘‘

列表标签

‘‘‘
<ul>: 无序列表 [type属性：disc(实心圆点)(默认)、circle(空心圆圈)、square(实心方块)]

<ol>: 有序列表
         <li>:列表中的每一项.

<dl>  定义列表

         <dt> 列表标题
         <dd> 列表项

‘‘‘

表格标签: <table>

表格概念
表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据。
表格的基本结构：

<table>
         <tr>
                <td>标题</td>
                <td>标题</td>
         </tr>

         <tr>
                <td>内容</td>
                <td>内容</td>
         </tr>
</table>

属性：

‘‘‘

<tr>: table row

<th>: table head cell

<td>: table data cell

属性:

    border: 表格边框.

    cellpadding: 内边距

    cellspacing: 外边距.

    width: 像素 百分比.（最好通过css来设置长宽）

    rowspan:  单元格竖跨多少行

    colspan:  单元格横跨多少列（即合并单元格）

‘‘‘

练习：

表单标签: <form>

功能：表单用于向服务器传输数据，从而实现用户与Web服务器的交互

表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含textarea、select、fieldset和 label标签。

表单属性

action: 表单提交到哪.一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如https://www.sogou.com/web

method: 表单的提交方式 post/get默认取值就是get

表单元素

基本概念：
HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。
表单一般用来收集用户的输入信息
表单工作原理：
访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。 
服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息

<input>系列标签

‘‘‘
<1> 表单类型
type:        text 文本输入框

             password 密码输入框

             radio 单选框

             checkbox 多选框  

             submit 提交按钮            

             button 按钮(需要配合js使用.) button和submit的区别？

             file 提交文件：form表单需要加上属性enctype="multipart/form-data" 

            上传文件注意两点：

                     1 请求方式必须是post
                     2 enctype="multipart/form-data"
 <2> 表单属性
 name:    表单提交项的键.

           注意和id属性的区别：name属性是和服务器通信时使用的名称；
           而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在css和javascript中使用的

value:    表单提交项的值.对于不同的输入类型，value 属性的用法也不同：

                type="button", "reset", "submit" - 定义按钮上的显示的文本

                type="text", "password", "hidden" - 定义输入字段的初始值

                type="checkbox", "radio", "image" - 定义与输入相关联的值

checked:  radio 和 checkbox 默认被选中

readonly: 只读. text 和 password

disabled: 对所用input都好使.

‘‘‘

select标签

‘‘‘
 <select> 下拉选标签属性

          name:表单提交项的键.

          size：选项个数

          multiple：multiple
                 <optgroup>为每一项加上分组

                 <option> 下拉选中的每一项 属性：

                       value:表单提交项的值.
                       selected: selected下拉选默认被选中

‘‘‘

<textarea> 多行文本框

‘‘‘

<form id="form1" name="form1" method="post" action="">
        <textarea cols=“宽度” rows=“高度” name=“名称”>
                   默认内容
        </textarea>
</form>

‘‘‘

<label>标签

定义：<label> 标签为 input 元素定义标注（标记）。
说明：
1 label 元素不会向用户呈现任何特殊效果。
2 <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。

‘‘‘

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

        <label for=“username”>用户名</label>
        <input type=“text” name=“username” id=“username” size=“20” />
</form>

‘‘‘

<fieldset>标签

‘‘‘

<fieldset>
    <legend>登录吧</legend>
    <input type="text">
</fieldset>

‘‘‘

li.li1 { margin: 0.0px 0.0px 4.3px 0.0px; font: 18.0px Times }
li.li2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Times }
span.s1 { font: 12.0px Helvetica }
span.s2 { }
span.s3 { font: 18.0px Arial }
span.s4 { font: 18.0px Arial; color: #ff2500 }
span.s5 { font: 12.0px Helvetica }
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 33.0px "Arial Black"; color: #336666 }
span.s1 { }
span.s2 { font: 33.0px Times }

时间： 2024-08-11 09:53:05

前段基础之HTML的相关文章

前段基础----JavaScript基础

一.JavaScript概述 1,JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.(客户端执行的语言) Netscape(网景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator 2.0产品中开发出一套livescript的脚本语言.Sun和Netscape共同完成.后改名叫Javascript 微软随后模仿在其IE3.0的产品中搭

Web前段基础

CommonJS是一种标准(正在不断发展,描述了模块,各类api等等),它的目标是提供一个类似于Python,Ruby,Java的标准库. 在CommonJS标准下面,开发者可以使用CommonJS API编写应用程序,这些应用程序可以运行在不同的Javascript解释器和不同的主机环境中. http://raychase.iteye.com/blog/1463617 CommonJS标准有多个实现(类似于C标准的实现有多个) CommonJS描述的模块现在有两种通用实现 AMD 异步模块定义

前段基础课程(基础标签属性)

2017年7月21日 课堂笔记                       孙小强 # 课程 htlm+css Javascript Node-js vue H5新特性 微信开发 技术点 Html * 定义页面结构 +css * 定义页面样式 javascript * 定义页面逻辑 # 准备 ### 编辑器 * sublime * notepad++ * vim * atom * dreamweaver * webstorm(集成环境) ### 浏览器 * 主流浏览器    *chrome  内

html5前段基础课程(二进制转换篇)

## 2的次方数 * 2的0次方=1 * 2的1次方=2 * 2的2次方=4 * 2的3次方=8 * 2的4次方=16 * 2的5次方=32 * 2的6次方=64 * 2的7次方=128 * 2的8次方=256 * 2的9次方=512 * 2的10次方=1024 -------------------------------------------------------- ## 二进制转十进制 ##### 二进制10011011转换为十进制(练习) >10 011 011 >2的7次方+2的

前段基础之css样式

css介绍: css(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素.浏览器读到样式表是,它就会按照这个样式表来对文档进行格式化. css的引入方式: 内联样式:<p style="color:red"> Hello world</p> 嵌入样式:在头文件中创建style在里边设置样式 由文件导入:<link href="mystyle.css" rel="stylesheet" t

前段基础之BOM,DOM

window对象: 在客户端JavaScript中,Window对象是全局对象,所有的表达式都在当前的环境中,也就是说要引用当前窗户根本不需要特殊的语法,可以吧那个窗口的属性作为全局变量来使用.而且将window.document缩写为:document ,   window.alert()写为alert() alert() 显示带有一段消息和一个确认按钮的警告框. setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式. clearInterval() 取消由 setIn

前段基础 判断数字是整数 还是小数

var ii = 12; if (parseInt(ii) == parseFloat(ii)){ alert("整数"); }else{ alert("小数"); } 原文地址:https://www.cnblogs.com/angdh/p/11832041.html

HTML学习总结（1）

前段基础: 以下为我们需要了解的三个方面: html 超文本标记语言  (页面结构) css  层叠样式表  (页面样式) 通过 html+css 能设置静态页面 js   javaScript   (页面行为) 常用的集中软件开发工具: subline .webStorm. DreamWeave: 基本样式: <!DOCTYPE html> <html> <head> <meta charset=utf-8" /> <title>无标

2017新年新愿

在2017这新的一年里,希望自己能做到. 加强自己的基础知识.(万丈高楼平地起) 深入学习EF框架.(EF中的集成,仓储结构,规约这些) 接触前段bootstrap,加强自己在js,css的前段基础. 接触框架的搭建和选择. 闲余时间更多的接触和了解新的知识和技能.(redis,memcached,unity注入...这些在之前的公司都没有接触.) 希望自己在新的一年,能跳进许多坑.接触更多新鲜的事物.新的框架,新的数据库,新的缓存方式...堆着好几本书,希望今年不让他们在角落里吃土.