HTML入门笔记-初识HTML_html/css_WEB-ITnose
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了HTML入门笔记-初识HTML_html/css_WEB-ITnose,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含16828字,纯文字阅读大概需要25分钟。
内容图文
本人在慕课网学习HTML+CSS基础课程,记录一些文字,方便自己回忆,也希望对大家有所帮助基础框架
标题标签 了不起的盖茨比
《了不起的盖茨比》为那个奢靡年代的缩影。盖茨比怀揣着对"美国梦"的期翼,投身到那个年代的灯红酒绿之中,却在名利场中看尽世态炎凉,以及浮华背后一切终将逝去的空虚怅惘。1925年《了不起的盖茨比》问世。
了解HTML的代码注释
什么是代码注释?代码注释的作用是帮助程序员标注代码的用途,过一段时间后再看你所编写的代码,就能很快想起这段代码的用途。代码注释不仅方便程序员自己回忆起以前代码的用途,还可以帮助其他程序员很快的读懂你的程序的功能,方便多人合作开发网页代码。
语法:
认识标签
文档的头部描述了文档的各种属性和信息,包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
...
标签在 和 标签之间的文字内容是网页的标题信息,它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么,搜索引擎可以通过网页标题,迅速的判断出网页的主题。每个网页的内容都是不同的,每个网页都应该有一个独一无二的title。例如: hello world 标签的内容“hello world”会在浏览器中的标题栏上显示出来,如下图所示
标签,网页上显示的内容放在这里
在网页上要展示出来的页面内容一定要放在body标签中。如下图是一个新闻文章的网页。
开始学习标签,添加段落
如果想在网页上显示文章,这时就需要
标签了,把文章的段落放到
标签中。
语法:
段落文本
注意一段文字一个
标签,如在一篇新闻文章中有3段文字,就要把这3个段落分别放到3个
标签中。如下图所示。
了解标签,为你的网页添加标题
文章的段落用
标签,那么文章的标题用什么标签呢?在本节我们将使用是最高的等级。
语法:
注意:因为h1标签在网页中比较重要,所以一般h1标签被用在网站名称上。腾讯网站就是这样做的。如:
腾讯网
h1-h6标签的默认样式:标签代码:
在浏览器中显示的样式:
加入强调语气,使用和标签
有了段落又有了标题,现在如果想在一段话中特别强调某几个文字,这时候就可以用到或标签但两者在强调的语气上有区别:
- 表示强调,在浏览器中 默认用斜体表示
- 表示更强烈的强调,在浏览器中用粗体表示。
- 两个标签相比,目前国内前端程序员更喜欢使用表示强调。
在浏览器中默认样式是有区别的:
浏览器中的样子,如下图。
语法:需要强调的文本需要强调的文本
栗子:在网上商城中,某产品的打折后的价格是需要强调的。如下图。
代码实现:
使用标签为文字设置单独样式
语法:文本
我们对、、这三个标签进行一下总结:
和标签是为了强调一段话中的关键字时使用,它们的语义是强调。
标签是没有语义的,它的作用就是为了设置单独的样式用的。
如果现在我们想把上一小节的第一段话“美国梦”三个字设置成blue(蓝色),但注意不是为了强调“美国梦”,而只是想为它设置和其它文字不同的样式(并不想让屏幕阅读器对“美国梦”这三个字加重音读出),所以这样情况下就可以用到标签了。如下面例子:
1922年的春天,一个想要成名名叫尼克?卡拉威(托比?马奎尔Tobey Maguire 饰)的作家,离开了美国中西部,来到了纽约。那是一个道德感渐失,爵士乐流行,走私为王,股票飞涨的时代。为了追寻他的美国梦,他搬入纽约附近一海湾居住。
我们如果想设置“美国梦”三个字设置成blue(蓝色),只需要在
上述代码是用 css 样式代码,为th,td单元格添加粗细为一个像素的黑色边框。
结果窗口显示出结果样式:
caption标签,为表格添加标题和摘要
表格还是需要添加一些标签进行优化,可以添加标题和摘要。代码如下
摘要 摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化),使搜索引擎更好的读懂表格内容,还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。语法:
… | … | …
初识标签
使用标签,链接到另一个页面
使用标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这个标签。
语法 :链接显示的文本
例如:click here!
上面例子作用是单击click here!文字,网页链接到http://www.zhaolion.com这个网页。
title属性的作用,鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大,主要方便搜索引擎了解链接地址的内容(语义化更友好)提醒还有一个有趣的现象不知道小伙伴们发现了没有,只要为文本加入a标签后,文字的颜色就会自动变为蓝色(被点击过的文本颜色为紫色),颜色很难看吧,不过没有关系后面我们学习了css样子就可以设置过来(a{color:#000}),后面会详细讲解。
在新建浏览器窗口中打开链接
标签在默认情况下,链接的网页是在当前浏览器窗口中打开,有时我们需要在新的浏览器窗口中打开。只需要添加一个属性 target="_blank"如下代码:click here!
使用mailto在网页中链接Email地址
标签还有一个作用是可以链接Email地址,使用mailto能让访问者便捷向网站管理者发送电子邮件。我们还可以利用mailto做许多其它事情。下面一一进行讲解,请看详细图示:
提醒:如果mailto后面同时有多个参数的话,第一个参数必须以“?”开头,后面的参数每一个都以“&”分隔。下面是一个完整的实例: 在浏览器中显示的一个发送按钮
点击链接会打开电子邮件应用,并自动填写收件人等设置好的信息,如下图:
认识标签,为网页插入图片
在网页的制作中为使网页炫丽美观,肯定是缺少不了图片,可以使用标签来插入图片。语法: [站外图片上传中……(48)]
举例:
讲解:
src:标识图像的位置;
alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;
title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);
图像可以是GIF,PNG,JPEG格式的图像文件。
认识表单
使用表单标签,与用户交互
网站怎样与用户进行交互?答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。
语法: 结束。
action :浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
method : 数据传送的方式(get/post)。
注意
所有表单控件(文本框、文本域、按钮、单选框、复选框等)都必须放在标签之间(否则用户输入的信息可提交不到服务器上哦!)。
method:post/get的区别这一部分内容属于后端程序员考虑的问题。感兴趣的小伙伴可以问谷哥
文本输入框、密码输入框
当用户要在表单中键入字母、数字等内容时,就会用到文本输入框。文本框也可以转化为密码输入框。
语法:
type:
- 当type="text"时,输入框为文本输入框;
- 当type="password"时, 输入框为密码输入框。
name:为文本框命名,以备后台程序ASP 、PHP使用。
value:为文本输入框设置默认值。(一般起到提示作用)
举例:
在浏览器中显示的结果:
文本域,支持多行文本输入
当用户需要在表单中输入大段文字时,需要用到文本输入域。
语法:
cols :多行输入域的列数。
rows :多行输入域的行数。
在
标签之间可以输入默认值。
举例:
在浏览器中显示结果:
使用单选框、复选框,让用户选择
在使用表单设计调查表时,为了减少用户的操作,使用选择框是一个好主意,html中有两种选择框,即单选框和复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中用户可以任意选择多项,甚至全选。请看下面的例子:语法:
type:
当 type="radio" 时,控件为单选框
当 type="checkbox" 时,控件为复选框
value:提交数据到服务器的值(后台程序PHP使用)
name:为控件命名,以备后台程序 ASP、PHP 使用
checked:当设置 checked="checked" 时,该选项被默认选中
如下面代码:
在浏览器中显示的结果:
注意:同一组的单选按钮,name 取值一定要一致,比如上面例子为同一个名称“radioLove”,这样同一组的单选按钮才可以起到单选的作用。
使用下拉列表框,节省空间
下拉列表在网页中也常会用到,它可以有效的节省网页空间。既可以单选、又可以多选。如下代码:
讲解:
- value:
- selected="selected":设置selected="selected"属性,则该选项就被默认选中。
使用下拉列表框进行多选
下拉列表也可以进行多选操作,在
在浏览器中显示的结果:
使用提交按钮,提交数据
在表单中有两种按钮可以使用,分别为:提交按钮、重置。这一小节讲解提交按钮:当用户需要提交表单信息到服务器时,需要用到提交按钮。语法:
- type:只有当type值设置为submit时,按钮才有提交作用
- value:按钮上显示的文字
举例:
在浏览器中显示的结果:
使用重置按钮,重置表单信息
当用户需要重置表单信息到初始时的状态时,比如用户输入“用户名”后,发现书写有误,可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为"reset"就可以。语法:
- type:只有当type值设置为reset时,按钮才有重置作用
- value:按钮上显示的文字
举例:
在浏览器中显示的结果:输入账号
单击重置按钮
form表单中的label标签
小伙伴们,你们在前面学习表单各种控件的时候,有没有发现一个标签--label,这一小节就来揭晓它的作用。label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。语法:
html代码热搜
- 关于type="file"的input框样式修改小结
- HTMLcellpadding与cellspacing属性图文详解
- 详解HTML编程的标记与文档结构
- 用DIV遮罩解决鼠标直接勾选checkbox无效的问题
- 在网页上调用桌面exe程序的简单方法
- html借助marquee实现文字左右滚动
- 关于分割线hr在各浏览器中的差异
- a标签的target链接指向iframe的方法
- 使用overflow:hidden来禁用页面滚动条
- 使用SWFObject完美解决HTML插入Flash的各浏览器兼容性方案
- 如何使用图片按钮作为重置(reset)表单按钮
- 超链接的宽度和高度直接设置不起作用的解决方法
- textarea的disabled与readonly属性具体用法介绍
- 空格在Html中如何表示( 有什么含义)
- 在js或css后加?v=版本号不让浏览器缓存
- 块级元素和内联元素及可变元素汇总
- HTML的结束标签问题与w3c标准
- iframe框架在IE浏览器下将白色背景设为透明色
- AdobeBrackets简单使用图文教程
- 如何去除表单的回车即提交即回车!=提交
- Readonly和Disabled之间的微小区别详解
- 如何设置select只读不可编辑且select的值可传递
- html中radio值的获取、赋值、注册事件示例详解
- textarea标签大小不可变不能通过鼠标拖动的方式来拖动
- HTML中select标签单选多选用法详解
内容总结
以上是互联网集市为您收集整理的HTML入门笔记-初识HTML_html/css_WEB-ITnose全部内容,希望文章能够帮你解决HTML入门笔记-初识HTML_html/css_WEB-ITnose所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
【HTML入门笔记-初识HTML_html/css_WEB-ITnose】教程文章相关的互联网学习教程文章
HTML入门学习笔记【代码】【图】
1. 用html写一个登录界面代码:<!doctype html> <html><body><table align="center" border="1"width="600px"><tr><td><h2> <p align="center"><b>登录</b></p> </h2> <hr /><form action="/index" method="post" ><input type="hidden" value="隐藏信息" ><div>姓名</div><div><input type="text"> </div><div>密码</div><div><input type="password"> </div><a href="http://www.baidu.com">注册</a><a href="http://www.baidu.c...
html、css入门笔记_002
3. 深入了解网站开发? UI设计师 : 设计稿 web前端开发工程师(H5开发) 设计稿 -> 代码 数据库里的数据 -> 显示到页面 HTML + CSS HTML : 结构 CSS : 样式 web后端开发工程师4. web三大核心技术? HTML CSS JavaScript5. HTML基本结构和属性? HTML : 超文本 标记 语言 超文本 : 文本内容 + 非文本内容 ( 图片、视频、音频等 ) 标记 : <单词> 语言 : 编...
「HTML+CSS」零基础入门精英课03【图】
form表单必须有数据名和值 input里的type/name/value/checkbox/radio <select name="province"> <option >北京</option> <option >天津</option> <option >京都</option> </select> <br> <button type="submit" >提交</button> <br> </form> 结构样式行为相分离css 行间样式,页面级引入,外部引入 256进制 原文:https://www.cn...
HTML与CSS入门——第#8;五章 #8;使用文本块和列表【代码】
知识点: 1.在页面上对齐文本的方法 2.三种HTML列表的使用方法 3.在列表中放置列表的方法5.1 在页面上对齐文本: 父元素内子元素文本的居中:在控制父元素的text-align:center 子元素相对于父元素的居中:在控制子元素的margin:0 auto; PS:div指的是division(分组)。5.2 三种HTML列表: <ol>...<li>:有序列表,整列表有缩进,每个列表项前有数字或者字母 <ul>...<li>:无序列表,与有序列表不一样的是列...
HTML 5入门知识(三)【图】
<canvas>标签在网页中使用canvas元素,像使用其他HTML标签一样简单,然后利用JavaScript脚本调用绘图API,绘制各种图形。canvas拥有多种绘制路径、矩形、圆形、字符及添加图形的方法。 利用<canvas>标签绘图基本流程1、获取canvas对象2、创建二维的绘图上下文对象3、在canvas上绘制文字链接:https://cruxf.github.io/canvas1/text.html 绘制基本的图形绘制直线:moveTo()方法用于创建新的子路径,并设置其起始点。lineTo(...
HTML的正确入门姿势——基本结构与基本标签【代码】
一、什么是HTML HTML是超文本标签语言,即网页的源码。而浏览器就是翻译解释HTML源码的工具。二、HTML文档的结构 HTML文档主要包括三大部分:文档声明部分、<head>头部部分、<body>主体部分。<!DOCTYPE html><html><head><meta charset="UTF-8"><title>我的第一个网页</title></head><body></body></html><!-- ↑文档类型声明:让浏览器按照html5的标准对代码进行解释与执行。 ↑文档类型声明必不可少,而且,必须放在文档最...
html 5 canvas入门函数简介
1.画布标签 <canvas id="myCanvas" width=450 height=300 margin-top =0px;margin-left=0px style="border:1px solid #c3c3c3;"> 上例画出画布,并设置其大小和边框风格,对齐方式,与普通标签属性基本相同,不做详细介绍。 2.在canvas画布上作画,需要用javascript函数对其进行控制,使用以下语句获得API接口实例,对画布进行操作:var canvas = document.getElementById("myCanvas");var context = canvas.getContext("...
关于Markdown入门语法及html的对照
内容简介-标题 -段落 -删除字 -斜体字 -粗体字 -粗斜体 -分割线 -照片 -分隔线 -引用块 -有序列表 -无序列表 -无序列表 -嵌套列表 -直链链接 -带标题的链接 -普通链接 -行内代码 -代码块 -图片 -表格 -对齐方式标题#标题段落文章末尾添加两个空格来换行隔一行的段落删除字体两个~~包裹斜体字一个*包裹粗体字两个*号包裹粗斜体字三个*号包裹分割线三个-号独占一行期间可用空格隔开一级引用后面接空格引用多层嵌套有序列表序号X.后面...
HTML 入门第一课【图】
HTML 简单认识HTML(HyperText Markup Language)即超文本标记语言,是一种用来制作超文本文档的简单标记语言,也是制作网页的最基本的语言,它可以直接由浏览器执行。1.HTML 是用来描述网页的一种语言。2.HTML 指的是超文本标记语言: HyperText Markup Language3.HTML 不是一种编程语言,而是一种标记语言4.标记语言是一套标记标签 (markup tag)5.HTML 使用标记标签来描述网页6.HTML 文档包含了HTML 标签及文本内容7.HTML文档也叫...
新编html网页设计从入门到精通 (龙马工作室) pdf扫描版?【图】
新编html网页设计从入门到精通共分为21章,全面系统地讲解了html的发展历史及4.0版的新特性、基本概念、设计原则、文件结构、文件属性标记、用格式标记进行页面排版、使用图像装饰页面、超链接的使用、使用表格组织页面、使用多媒体美化页面、创建多框架页面、动态网页的制作、使用层叠样式表(css)美化页面、javascript语言、数组和字符串以及表达式与程序的流程控制等内容。本书适合作为培训学校的教材,也可供想要把网页做得更好...
HTML入门基础【代码】【图】
一、标签概述1.HTML(英文Hyper Text Markup Language的缩写)中文译为“超文本标签语言”,主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。2.标签分为嵌套关系与并列关系。嵌套关系:<head><title></title> <head>并列关系:<head></head> <body></body>二、基本标签1.html标签:作为整个html中所有标签的一个根节点。2.head标签:用于存放title,meta,base,style,link,script等标签。2.title标签:放到head中...
新手入门html 表格 表单 超链接 图片
超链接标签 <a></a>A里面的html属性 href=”所要跳转到的目标连接”<a href=”http:是必须加的”></a>特点:超链接默认样式是蓝色点击之后是紫色并且带有下划线target=” ”target属性值:-self 在当前窗口打开-blank 在新的窗口打开title=” ”提示信息(大部分标签都能添加title属性只能是文本)扩展:1,空连接 <a href=”#”></a>2,用a模拟按钮(不让a跳转)<a href=””javascript:;></a>3,rel=”nofollow” 禁止传递权重||...
HTML入门笔记
1.开发准备开发工具intellij IDEAWebStormeclipsedreamweavernotepad++参考文档w3c:http://www.w3school.com.cn/2.HTML语法标签名、属性不区分大小写。HTML实体字符空格: <:<>:>&:&":&quo1.跨平台HTML主体结构<html><head><title>该标签必须存在</title><base href="URL" target="" /><!--指定页面的基url(必须位于head标签中,数量至多为一)--><link /><!--用于外部层叠样式表的定位--></head><body><!--body标...
JavaScript 入门教程二 在HTML中使用 JavaScript
一、使用 <script> 元素的方式有两种:直接在页面中嵌入 JavaScript 代码和引用外部 JavaScript 文件。二、使用内嵌方式,一般写法为: <script type="text/javascript"> /* code */</script>三、引用外部 JavaScript 文件的一般写法为: <script type="text/javascript" src=""></script> (注意不应在 <script>和</script> 标签中间再添加额外的 JavaScript 代码。如果包含,会被忽略。)四、内嵌与外部引用的方...
前端入门之HTML
html是什么?超文本标记语言(Hypertext Markup Language,HTML)通过标签语言来标记要显示的网页中的各个部分。一套规则,浏览器认识的规则浏览器按顺序渲染网页文件,然后根据标记符解释和显示内容。但需要注意的是,对于不同的浏览器,对同一标签可能会又不完全相同的解释(兼容性)静态网页文件扩展名:html或.htmhtml不是什么?html不是一种编程语言,而是一种标记语言(markup language)html使用标记标签来描述网页html的组成结...