html basics_html/css_WEB-ITnose-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

html basics_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:05 PM

htmlBase

一、HTML的基本标签
1、html文件的基本结构
a、HTML : Hypertext Markup Language 超文本标记语言

 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5     <title>网页标题</title> 6 </head> 7 <body> 8  主体  9 </body>10 </html>

b.基本结构:头部(head) 主体(body)

c.所有内容都在标签之内

内放的是头部信息，是对页面的描述，不会直接显示在页面中

内的中设置的是页面的标题，只能放在中

是页面的主体，大部分显示内容都定义在这里

 d.编辑工具：记事本、UltraEdit等,开发人员用VisualStudio写html就够了2.块级标签(基本的)  a.标题标签<h1>~<h6>  段落标签<p>   水平线标签<hr />  b.常用于页面布局的块级标签：有序列表<ol>  无序列表<ul>  定义列表<dl>  表格标签<table>  表单标签<form>  分区标签<div>3.行级标签  a.图像标签<img  src="/static/imghwm/default1.png"  data-src="图片地址"  class="lazy"  / alt="html basics_html/css_WEB-ITnose" >   超链接标签<a>   范围标签<span>   换行标签<br />  输入框标签<input />   文本域标签<textarea>  b.常见的图片格式: JPG  GIF  BMP  PNG  C.语法:<img src="/static/imghwm/default1.png"  data-src="图片地址"  class="lazy" alt="图像的替代文字" title="鼠标悬停提示文字"/>

4.常使用如下四种块状结构：  a.Div-ul(ol)-li：用于分类导航或菜单等场合  b.Div-dl-dt-dd：用于图文混编场合  c.Table-tr-td：用于规整数据的显示  d.Form-table-tr-td：用于表单布局的场合5.XHTML1.0的基本规范：  a.标签名和属性名称必须小写  b.HTML标签必须关闭  c.属性值必须用引号括起来  d.标签必须正确嵌套  e.必须添加文档类型声明：

①该声明必须位于HTML文档的第一行

②有三种级别声明：Strict(严格类型) Transitional(过度类型) Frameset(框架类型)

二、HTML的基本标签(二)和表单

1.超链接: (target常用取值:_self(自身窗口)和_blank(新建窗口))

2.超链接的三类应用场合:

a.页面间链接 : A页到B页,用于网站导航

b.锚链接 : A页的甲位置到A页(本页)的乙位置或A页甲位置到B页的乙位置

1 <a href = "#star">[明星专区]</a>2 3 <!-- 链接到同一个网页的特定位置 -->4 <a name = "star"><img src="/static/imghwm/default1.png"  data-src="images/adv.jpg"  class="lazy" alt="明星专区"  title="明星专区">a>

c.功能性链接 : 在页面中调用其他程序功能

1 <!--例:电子邮箱链接,mailto:创建电子邮箱链接-->2 <a href="mailto:guimeiWebMater@gmgw.com">站长信箱</a>

3.HTML注释：

4.html中的特殊符号:

a.空格( ) 大于号(>) 小于号(<) 引呈(") 版权符号(©)

5.表单

a.语法格式:

1     <!--2         1.get  是指将用户填写的信息作为一个字符串连接到地址栏一起提交，连接符用"?"隔开3         2.post 是指将用户填写的信息作为一个数据包提交，数据包是经过编码的4         -->5     <form action="表单提交地址" method="提交方法(1.get  2.post)">6            <!--文本框.按钮等表单元素-->7     </form>

b.表单元素的基本格式:

1  <!--type可用的选项有:text\password\checkbox\radio\submit\reset\file\hidden\image\button-->2 <input name="表单元素名称" type="类型" value="值" size="显示宽度" maxlength="能输入的最大字符长度" checked="是否选中(单选或复选才用)" />

6.表单元素介绍

a.文本框(text)

1    <form action="" method="post">2         <p> 用户名:3             <input type="text" value="张三" size="20" name="userName" />4         </p>5     </form>

b.密码框(password)

1 密码:<input type="password"  name="pass" />

c.重置\提交与普通按钮

1         <input type="submit" value="提交按钮" name="submit" />2         <input type="reset" value="重置按钮" name="reset" />3         <input type="button" value="普通按钮" name="button" />4         <!--图形提交按钮-->5         <input type="image" src=" " />

d.单选按钮(radio)

1         <input type="radio" name="gen" class="input" value="男"/>男2         <input type="radio" name="gen" class="input" value="女"/>女

e.复选框(checkbox)

1     <input type="checkbox" name="hobby1" value="1" />运动2     <input type="checkbox" name="hobby2" value="2" />聊天3     <input type="checkbox" name="hobby3" value="3" />玩游戏

f.文件域(file)

1     <input type="file" name="file" />

g.下拉列表框(select)

1     <!--name:指定列表  value:可选择的值-->2     向往月份：3     <select name="c"> 4         <option value="0" selected="selected">请选择</option>5         <option value="1" >1月</option>6         <option value="2">2月</option>7     </select>

h.多行文本域(textarea)

1     <!--cols:指定多行文本域的列数   rows:指定多行文本域的行数-->2     <textarea name="textarea" cols="40" rows="6">初始文本内容</textarea>

i.隐藏域(hidden)

1     <!--隐藏用户ID信息333-->2     <input type="hidden" name="userid" value="333">

j.只读和禁用属性
只读:readonly="readonly" 禁用: disabled="disabled"

7.结合表单做的简易求职表

 1 <html> 2 <head> 3 <title>简单表单小结</title> 4 </head> 5 <body> 6 <div> 7 <form action="" method="post"> 8 <h3 id="申请表">申请表</h3> 9 <p>10 姓名：<input type="text" name="text" size="20"/> <br />11 密码：<input type="password" name="pass" size="21"/> <br />12 照片：<input type="file" name="files"/><br />13 感兴趣的职位：<br />14 <input type="radio" name="radio" class="input" value="1"/>Web设计15 <input type="radio" name="radio" class="input" value="2"/>Web开发 <br />16 喜欢的月份：<select name="c"> 17 <option value="0">请选择</option>18 <option value="1">1月</option>19 <option value="2">2月</option>20 <option value="3">3月</option>21 <option value="4">4月</option>22 <option value="5">5月</option>23 <option value="6">6月</option>24 <option value="7">7月</option>25 <option value="8">8月</option>26 <option value="9">9月</option>27 </select> <br />28 协议：<br />29 <textarea readonly="readonly" name="textarea" cols="20" rows="4">老鼠爱大米------</textarea> <br />30 <input type="checkbox" name="ckbox"/>我认真阅读并接受以上协议。<br />31 经验：<select name="ca"> 32 <option value="0">无经验</option>33 <option value="1">一年</option>34 <option value="2">三年</option>35 <option value="3">五年</option>36 </select> <br />37   <input disabled="disabled" type="submit" name="button" value=" 提交 "/>38     <input type="reset" name="reset" value=" 重置 "/>39 </p>40 </form>41 </div>42 </body>43 </html>

三.表格的应用和布局

1.表格的基本语法

1     <table>2         <tr>3             <td>第一行第一个单元格的内容</td>4         </tr>5         <tr>6             <td>第二行第一个单元格的内容</td>7         </tr>8     </table>

2.跨行跨列

 1     <!-- 2         合并单元格 1.合并列  colspan = 列数  3                    2.合并行  rowspan = 行数 4             注：只能用在<td>和<th>中 5         --> 6     <table border="1" whdth="100" height = "100"> 7         <tr> 8             <td rowspan="3">合并第一列的一行和二行</td> 9             <td colspan="2">合并第一行的二列和三列</td>10         </tr>11         <tr>12             <td>第二行第一个单元格的内容</td>13             <td>第二行第二个</td>14         </tr>15     </table>

3.表格的高级标签

a.表格标题:

b.表格表头:

c.表格数据的分组标签:页眉

数据主体页脚

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

What is the difference between an HTML tag and an HTML attribute?May 14, 2025 am 12:01 AM

HTMLtagsdefinethestructureofawebpage,whileattributesaddfunctionalityanddetails.1)Tagslike,,andoutlinethecontent'splacement.2)Attributessuchassrc,class,andstyleenhancetagsbyspecifyingimagesources,styling,andmore,improvingfunctionalityandappearance.

The Future of HTML: Evolution and TrendsMay 13, 2025 am 12:01 AM

The future of HTML will develop in a more semantic, functional and modular direction. 1) Semanticization will make the tag describe the content more clearly, improving SEO and barrier-free access. 2) Functionalization will introduce new elements and attributes to meet user needs. 3) Modularity will support component development and improve code reusability.

Why are HTML attributes important for web development?May 12, 2025 am 12:01 AM

HTMLattributesarecrucialinwebdevelopmentforcontrollingbehavior,appearance,andfunctionality.Theyenhanceinteractivity,accessibility,andSEO.Forexample,thesrcattributeintagsimpactsSEO,whileonclickintagsaddsinteractivity.Touseattributeseffectively:1)Usese

What is the purpose of the alt attribute? Why is it important?May 11, 2025 am 12:01 AM

The alt attribute is an important part of the tag in HTML and is used to provide alternative text for images. 1. When the image cannot be loaded, the text in the alt attribute will be displayed to improve the user experience. 2. Screen readers use the alt attribute to help visually impaired users understand the content of the picture. 3. Search engines index text in the alt attribute to improve the SEO ranking of web pages.

HTML, CSS, and JavaScript: Examples and Practical ApplicationsMay 09, 2025 am 12:01 AM

The roles of HTML, CSS and JavaScript in web development are: 1. HTML is used to build web page structure; 2. CSS is used to beautify the appearance of web pages; 3. JavaScript is used to achieve dynamic interaction. Through tags, styles and scripts, these three together build the core functions of modern web pages.

How do you set the lang attribute on the tag? Why is this important?May 08, 2025 am 12:03 AM

Setting the lang attributes of a tag is a key step in optimizing web accessibility and SEO. 1) Set the lang attribute in the tag, such as. 2) In multilingual content, set lang attributes for different language parts, such as. 3) Use language codes that comply with ISO639-1 standards, such as "en", "fr", "zh", etc. Correctly setting the lang attribute can improve the accessibility of web pages and search engine rankings.

What is the purpose of HTML attributes?May 07, 2025 am 12:01 AM

HTMLattributesareessentialforenhancingwebelements'functionalityandappearance.Theyaddinformationtodefinebehavior,appearance,andinteraction,makingwebsitesinteractive,responsive,andvisuallyappealing.Attributeslikesrc,href,class,type,anddisabledtransform

How do you create a list in HTML?May 06, 2025 am 12:01 AM

TocreatealistinHTML,useforunorderedlistsandfororderedlists:1)Forunorderedlists,wrapitemsinanduseforeachitem,renderingasabulletedlist.2)Fororderedlists,useandfornumberedlists,customizablewiththetypeattributefordifferentnumberingstyles.

See all articles