体育生学编程--html学习_html/css_WEB-ITnose-HTML-Tutorial-php.cn

Inhaltsverzeichnis

1、HTML介绍（了解即可）

2、头标签

8、表格

9、表单

10、注释特殊字符

Heim

Web-Frontend

HTML-Tutorial

体育生学编程--html学习_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:49 AM

HTML学习

1、HTML介绍（了解即可）

HTML (Hyper Text Markup Language)：
HTML就是超文本标记语言的简写，是最基础的网页语言

HTML的版本：
2.0（IETF）、3.0（W3C）、4.01（W3C）、5.0（W3C）
IETF： Internet Engineering Task Force
W3C：World Wide Web Consortium

HTML的特点：
是通过标签来定义的语言，代码都是由标签所组成，代码不用区分大小写
由开始，结束
由头部分

和体部分两部分组成
头部分是给HTML页面增加一些辅助或者属性信息，它里面的内容会最先加载
体部分是真正存放页面数据的地方

HTML的标签：
多数标签都是有 开始标签和 结束标签。例如：

段落段落

其中有个别标签因为只有单一功能，或者没有要修饰的内容可以在 标签内结束。例如：换行
分割线

也可以写作

斜线可以不写

HTML标签中的属性：
想要对被标签修饰的内容进行更丰富的操作，就用到了标签中的属性
通过对属性值的改变，增加了更多的效果选择
属性名与属性值之间用“=”连接
属性值可以用双引号、单引号、不用引号，一般都会用双引号（或公司规定书写规范）

2、头标签

<br> 页面的标题 <p class="sycode"> </p> <p class="sycode"> <base> <br> 页面超链接的基本属性 <br> href：页面所有超链接默认从这个路径开始 <br> target：页面所有超链接默认的target </p> <p class="sycode"> <br> </p> <p class="sycode"> <meta> <br> 页面描述信息 <br> <meta name="keywords" content="Java,.Net,Android,iOS"> <strong>蜘蛛爬取时看，搜素引擎SEO有关</strong> <br> <meta http-equiv="content-type" content="text/html; charset=utf-8"> 告知浏览器此页面内容、类型、编码 <br> <meta http-equiv="refresh" content="3;url=http://www.maomao.com">三秒后刷新到某个页面 </p> <p class="sycode"> </p> <h2>3、字体<font></font> </h2> <p class="sycode"> 字体标签<font>： <br> <strong><font size="5" color="red"></font></strong>字体标签示例 <strong></strong></font> <br> 简单颜色可是直接写对应的英文 <br> 复杂颜色用16进制表示，表现形式#FF0000两个数为一组，按红，绿，蓝排列 <br> 如：#FF0000表示红色、#00FF00表示绿色 </p> <p class="sycode"> <br> </p> <p class="sycode"> 标题标签</p> <h1>、<h2> ... <h6>： <br> 标题是文本中常用的内容，为了方便操作而定义的 <br> 其实就是某个字号和粗体的组合 <br> <h2>4、列表<dl> <dt></dt> <dd></dd> </dl> </h2> </h6> </h2> </h1> <p class="sycode"> 无标签： <br> </p> <dl>列表、<dt>标题、</dt> <dd>列表项 <p class="sycode"> 数字标签： <br> </p> <ol>列表、<li>列表项 <br> type属性更改项目符号（a A 1 i I） <br> <p class="sycode"></p> <p class="sycode"> 符号标签： <br> </p> <ul>列表、<li>列表项 <br> type属性更改项目符号（circle空心圆、disc实心圆、square正方形） <p class="sycode"> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre name="code" class="sycode"><span style="font-size:14px;"> <dl> <dt>公司部门</dt> <dd>软件研发部</dd> <dd>财务部</dd> <dd>行政部</dd> <dl> <ol type="i"> <li>软件研发部</li> <li>财务部</li> <li>行政部</li> </ol> <ul type="square"> <li>软件研发部</li> <li>财务部</li> <li>行政部</li> </ul> </dl> </dl></span></pre><div class="contentsignin">Nach dem Login kopieren</div></div> </li> </ul> </li> </ol> 效果图 <p class="sycode"></p> <p class="sycode"> <br> </p> <h2>5、超链接<a></a> </h2> <p class="sycode"> 链接标签<a>： <br> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre name="code" class="sycode"><span style="font-size:14px;"><span style="white-space:pre"> </span> <span style="font-size:18px;"> <a href="http://www.maomao.com" target="_blank">猫猫学编程</a></span></span></pre><div class="contentsignin">Nach dem Login kopieren</div></div> href：要链接的地址 <br> target：显示位置 <br> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre name="code" class="sycode"><span style="font-size:14px;"><span style="white-space:pre"> </span><a name="mark"></a></span></pre><div class="contentsignin">Nach dem Login kopieren</div></div> 在页面的某个位置做出标记 <br> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre name="code" class="sycode"><span style="font-size:14px;"><span style="white-space:pre"> </span><a href="#mark">跳转到标记</a></span></pre><div class="contentsignin">Nach dem Login kopieren</div></div> 点击链接跳转到标记位置 <br> </a></p> <h2>6、图像<image></image> </h2> <p class="sycode"> 图像标签<img src="/static/imghw/default1.png" data-src="1.jpg" class="lazy" alt="体育生学编程--html学习_html/css_WEB-ITnose" >： <br> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre name="code" class="sycode"><span style="font-size:14px;"><span style="white-space:pre"> </span><img src="/static/imghw/default1.png" data-src="1.jpg" class="lazy" align="right" border="3" alt="图片说明文字"> </span></pre><div class="contentsignin">Nach dem Login kopieren</div></div> src: 图片路径 <br> align: 对齐方式 <br> border: 边框粗细 <br> <p class="sycode"> 图像地图<map>： <br> 在<img src="/static/imghw/default1.png" data-src="Sunset.jpg" class="lazy" alt="体育生学编程--html学习_html/css_WEB-ITnose" >标签中使用usemap属性，指定图像可以用作地图 <br> 使用<map>及<area>标签可以把图像的一部分作为超链接 <br> </map></map></p> <p class="sycode"> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre name="code" class="sycode"><span style="font-size:14px;"><span style="white-space:pre"> </span><img src="/static/imghw/default1.png" data-src="Sunset.jpg" class="lazy" alt="图片说明文字" usemap="#Map"> <map name="Map"> <area shape="rect" coords="50,59,116,104" href="1.html"> <area shape="circle" coords="118,203,40" href="2.html"> </map></span></pre><div class="contentsignin">Nach dem Login kopieren</div></div> <br> <h2>7、框架<frameset></frameset> </h2> <p class="sycode"> 框架集合标签</p> <frameset>： <br> <frameset>中可以放入多个<frame>框架，把页面分成几个部分 <br> <frameset>不能放在body中 <br> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre name="code" class="sycode"><span style="font-size:14px;"><frameset rows="20%,*"> <frame src="1.html" name="top"> <frameset cols="20%,*"> <frame src="2.html" name="left"> <frame src="3.html" name="right"> </frameset> </frameset></span></pre><div class="contentsignin">Nach dem Login kopieren</div></div> rows：框架集合每行的高度 <br> cols：框架集合每列的宽度 <br> src：框架中显示的页面 <br> name：框架的名字，可用做超链接的target <p class="sycode"> <br> </p> <p class="sycode"> 内联框架<iframe>： <div class="code" style="position:relative; padding:0px; margin:0px;"><pre name="code" class="sycode"><span style="font-size:14px;"><span style="white-space:pre"> </span><iframe src="1.html">抱歉,您的浏览器无法显示iframe标签</iframe> <iframe src="2.html">抱歉,您的浏览器无法显示iframe标签</iframe></span></pre><div class="contentsignin">Nach dem Login kopieren</div></div> 可以在页面中嵌入另一个页面 <br> src：要嵌入的页面 <br> innerHTML：如果浏览器无法显示iframe，则会显示该文本 <br> </iframe></p> <h2 id="表格">8、表格</h2> <table> <p class="sycode"> 表格标签</p> <table>： <br> <caption> 标题 <br> </caption> <tr> 表格中的一行 <br> <td> 放在</td> </tr> <tr>中代表一个单元格 <br> <th> 类似</th> </tr> <tr>通常用在第一行或最后一行 <br> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre name="code" class="sycode"><span style="font-size:14px;"><table border="1" width="40%">  <caption>表格标题</caption> <tr> <th>姓名</th> <th>年龄</th> </tr> <tr algin="”center”"> <td>张三</td> <td>23</td> </tr> </table></span></pre><div class="contentsignin">Nach dem Login kopieren</div></div> <br> <p class="sycode"> 多行多列</p> <td>： <br> colspan属性：控制一个单元格占多列 <br> rowspan属性：控制一个单元格占多行 <p class="sycode"> <thead>、</thead></p> </td> </tr> <tbody>、</tbody> <tfoot>： <br> 三个标签都是放在table下，内部可以放tr标签 <br> <thead> 表头，通常用在第一行 <br> </thead> </tfoot> <tbody> 表体，表格中间的内容，可以有多个 <br> </tbody> <tfoot> 表脚，通常用在最后一行 <br> <br> <br> <h2 id="表单">9、表单</h2> <form>重要<input> <p class="sycode"> 表单标签</p> </form> <form>： <br> 内部可以包含文本框、单选、多选、下拉列表等表单项 <br> 可以把用户在页面中的输入和选择提交到一个地址 <br> 常用属性： <br> action：提交地址 <br> method：提交方式 <p class="sycode"> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre name="code" class="sycode"><span style="font-size:14px;"><form action="%E8%A6%81%E6%8F%90%E4%BA%A4%E7%9A%84%E5%9C%B0%E5%9D%80" method="get"> <input type="text" name="username"> <input type="password" name="password"> </form></span></pre><div class="contentsignin">Nach dem Login kopieren</div></div> <br> <p class="sycode"> 输入项<input>： <br> 通过指定type属性可以定义不同的输入项： <br> text：普通文本框 <br> password：密码框 <br> radio：单选按钮 <br> checkbox：多选按钮 <br> file：文件 <br> hidden：隐藏字段 <br> submit：文本提交按钮 <br> image：图片提交按钮 <br> reset：重置按钮 <br> button：普通按钮 <br> </p> <p class="sycode"> 下拉列表<select> <br> 默认为单选，multipe属性指定是否为多选 <br> size属性指定显示个数 <br> 内部用<option>标签指定其中选项 <br> </option></select></p> <p class="sycode"> 文本域<textarea> <br> rows属性指定行数 <br> cols属性指定列数 <br> 标签<label> <br> 可以用来方便点击或者设置快捷键 <br> <label><input type="radio"> 男</label> <br> <label for="user" accesskey="u">用户名(u)</label> <br> <input type="text" id="user"> <br> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre name="code" class="sycode"><span style="font-size:14px;"> <form action="success.html" method="get"> <table width="50%" border="1" cellpadding="10" cellspacing="0"> <tr> <td>用户名：</td> <td><input id="user" name="username" type="text"></td> </tr> <tr> <td>密码：</td> <td> <input name="password" id="pass" type="password"> </td> </tr> <tr> <td colspan="2" align="center"> <label><input type="radio" name="gender" value="male">男</label> <label><input type="radio" name="gender" value="female">女</label> </td> </tr> <tr> <td colspan="2" align="center"> <label><input type="checkbox" name="interest" value="smoke">抽烟</label> <label><input type="checkbox" name="interest" value="drink">喝酒</label> <label><input type="checkbox" name="interest" value="tangtou">烫头</label> </td> </tr> <tr> <td colspan="2" align="center"> <input type="file" name="portrait "> </td> </tr> <tr> <td>城市</td> <td> <select name="city">  <option>-请选择城市-</option> <option value="bj">-北京-</option> <option>-广州-</option> <option>-成都-</option> <option>-上海-</option> </select> </td> </tr> <tr> <td>自我介绍</td> <td> <textarea name="rusume" rows="10" cols="30"> </textarea> </td> </tr> <tr> <td colspan="2" align="center"> <input type="submit" value="注册"> <input type="image" src="../image/reg.gif"> <input type="reset" value="重填"> <input type="button" value="普通按钮" onclick="alert('你好！')"> </td> </tr> <label accesskey="u" for="user"></label> </table> <input type="hidden" name="xxx" value="ssss"> </form></span></pre><div class="contentsignin">Nach dem Login kopieren</div></div> <br> <br> <br> </label></textarea></p> <h2 id="注释-特殊字符">10、注释 特殊字符</h2> <p class="sycode"> 特殊字符： <br> 一些特殊符号，比如 & 等，在代码中会被浏览器识别并解释 <br> 所以用一些特殊的方式来表示 </p> <p class="sycode"> <br> </p> <p class="sycode"> </p> <p class="sycode"> 注释用 </p> <p class="sycode"> </p> <h2 id=""> </h2> <br> </form> </tfoot> </table> </table> </frameset> </frameset> </frameset> </dd> </dl>

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Beste grafische Einstellungen

1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle -Lösung

3 Wochen vor By DDD

Was ist neu in Windows 11 KB5054979 und wie Sie Update -Probleme beheben

2 Wochen vor By DDD

Will R.E.P.O. Crossplay haben?

1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7552

CakePHP-Tutorial

1382

Wie lautet das Format des Kontonamens von Steam?

Win11 -Aktivierungsschlüssel dauerhaft

NYT -Verbindungen Hinweise und Antworten

Related knowledge

Was ist der Zweck des & lt; Fortschritts & gt; Element? Mar 21, 2025 pm 12:34 PM

Der Artikel erörtert den HTML & lt; Progress & gt; Element, Absicht, Styling und Unterschiede vom & lt; Meter & gt; Element. Das Hauptaugenmerk liegt auf der Verwendung & lt; Fortschritt & gt; Für Aufgabenabschluss und & lt; Meter & gt; für stati

Was ist der Zweck des & lt; datalist & gt; Element? Mar 21, 2025 pm 12:33 PM

Der Artikel erörtert den HTML & lt; Datalist & gt; Element, das die Formulare verbessert, indem automatische Vorschläge bereitgestellt, die Benutzererfahrung verbessert und Fehler reduziert werden.Character Count: 159

Was ist der Zweck des & lt; Meter & gt; Element? Mar 21, 2025 pm 12:35 PM

Der Artikel erörtert das HTML & lt; Meter & gt; Element, verwendet zur Anzeige von Skalar- oder Bruchwerten innerhalb eines Bereichs und seine gemeinsamen Anwendungen in der Webentwicklung. Es differenziert & lt; Meter & gt; von & lt; Fortschritt & gt; und Ex

Was ist das Ansichtsfenster -Meta -Tag? Warum ist es wichtig für reaktionsschnelles Design? Mar 20, 2025 pm 05:56 PM

In dem Artikel wird das Ansichtsfenster -Meta -Tag erörtert, das für das reaktionsschnelle Webdesign auf mobilen Geräten unerlässlich ist. Es wird erläutert, wie die ordnungsgemäße Verwendung eine optimale Skalierung von Inhalten und Benutzerinteraktion gewährleistet, während Missbrauch zu Design- und Zugänglichkeitsproblemen führen kann.

Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung? Mar 20, 2025 pm 06:05 PM

Der Artikel erörtert das & lt; iframe & gt; Der Zweck von Tag, externe Inhalte in Webseiten, seine gemeinsamen Verwendungen, Sicherheitsrisiken und Alternativen wie Objekt -Tags und APIs einzubetten.

Ist HTML für Anfänger leicht zu lernen? Apr 07, 2025 am 12:11 AM

HTML ist für Anfänger geeignet, da es einfach und leicht zu lernen ist und schnell Ergebnisse sehen kann. 1) Die Lernkurve von HTML ist glatt und leicht zu beginnen. 2) Beherrschen Sie einfach die grundlegenden Tags, um Webseiten zu erstellen. 3) hohe Flexibilität und kann in Kombination mit CSS und JavaScript verwendet werden. 4) Reiche Lernressourcen und moderne Tools unterstützen den Lernprozess.

Die Rollen von HTML, CSS und JavaScript: Kernverantwortung Apr 08, 2025 pm 07:05 PM

HTML definiert die Webstruktur, CSS ist für Stil und Layout verantwortlich, und JavaScript ergibt eine dynamische Interaktion. Die drei erfüllen ihre Aufgaben in der Webentwicklung und erstellen gemeinsam eine farbenfrohe Website.

Was ist ein Beispiel für ein Start -Tag in HTML? Apr 06, 2025 am 12:04 AM

AnexampleofaTartingTaginHtmlis, die, die starttagsaresesinginhtmlastheyinitiateElements, definetheirtypes, andarecrucialForstructuringwebpages und -konstruktionsthedoms.

See all articles