Web前台页面设计应用基础-html

Web前台

*与用户进行交互,呈现视觉效果,收集用户信息
*B/S结构:浏览器(Chrome,Firefox),服务器

web前台:html,css,javascript

HTML

-提供内容
-通过标签/标记来设置页面上的内容
-语法格式
单标签:由一个标签组成。例如<hr />
双标签:由“开始标签”和“结束标签”两部分构成。例如<p></p>
-把标签按功能分类
1.文档标签
2.图像标签
3.表单标签
4.超链接标签

CSS

JavaScript

HTML应用

注释的使用
例:快捷键:Ctrl+/

语法

格式标记

语法不分大小写

换行;
<p>换段落标记;
<center>让标记居中;
<li>列表项目标签每个列表使用一个<li>标签;
<ui>声明无序号列表;


加一条水平分割线;
<div>分区显示标记,相当于盒子可以嵌套使用;
<ol>声明有序号列表;
&nbsp空格;
&copy版权号;
&reg注册商标;

文档标记

<h>字体大小;
<b>字体变粗;
<i>斜体;
文字下标字体标记;
文字上标字体标记;
<strong>语义标签表示强调字体变粗;

超链接标记

格式<a href= " " target="打开方式" name="页面锚点名称">链接文字或者图片</a>
例:<a href="http://www.baidu.com">化学</a>;
target属性:定义超链接的打开方式
target+值(_seif,black,_parent,_top)
值:
1.默认值,在当前窗口中打开链接;
2.在一个新窗口中打开链接;
3.在父窗口中打开页面(框架中使用较多)
4.在顶层窗口中打开文件(框架中使用较多);
name锚点的含义是所谓的回到顶点的形式

图像标记

格式:<img src="路径/文件名.图片格式" width="属性值" height="属性值" border="" alt="属性值">
alt:当网页上的图片被加载完成后,鼠标移动到上面去,会显示这个图片指定的属性文字。
如果图像没有下载或者加载失败,会用文字来代替图像显示。
搜索引擎可以通过这个属性的文字来抓取图片。

注意:<img>为单标记,不需要用</img>闭合。

在加载图像文件的时候,文件的路径或者文件名文件格式错误,将无法加载图片。

表单标记

form;<input>;botton;<select>;<textarea>.

form标记

<form action= "服务器端地址" name="表单名称" method="post get">....</form>
例:<form action="#" method="post">...</form>

input(单标签)

放在form内部,用来收集用户输入的。
例:创建各种用户输入框
<input type="text">
*单行文本框:
type="password"(表示一个密码输入域)
type="text"(表示一个文本输入域)
*按钮
type="submit"提交按钮到服务器
type="reset"重置按钮成默认值
type="button"普通按钮没有数据提交功能
*单选框和复选框
单选框:
例:<input type="radio">男<input type="radio">女
成组才能组成单选
复选框:
<input type="checkbox">...<input type="checkbox">....<input type="checkbox">...<input type="checkbox">
*隐藏域:
<input type="hidden">为隐藏表单域
<input type="date">定义date控件
<input type="color">定义拾色器
<input type="e-mail">定义e-mail地址控件
*placeholder属性:显示灰色显示,有输入时消失,消除后再显示。
*name属性:只有设置name属性的表单元素才能在提交表单时传递他们的值。
*value属性:
对于button,reset,submit类型,指定义按钮上的文本
对于text,password,hidden类型,指定义输入字段初始(默认)值
对于CheckBox,radio,image类型,指定义与input元素相关的值,当提交表单时该值会发送到表单的action URL。
form标记是括所有输入的input的
required属性:必须输入项,表单提交时会自动检查
autofocus属性:刷新页面时自动获取焦点。
size属性:设置控件的长度。
maxlength属性:输入框中最大允许输入的字符数。

botton标记(双标签)

定义一个按钮
注意:清始终为<botton>元素规定type属性。否则会默认提交表单。botton标记当中可以放数据
例:<botton><img src="../test1.png"></botton>

select标记

创建下拉列表
格式:<select name="" size="value">
<option value="value" >选项1</option>
<option value="value" >选项2</option>
<option value="value" >选项3</option>
</select>
*selected属性:指定默认的选项。

<textarea>标记

多行文本框,能够输入多行文本的区域
格式:<textarea name="name" rows="value" cols="value" value="value">.....<texearea>
rows和cols属性分别用来指定,现实的行数和列数,单位是字符个数。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,923评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,154评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,775评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,960评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,976评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,972评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,893评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,709评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,159评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,400评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,552评论 1 346
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,265评论 5 341
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,876评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,528评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,701评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,552评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,451评论 2 352

推荐阅读更多精彩内容

  • 第一章 1、使用浏览器去访问的程序,叫网页 2、web代码存放在服务器 代码分为两种:① 运行在浏览器端:前端代...
    fastwe阅读 3,402评论 0 2
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,237评论 1 41
  • 学习HTML的最佳网站没有之一http://www.w3school.com.cn/html/ 关于HTML/HT...
    Amyyy_阅读 2,067评论 0 16
  • 一,HTML语言的一般语法: 1,围堵标记:<>… 1)带属性的标记: … 2)无属性的标记:加粗 居中 标题 2...
    清水易蓝阅读 1,264评论 0 2
  • Mr.Keshe以大无畏的精神,探究宇宙真理的勇气与拯救众生的心怀不遗余力推广自由能,向人类解释自然、宇宙的基本知...
    阿若蘭阅读 2,573评论 0 0