HTML的高富帅

1,前端的内容(组成部分有以下三部分)

　　HTML CSS JS

　　裸体的人　　　　　　穿上好看的衣服　　　　动起来

　　前端和服务器交互的流程:

　　　　浏览器发送请求------>HTTP协议----->服务端接收请求----->服务端返回响应----->服务器把HTML文件内容发送给客户端------浏览器再去渲染页面

　　1.1>HTML:超文本标记语言(Hypertext Markup Language HTML)是一种用于创建网页的标记语言,同过一些列约定俗称标记来设计者个网页

　　本质是浏览器可识别的规则,我们只需按照规则写网页,浏览器根据规则去渲染我们的网页,对于不同的浏览器可能解析(渲染)出不同的效果,不同浏览器的渲染规则可能不一样(不同浏览器的规则兼容问题)文件的扩展名html

　　1.2>HTML是一种标记性语言,是一种用来描述网页(创建网页内容,格式,样式),不是一种编程语言

　　1.3>HTML的结构:

　　　　<!DOCTYPE html>.......................声明这是一种html的标记语言

　　　　<html lang ="zh-CN">..............................html是用语言是中文

　　　　<head>.................................................html语言的头部,是给浏览器看的,供浏览器去渲染

　　　　　　<meta charset="utf-8">................编码格式是utf-8(对于中文需要申明编码)当有的浏览器是gbk就设置成gbk编码

　　　　　　<title>css样式优先级</title>..............title--->标题　　style--->CSS样式　　script--->JS

　　　　</head>.............................html头部的结束,说明给浏览器的内容看完了

　　　　<head 属性1=值1 属性2=值2></head>.....................html头部的标签语法

　　　　<body>......................身体是给用户看的

　　　　<body>

　　　　body的属性................................一堆关于body的属性标签

　　　　</body>

　　　　</html>

2,HTML的标签语法

　　2.1>HTML是由尖括号包围的关键字,如<html>,<div>

　　2.2>HTML标签通常是成对出现的:<div>和</div>,第一个标签是开始,第二个标签是结束,结束标签会有斜线

　　2.3>有一部分标签是单独呈现的譬如:<br/>,<hr/>,<img scr="1.jpg"/>等

　　2.4>标签里面可以有若干属性也可以不带属性

3,标签的语法:

　　3.1><标签名属性1="属性值1" 属性2="属性值2".....>内容部分</标签名>

　　3.2><标签名属性1="属性值1" 属性2="属性值2"........../>

3.3>HTML标签语言也可以注释

4,HTML格式(架构)的标签解释

　　4.1><!DOCTYPE>标签是一种声明使用html标记语言去写,而不是html的标签

　　4.2>head内常用的标签

<title></title>	定义网页标题
<style></style>	定义内部样式
<script></script>	定义JS代码或引入外部JS文件
<link/>	引入外部样式表文件
<meta/>	定义网页原信息
标签	意义

　　4.2.1><meta>可以提供有关页面的原信息(meta-infomation)针对搜索引擎和更新频度的描述和关键词

　　4.2.2><meta值开始在文档的头部,不包含任何内容>

　　4.2.3><meta>提供的信息是用户不可看的,meta标签的组成:http-equiv属性和name属性,不同属性又有不同的参数值 ,这些不同的参数值就有了不同的网页功能

　　　　4.2.3.1>http-equiv属性:相当于http文件的开头作用,它可以向浏览器传回一些有有用的信息,以帮助正确的显示网页内容与之对应的属性值为content,content中的内容就是各个参数的变量值

1 <!--2秒后跳转到对用的网址,别把引号丢了-->

2 <meta http-equiv="refresh" content="2:URL=https://www.baidu.com">

3 <!--指定文档的编码内容 -->

4 <meta http-equiv="content-Type" charset="utf-8">

5 <!--通知浏览器以高级模式渲染文档-->

6 <meta http-equiv="x-ua-compatible" content="IE=edge">

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

1 <meta name="keyworlds" content="meta刘阳,meta吴宣仪,">

2

3 <meta name="description" content="小男孩备胎库">

5,body中的常用标签

　　5.1>独自占一行的块儿级标签:　　

 1 <h1>我是一级标题</h1>...........................标题都是自成一行

 2 <h2>我是二级标题</h2>

 3 <h3>我是三级标题</h3>

 4 <h4>我是四级标题</h4>

 5 <h5>我是五级标题</h5>

 6 <h6>我是六级标题</h6>

 7 <p>段落</p>........自成一行是里边放段落

 8 <div>内容</div>

 9 <hr>一条分割线</hr>

10 <li>内容前边加一个点点</li>

11 <tr>表头</tr>

　　5.2>在一行可以显示多个内容(行内标签/内联标签)

<a href="http://www.baidu.com">人工搜索智障</a>.......超链接标签

<span></span>.............定义内联元素通过css来渲染效果

<img scr="图片的路径" alt="图片未加载成功的提示" title="鼠标悬浮时提示信息" width="宽" height="高">

<b>加粗</b>

<i>倾斜</i>

<u>下划线</u>

<s>删除</s>

　　5.3>特殊字符(写完代码一定要加英文的";")

内容	对应代码
空格	&nbsp
>	&gt
<	&lt
&	&amp
¥	&yen
版权	&copy
注册	&reg

　　5.4>div标签和span标签

　　　　5.4.1>div标签是用来定义一个块儿级元素的,并无实际意义,主要通过css样式为其赋予不同的表现

　　　　5.4.2>span标签是用来定义内联(行内)元素,并无实际意义,主要通过css样式为其赋予不同的效果

###块级元素与行内元素的区别###

　　所谓块级元素,是以另起一行渲染的元素,行内元素则不需要另起一行,如果单独在网页中插入这两个元素,不会对页面产生任何影响,这两个元素是专门为css样式衍生的

　　5.5>img标签

　　5.6>a标签:是超链接标签指从一个网页指向另一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序

<a hrep="http://www.baidu.com" target="_blank">人工搜索智障</a>

hrep值的前边是:网址,两个尖括号之间是这个网址的重命名(命名成什么名字都可以)

hrep属性指定目标网页地址,改地址可以有几种类型:

　　绝对URL-指向另一个站点(hrep="http"//www.baidu.com")

　　相对URL-指定当前路径中的确切路径(hrep="index.html")

　　锚URL---指向页面中的锚("hrep=#top")..........................回到置顶的那个

target参数

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

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

　　5.7>列表标签

　　　　5.7.1>无序列表列表

1 <ul type="disc">

　　2 <li>第一项</li>

　　3<li>第二项</li>

4 </ul>

type属性:

　　disc(实心圆点,默认值)

　　circle(空心圆圈)

　　square(实心方块)

　　none(无样式)

　　　　5.7.2>有序列表

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

  <li>第一项</li>

  <li>第二项</li>

</ol>

type属性: start:表示从属性的第几个值开始

　　1:表示数字列表,默认值

　　A:大写字母

　　a:小写字母

　　I:大写罗马

　　i:小写罗马

　　　　5.7.3>标题列表

 1 <d1>

 2     <dt>标题1</dt>

 3     <dd>内容1</dd>

 4     <dt>标题2</dt>

 5     <dd>内容1</dd>

 6

 7

 8     <dd>内容2<dd>

 9

10 </d1>

　　5.8>表格标签

　　　　表格是一个二维数据结构,一个表格有若干行组成,一个行又有若干单元格组成,单元格里可以包含文字,列表,图案,表单,数字符号,预置文本和其他内容,把表格最重要的是显示表格类数据,表格类数据是指最适合组织为表格格式(按行和列组织)的数据

 1 <table border="3">

 2     <thead>

 3     <tr>

 4         <th>序号</th>

 5

 6         <th>姓名</th>

 7

 8         <th>爱好</th>

 9

10     </tr>

11

12     </thread>

13

14     <tbody>

15     <tr>

16         <td>1</td>

17

18         <td>liangxue</td>

19

20         <td>宅</td>

21

22     </tr>

23

24     <tr>

25

26         <td>2</td>

27

28         <td>老郑</td>

29

30         <td>小胖子</td>

31

32     </tr>

33

34     </tbody>

35

36  </table>

table后边的属性:

　　border:表格边框

　　cellpadding:内边距

　　cellspacing:外边距

　　width:像素百分比(最好通过css来设置长宽)

　　rowspan:单元格竖跨多少行

　　colspan:单元格横跨多少列(即合并单元格)

6,标签的嵌套

　　标签可以嵌套标签

　　注意事项:1尽量不要用内联标签包块儿级标签

　　　　　　2 p标签不能嵌套p标签

　　　　　　3 p标签不能嵌套div标签

7,获取用户输入的标签(在网页上显示一个框框供顾客输入信息)

　　7.1>form标签(一个容器,包住所有获取用户输入的标签)

　　功能:表单用于向服务器传输数据,从而实现用户与web服务器的交互

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

　　　　表单还可以包含textarea,select,fildset和lable标签

表单属性

属性	描述
accept-charset	规定在被提交表单中使用的字符集(默认:页面字符集)
action	规定向何处提交表单的地址(URL)(提交页面)
autocomplete	规定浏览器应自动完成表单(默认:开启)
enctype	规定被提交数据的编码 (默认:url-encoded)
method	规定在被提交表单时的HTTP方法(默认:GET)
name	规定识别表单的名称(对于DOM使用:document.forms.name)
novalidate	规定浏览器不验证表单
target	规定action属性中地址的目标(默认:_self)

表单元素:

　　HTML表单是HTML元素中较为复杂的部分,表单往往如脚本,动态页面,数据处理等功能相结合,因此它是制作动态网站很重要的内容

　　表单一般用来收集用户输入的内容

　　表单工作原理:访问者在浏览哟表单网页时,可填写内容,然后按某个内容提交,这些信息偶同过Internet传送到服务器,服务器专门的程序对这些数据进行处理,如果有错误信息会返回,并要求纠正错误,当数据完整无误时,服务器输入一个完成的列表

　　7.2>input标签(<input>元素会根据不同的type属性,变化为多种形态)

type属性值	表现形式	对应代码
text	单行输入文本	<input type=text"/>
password	密码输入框	<input type="password"/>
date	日期输入框	<input type="date"/>
checkbox	复选框	<input type="checkbox" checkbox="checkbox"/>
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",为输入框的初始值

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

　　readonly:text和password设置为只读

　　disable:所有input都适用

　　　　botton--->普通按钮--->通常用JS给它绑定事件

　　　　submit--->提交按钮--->默认将form表单的数据提交

　　　　reset---->重置按钮---->将form中输入的框都清空

　　7.3>select标签

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

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

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

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

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

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

7     </select>

8 </form>

属性说明:

　　multiple:布尔值属性,设置后为多选否则默认单选

　　disable:禁用

　　selected:默认选中该项

　　value:定义提交时的选项值

　　7.4>label标签

　　定义<label>标签为input元素定义标注(标记):

　　　　7.4.1>label不会向用户提供特殊效果

　　　　7.4.2>label标签的for属性值应该与相关属性的id值相等(因为for的值是和id值一样的标签绑定在一起的,点击这个label标签,id属性值一样的也会响应.)

<form action="">

    <label form="username">用户名</label>

    <input type="text" id="username" name= "username">

</form    >

　　7.5>textarea多行文本标签

<texeare name="memo id="memo" cols="30" rows="10">

    默认内容

</texerare>

　　属性说明:

　　name:名称

　　rows:行数

　　cols:列数

　　disable:禁用


<title></title>

HTML的高富帅的更多相关文章

【管理心得之三十八】如果“Q”不是高富帅，也吸引不了白富美“A”
场景再现=========================={美剧片段}一位老人在电话亭中,一次又一次地向公用电话投硬币,但是每一次仅是接通后就自动掉线了.老人无奈之下寻求他人拨打报修电话,但苦等了许 ...
[连载]Java程序设计(03)---任务驱动方式：寻找高富帅和屌丝
版权声明:本文为博主原创文章,请在转载时说明出处. https://blog.csdn.net/jackfrued/article/details/26163877 任务:相同在上一家公司.公司还须要 ...
Android零基础入门第4节：正确安装和配置JDK, 高富帅养成第一招
原文:Android零基础入门第4节:正确安装和配置JDK, 高富帅养成第一招在前几期中总结分享了Android的前世今生.Android 系统架构和应用组件那些事.带你一起来聊一聊Android开 ...
MongoDB拥有SSD秒杀高富帅使用过程分享
[IT168现场报道]2013年4月18-20日,第四届中国数据库技术大会(DTCC 2013)在北京福朋喜来登酒店拉开序幕.在为期三天的会议中,大会将围绕大数据应用.数据架构.数据管理(数据治理). ...
快速入门系列--NOSQL--05Redis也木有那么“高富帅”
由于工作慢慢从原来的少量用户的企业内部应用慢慢转化为了大量用户的企业内部应用或者直接转为了线上高并发应用,因而也渐渐的开始使用memcached.Redis等缓存服务器,为了便于自身的学习和记忆,特此 ...
Windows界面编程第四篇异形窗体高富帅版 ---博客
http://blog.csdn.net/morewindows/article/details/8451638
原来Java大数据才是真正的高富帅！
大数据时代,中国IT环境也将面临重新洗牌,不仅仅是企业,更是程序员们转型可遇而不可求的机遇. 国内大多数大型互联网公司的程序员被称作研发工程师,但实际上国内几乎没有研发项目,只能叫做开发.开发程序员的 ...
pytest系列(一)：什么是单元测试界的高富帅？
pytest是python语言中一款强大的单元测试框架,用来管理和组织测试用例,可应用在单元测试.自动化测试工作中. unittest也是python语言中一款单元测试框架,但是功能有限,没有pyte ...
linux服务器开发一基础
注:本文仅限交流使用,请务用于商业用途,否则后果自负! Linux 1.Linux介绍 Linux是类Unix计算机操作系统的统称. Linux操作系统的内核的名字也是“Linux”. Linux这个 ...

随机推荐

让自己习惯C++
条款1.C++是一个语言联邦过程形式(procedural) 面向对象形式(object-oriented) 函数形式(function) 泛型形式(generic) 元编程形式(metaprogr ...
Python能干啥？
Python之py9 Python之py9-录音自动下载 Python之py9-py9作业检查 Python之py9-py9博客情况获取 Python之py9-微信监控获取mp3_url Python ...
(一)Robot Framework安装
准备工作: Python 2.7 (目前不能良好支持python3) pip 和 setuptools (Python 的套件管理程式,最新版的Python 2.7.16已包含) Robot Fram ...
Highlights in a Journal
** Highlights **** example- b huang, 2016, Design and performance enhancement of a bi-directional co ...
LeetCode（100） Same Tree
题目 Given two binary trees, write a function to check if they are equal or not. Two binary trees are ...
牛客网牛可乐发红包脱单ACM赛 C题区区区间间间
[题解] 我想到了两种解法. 一种是扫描线+线段树+单调栈. 另一种方法是O(n)的,比较巧妙. 考虑每个数在哪些区间可以作为最小数.最长的区间就是它向左右走,直到有数字比它小,这个可以用单调栈维护. ...
DEV Express中Bar Manager的使用
未排版在barManager中可以添加多种元素,如皮肤按钮,复选框等,但是下拉菜单却给出了多个冗余的控件. 遗留问题:怎么设置Bar为大图标,查找是否存在Ribbon控件. Bar 1, ...
JSP表达式语言（EL）
JSP表达式语言(EL)使得访问存储在JavaBean中的数据变得非常简单.JSP EL既可以用来创建算术表达式也可以用来创建逻辑表达式.在JSP EL表达式内可以使用整数型.浮点型.字符串.常量 ...
Coreldraw绘制标准波浪线
Coreldraw中如何绘制标准波浪线? 先画一根直线,单击工具栏中的“互动式工具组”,选择“互动式变形工具”, 再在弹出的属性栏中选择“拉链变形”,在幅度和频率中分别输入波形的波峰到波底的值.波浪 ...
Java并发编程：自己动手写一把可重入锁
关于线程安全的例子,我前面的文章Java并发编程:线程安全和ThreadLocal里面提到了,简而言之就是多个线程在同时访问或修改公共资源的时候,由于不同线程抢占公共资源而导致的结果不确定性,就是在并 ...

HTML的高富帅

HTML的高富帅的更多相关文章

随机推荐

热门专题