HTML小总结

一、html思想

(一)经过几天的学习认为HTML重要的还是学会分析框架模块,可以用一些专用标签例如<nav>、<dl>、<section>等有意义的标签对整体结构进行划分。不要一昧的使用<div>、<span>标签来写所有模块。
(二) 在写一些模块化的东西时要考虑好怎么样分开会易于书写css代码。

二、html的一些简介与标签详解

body:在网页上要展示出来的页面内容一定要放在body标签中
p:如果想在网页上显示文章,这时就需要p标签了,把文章的段落放到p标签中。标签的默认样式,段前段后都会有空白,如果不喜欢这个空白,可以用css样式来删除或改变它。

hx:标题标签一共有6个,h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。h1是最高的等级。

strong em:标签是为了强调一段话中的关键字时使用,它们的语义是强调。但两者在强调的语气上有区别:em 表示强调,strong 表示更强烈的强调。并且在浏览器中em 默认用斜体表示,strong 用粗体表示。两个标签相比,目前国内前端程序员更喜欢使用strong表示强调。

span:标签是没有语义的,它的作用就是为了设置单独的样式用的。

q:标签是对简短文本的引用,比如说引用一句话就用到q标签。用q标签的真正关键点不是它的默认样式双引号(如果这样我们不如自己在键盘上输入双引号就行了),而是它的语义:引用别人的话。

blockquote:blockquote的作用也是引用别人的文本。但它是对长文本的引用,如在文章中引入大段某知名作家的文字,这时需要这个标签。浏览器对
标签的解析是缩进样式。

br:在需要加回车换行的地方加入br /,br /标签作用相当于word文档中的回车。在 html 代码中输入回车、空格都是没有作用的。在html文本中想输入回车换行,就必须输入br /。没有HTML内容的标签就是空标签,空标签只需要写一个开始标签,这样的标签有br /、hr /和img /。
:在html代码中输入空格、回车都是没有作用的。要想输入空格,必须写入nbsp;。

hr:在信息展示时,有时会需要加一些用于分隔的横线,这样会使文章看起来整齐些。

address:一般网页中会有一些网站的联系地址信息需要在网页中展示出来,这些联系地址信息如公司的地址就可以
标签。也可以定义一个地址(比如电子邮件地址)、签名或者文档的作者身份。

code:在介绍语言技术的网站中,避免不了在网页中显示一些计算机专业的编程代码,当代码为一行代码时,你就可以使用code标签了.如果是多行代码,可以使用pre标签。

pre:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。pre 标签不只是为显示计算机的源代码时用的,在你需要在网页中预显示格式时都可以使用它,只是pre标签的一个常见应用就是用来展示计算机的源代码。

ul:ul-li是没有前后顺序的信息列表。每项li前都自带一个圆点

ol:在网页中展示有前后顺序的信息列表,这类信息展示就可以使用ol标签来制作有序列表来展示。每项li前都自带一个序号,序号默认从1开始.

div:在网页制作过程过中,可以把一些独立的逻辑部分划分出来,放在一个div标签中,这个div标签的作用就相当于一个容器。什么是逻辑部分?它是页面上相互关联的一组元素。如网页中的独立的栏目版块,就是一个典型的逻辑部分。用id属性来为div提供唯一的名称,必须唯一.

表格

table:table…/table:整个表格以table标记开始、/table标记结束。
tbody:tbody…/tbody:当表格内容非常多时,表格会下载一点显示一点,但如果加上tbody标签后,这个表格就要等表格内容全部下载完才会显示。
tr:tr…/tr:表格的一行,所以有几对tr表格就有几行。表格中列的个数,取决于一行中数据单元格的个数。
td:td…/td:表格的一个单元格,一行中包含几对td…/td,说明一行中就有几列。
th:th…/th:表格的头部的一个单元格,表格表头。表头,也就是th标签中的文本默认为粗体并且居中显示
caption:添加标题和摘要,标题用以描述表格内容,标题的显示位置:表格上方。摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化),使搜索引擎更好的读懂表格内容
a:实现超链接 a href=”目标网址” title=”鼠标滑过显示的文本” 链接显示的文本 /a .title属性的作用,鼠标滑过链接文字时会显示这个属性的文本内容。主要方便搜索引擎了解链接地址的内容(语义化更友好) a href=”目标网址” target=”_blank” click here! /a在新的网页中打开
mailto:使用mailto能让访问者便捷向网站管理者发送电子邮件,如果mailto后面同时有多个参数的话,第一个参数必须以“?”开头,后面的参数每一个都以“&”分隔。
img:插入图片,img src=”图片地址” alt=”下载失败时的替换文本” title = “提示文本” src:标识图像的位置;alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);图像可以是GIF,PNG,JPEG格式的图像文件。

表单

form:可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。form method=”传送方式” action=”服务器文件” . form标签是成对出现的,以form开始,以/form结束。action :浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。method : 数据传送的方式(get/post)。所有表单控件(文本框、文本域、按钮、单选框、复选框等)都必须放在标签之间
<form method="传送方式" action="服务器文件">
input:当用户要在表单中键入字母、数字等内容时,就会用到文本输入框。文本框也可以转化为密码输入框。input type=”text/password” name=”名称” value=”文本” / 当type=”text”时,输入框为文本输入框;当type=”password”时, 输入框为密码输入框。name:为文本框命名,以备后台程序ASP 、PHP使用。value:为文本输入框设置默认值。(一般起到提示作用)
<form>
<input type="text/password" name="名称" value="文本" />
</form>
textarea:当用户需要在表单中输入大段文字时,需要用到文本输入域。textarea rows=”行数” cols=”列数” 文本 /textarea rows :多行输入域的行数。cols :多行输入域的列数。在textarea /textarea 标签之间可以输入默认值。
<textarea rows="行数" cols="列数">文本</textarea>
radio/checkbox:使用单选框、复选框,让用户选择,input type=”radio/checkbox” value=”值” name=”名称” checked=”checked”/> 当 type=”radio” 时,控件为单选框,当 type=”checkbox” 时,控件为复选框,value:提交数据到服务器的值(后台程序PHP使用),name:为控件命名,以备后台程序 ASP、PHP 使用,checked:当设置 checked=”checked” 时,该选项被默认选中,同一组的单选按钮,name 取值一定要一致,这样同一组的单选按钮才可以起到单选的作用。
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
option:下拉列表框,设置selected=”selected”属性,则该选项就被默认选中。
<select>
<option value="看书">看书</option>
<option value="旅游" selected="selected">旅游</option>
<option value="运动">运动</option>
<option value="购物">购物</option>
</select>
multiple:下拉列表也可以进行多选操作,在标签中设置multiple=”multiple”属性,就可以实现多选功能,在 widows 操作系统下,进行多选时按下Ctrl键同时进行单击
<select multiple="multiple">
submit:使用提交按钮,提交数据,input type=”submit” value=”提交”> type:只有当type值设置为submit时,按钮才有提交作用,value:按钮上显示的文字
<input type="submit" value="提交">
reset:重置按钮,重置表单信息,input type=”reset” value=”重置”>type:只有当type值设置为reset时,按钮才有重置作用,value:按钮上显示的文字
<input type="reset" value="重置">
label:为鼠标用户改进了可用性。当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。label for=”控件id名称”>标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
<label for="控件id名称">

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

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,422评论 1 45
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,728评论 1 92
  • 前端开发面试知识点大纲: HTML&CSS: 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:...
    秀才JaneBook阅读 2,328评论 0 25
  • 概述 在网易云课堂学习李南江老师的《从零玩转HTML5前端+跨平台开发》时,所整理的笔记。笔记内容为根据个人需求所...
    墨荀阅读 2,331评论 0 7
  • 2018.3.20 好久没有练习虚拟历史事件的记忆,生怕忘记了方法,翻阅训练记录,回忆并分析了一下。加入了大量精美...
    世界记忆大师程程阅读 1,274评论 3 4