HTML小结
作者：xuhongji发布时间：2020-09-14分类：Html浏览：56评论：0
导读：一、HTML网页编程语言。Html之所以能展现出各种各样的效果，是浏览器的功能。HTML(HyperTextMarkupLanguage)就是描述网页长...
一、HTML
- 网页编程语言。Html之所以能展现出各种各样的效果，是浏览器的功能。
- HTML(HyperText Markup Language)就是描述网页长什么样子、有什么内容的一个文本。查看网页的描述内容（HTML）的方式：使用IE浏览器的话，在网页上点击右键，选择“查看源文件”
- B/S(Browser/ Server)：浏览器-服务器，客户端只需要一个浏览器
- C/S(Client/Server)：客户端必须安装对应的软件。比如：QQ、MSN、FoxMail
1 2 DOCTYPE html> 3 <html> 4 5 <head> 6 7 <meta http-equiv="Content-Type" content="text/html; charset=gb2312或utf-8或gbk" /> 8 9 <meta http-equiv="refresh" content="10;URL=http://www.leixuesong.cn" /> 10 11 <title>网页标题title> 12 <meta name="keywords" content="PHP程序员,技术博客,个人博客" /> 13 <meta name="description" content="我的博客记录了Linux学习，PHP开发与编程，Web前端开发，MYSQL学习和教程，NoSQL数据库教程以及个人的人生经历和观点。" /> 14 <link rel="stylesheet" type="text/css" href="main.css?1.1.9" /> 15 <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js?1.1.9">script> 16 head> 17 18 <body> 19 body> 20 html>三、最常用的HTML标签
a、布局标签
- p标签定义文档中的分区或节（pision/section），可以把文档分割为独立的、不同的部分，主要用于布局。
- aside标签的内容可用作文章的侧栏，html5新增标签。
- header标签定义页面的头部（介绍信息），html5新增标签。
- section标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分，html5新增标签。
- footer 标签定义文档或节的页脚，通常包含文档的作者、版权信息、使用条款链接、联系信息等等，html5新增标签。
- article标签规定文章独立的其他内容，比如：标题、内容、评论，html5新增标签。
b、文本标签
- h1-h6标签可定义标题（h1最大，h6最小）
- p标签定义段落
- b/strong标签加粗
- em标签来表示强调的文本，斜体
- strong标签表示重要文本
- u标签下划线
- s标签删除线
- br标签表示回车换行
- hr标签表示水平线
- span标签被用来组合文档中的行内元素。
- blockquote标签表示块引用
- pre标签可定义预格式化的文本，保持原有格式的一种标签。
- sub标签下标，
- sup>标签上标
- 表示一个空格
- ©表示版权符
- <表示<
- >表示>
c、a标签定义超链接
- 指定页面间的跳转，链接可以指向外部链接或者页面内部id锚点，可以在当前页面打开，新开窗口。
<a href="指向的链接地址或者网址#ID名" target="_blank|_self|_top|_parent">百度a>
- 超级链接
<a href="http://www.yahoo.com" target="_self" title="去美国雅虎">雅虎a>
- 图片超链接
<a href="http://www.microsoft.com"><imgborder="0" src="1.jpg"/>a>
- 相对URL
相对URL表示相对于当前文档的资源;
“/”表示网站根目录，“../”表示父目录;
“../../”表示父目录的父目录，“./”或者不写任何斜线表示相对于当前路径的目录
站内引用最好用相对URL，这样域名改变了、目录改变了都不受影响。<img src="../images/csharp1.jpg" /> <img src="/images/csharp1.jpg" />
- 将的target属性设定为"_blank"就可以在新窗口中打开超链接。
国情：国内的网站很多都是默认在新窗口中打开。target的取值范围：
_blank :在新窗口中打开
_self :在自己的窗口中打开
_parent :父窗口中打开
_top :表示在顶级窗口打开
框架名称：在指定框架中打开。 - 锚记：用name属性为 起名字：这里是最后。这样可以通过转到平台来跳转到超链接的部分。
d、多媒体标签
- img标签主要在网页中插入图像，可以定义图片替换文本、显示宽度和高度、是否带边框，建议等比例设置，否则图像会变形。
注意图片是链接的，不是插入的，所以如果src指向的文件不存在了，就看不了了。alt属性为图片无法显示时的显示文本，鼠标方式去也会有悬浮提示“点击查看大图”；title用来显示当鼠标放到图片上时显示的文字；border属性指定边框，border="0"不显示边框；width、height属性指定图片的显示大小，如果不指定则是图片的原始大小。
-
<img src="图片地址" alt="替换文本，图片打不开的时候显示" width="图片宽度" height="高度" border="0" />
- audio标签定义声音，比如音乐或其他音频流。html5新增标签。
<audio src="someaudio.wav">您的浏览器不支持 audio 标签。audio>
- video标签定义视频，比如电影片段或其他视频流。html5新增标签。
<video src="movie.ogg" controls="controls">您的浏览器不支持 video 标签。video>
e、序列化标签
- ul和li无序列表标签。
<ul> <li>HTMLli> <li>JSli> <li>PHPli> ul>
- ol和li有序列表标签，可以使用type属性规定有序列表符号的类型。1 按数字有序排列，为默认值，（1、2、3、4）；a 按小写字母有序排列，（a、b、c、d）；A 按字母大写有序排列，（A、B、C、D）。i 按小写罗马字母有序，（i, ii, iii, iv）；I 按小写罗马字母有序，（I, II, III, IV）。
<ol> <li>HTMLli> <li>JSli> <li>PHPli> ol>
- dl标签定义了定义列表（definition list），dl标签用于结合 dt（定义列表中的项目）和 dd（描述列表中的项目）。
<a href="指向的链接地址或者网址#ID名" target="_blank|_self|_top|_parent">百度a>0
f、表格标签
为表格，在内部通过
创建行， 内部通过 创建单元格。可以将table的border属性设为0来隐藏表格线。 - cellpadding内容和表格边线之间的距离
- cellspacing单元格之间的间距。
- rowspan(跨行)、colspan（跨列）进行单元格的合并
,是td的属性。 <a href="指向的链接地址或者网址#ID名" target="_blank|_self|_top|_parent">百度a>1
g、表单标签
- form标签定义提交方式、提交地址、表单字符集以及如何对其进行编码，需要提交的表单一定要放在form标签内。
<a href="指向的链接地址或者网址#ID名" target="_blank|_self|_top|_parent">百度a>2
- input标签用于搜集用户信息
<a href="指向的链接地址或者网址#ID名" target="_blank|_self|_top|_parent">百度a>3
注：checked=”checked”可以简写成checked
-
label标签为input元素定义标注，如果您点击label元素文本，就会触发此input控件。
-
textarea标签，设置文本区内的可见行数和宽度
禁止拉伸属性：style="resize:none"
-
<a href="指向的链接地址或者网址#ID名" target="_blank|_self|_top|_parent">百度a>4
- button标签定义一个按钮
<a href="指向的链接地址或者网址#ID名" target="_blank|_self|_top|_parent">百度a>5
- select标签和option标签下拉列表
<a href="指向的链接地址或者网址#ID名" target="_blank|_self|_top|_parent">百度a>6
注:selected=”selected”可简写成selected，表示选中
- HTML标签和属性是不区分大小写的，建议HTML标签和属性都小写，属性值必须用双引号包围。
- HTML标签都是以开始标签起始，以结束标签终止。大部分HTML标签都是成对出现的，称为双标签，比如：p标签、p标签，也有的HTML标签在开始标签中结束的标签，称为单标签，比如：hr标签、br标签。大多数 HTML 元素可拥有属性，文本内容都是写在开始标签与结束标签之间。
- HTML标签之间尽量缩进与换行，每行代码不要过长，方便阅读和维护。
- HTML标签使用必须符合标签嵌套规则。禁止a标签嵌套a标签，p标签嵌套p标签。
- 建议不使用HTML已经废弃的或者不赞成使用的标签，少使用table布局、iframe框架嵌套以及flash播放器。
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 6 <title>Examplestitle> 7 <meta name="description" content=""> 8 <meta name="keywords" content=""> 9 <link href="" rel="stylesheet"> 10 head> 11 <body> 12 <form method="POST" action="1.php" enctype="multipart/form-data"> 13 <table border="1" bordercolor="#F4F4F4" width="560" align="center" cellpadding="5" rules="all"> 14 <caption>个人中心caption> 15 <tr bgcolor="#F9F9F9"> 16 <td colspan="3"><b>1.会员登录名和密码b>td> 17 tr> 18 <tr> 19 <td align="right">用户名：td> 20 <td><input type="text" name="username" maxlength="15" disabled="disabled" value="Admin">td> 21 <td><input type="submit" value="检测用户名"><font color="#0E9EFF" size="1"> 5-15位font>td> 22 tr> 23 <tr> 24 <td align="right">密码：td> 25 <td><input type="password" name="password" maxlength="15">td> 26 <td><font color="#0E9EFF" size="1"> 密码5-15位font>td> 27 tr> 28 <tr> 29 <td align="right">确认密码：td> 30 <td><input type="password" name="repassword" maxlength="15">td> 31 <td><font color="#0E9EFF" size="1"> 必须与密码一致font>td> 32 tr> 33 <tr bgcolor="#F9F9F9"> 34 <td colspan="3"><b>2.基本信息b>td> 35 tr> 36 <tr> 37 <td align="right">性别：td> 38 <td><input type="radio" name="sex" value="man" checked="checked">男<input type="radio" name="sex" value="woman">女td> 39 tr> 40 <tr> 41 <td align="right">爱好：td> 42 <td> 43 <input type="checkbox" name="like[]" value="游戏" checked="checked" />游戏 44 <input type="checkbox" name="like[]" value="杀人" />杀人 45 <input type="checkbox" name="like[]" value="放火" />放火 46 <input type="checkbox" name="like[]" value="看书" />看书<br> 52 td> 53 <td>td> 54 tr> 55 <tr> 56 <td align="right">学历：td> 57 <td> 58 <select name="edu"> 59 <option value="小学">小学option> 60 <option value="初中">初中option> 61 <option value="高中">高中option> 62 <option value="大学" selected="selected">大学option> 63 <option value="研究生">研究生option> 64 select> 65 td> 66 <td>td> 67 tr> 68 <tr bgcolor="#F9F9F9"> 69 <td colspan="3"><b>3.自我介绍b>td> 70 tr> 71 <tr> 72 <td algi="right">个性签名：td> 73 <td><textarea name="qianming" cols="40" rows="10" style="resize:none" >textarea>td> 74 <td>td> 75 tr> 76 <tr> 77 <td align="right">上传头像：td> 78 <td> 79 <input type="file" name="touxiang"> 80 <input type="hidden" name="uid" value="90"> 81 td> 82 <td>td> 83 tr> 84 <tr> 85 <td colspan="3" align
- 上一篇：CSS网页布局错位:CSS宽度计算
- 下一篇：SublimeText—自带快捷键介绍
相关推荐
欢迎 你 发表评论:
- Html排行
- 标签列表
- 网站分类
- 最近发表
- 欢迎访问我的博客
- IP：127.0.0.1
- 地址：本地
- 系统：Windows10
- 浏览器：Chrome47