Sports students learn programming--html learning_html/css_WEB-ITnose-HTML Tutorial-php.cn

Sports students learn programming--html learning_html/css_WEB-ITnose

Sports students learn programming--html learning_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:49 AM

HTML learning

1. Introduction to HTML (just understand it)

HTML (Hyper Text Markup Language):
HTML is the abbreviation of Hyper Text Markup Language and is the most basic web page language

HTML versions:
2.0 (IETF), 3.0 (W3C), 4.01 (W3C), 5.0 (W3C)
IETF: Internet Engineering Task Force
W3C: World Wide Web Consortium

Characteristics of HTML:
is a language defined by tags. Codes are composed of tags. Codes are not case sensitive.
starts with and ends with
It consists of two parts: the header part

and the body part
The head part is to add some auxiliary or attribute information to the HTML page, and the content inside it will be the most Load
first. The body part is where the page data is actually stored.

HTML tags:
Most tags have start tags and End tag . For example:

Paragraph

There are some tags that have only a single function or there is no content to be modified. They can end within the tag. For example: line break
dividing line

can also be written as

slashes can be omitted

Attributes in HTML tags:
Want To perform richer operations on the content modified by tags, use the attributes in the tags
By changing the attribute values, more effect options are added
Use "=" between the attribute name and attribute value Connection
Attribute values can use double quotes, single quotes, or no quotes. Generally, double quotes (or company regulations writing standards) are used.

2. Header tag

<br> The title of the page<p class="sycode"> </p> <p class="sycode"> <base> Start<br> Target: The default target for all hyperlinks on the page <br> <br> </p> <p class="sycode"> <br> <meta> </p> Page description information <p class="sycode"> content ="Java,.Net,Android,iOS"> <br>See when crawling by spiders, it is related to search engine SEO<br> <strong> html; charset=utf-8"> Inform the browser of the content, type, and encoding of this page </strong> <meta http-equiv="refresh" content="3;url=http://www.maomao.com">Refresh to a certain page after three seconds <br> <br> </p> <p class="sycode">3. Font<font></font></p> <h2> Font tag<font>: </font> </h2> <p class="sycode"><br>Font tag example<strong> FF0000 is a group of two numbers, arranged according to red, green and blue </strong> For example: #FF0000 means red, #00FF00 means green <strong> </strong> <br> <br> <br> Title tag </p> <h1> , & Lt; h2 & gt; ... & lt; h6 & gt;: The title is commonly used in the text. 🎜>4. List<dl> <dt></dt> <dd> <p class="sycode"> <br> No tags: </p> <p class="sycode"> Number tags: <br> > Symbol tag: <br> <br> not not been </p> <h2> </h2> <p class="sycode"> <br> </p> <p class="sycode"> </p> <h2>5、超链接<a></a> </h2> <p class="sycode"> 链接标签<a>： <br> <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> href：要链接的地址 <br> target：显示位置 <br> <pre name="code" class="sycode"><span style="font-size:14px;"><span style="white-space:pre"> </span><a name="mark"></a></span></pre> 在页面的某个位置做出标记 <br> <pre name="code" class="sycode"><span style="font-size:14px;"><span style="white-space:pre"> </span><a href="#mark">跳转到标记</a></span></pre> 点击链接跳转到标记位置 <br> </a></p> <h2>6、图像<image></image> </h2> <p class="sycode"> 图像标签<img src="/static/imghwm/default1.png" data-src="1.jpg" class="lazy" alt="Sports students learn programming--html learning_html/css_WEB-ITnose" >： <br> </p> <pre name="code" class="sycode"><span style="font-size:14px;"><span style="white-space:pre"> </span><img src="/static/imghwm/default1.png" data-src="1.jpg" class="lazy" align="right" border="3" alt="图片说明文字"> </span></pre> src: 图片路径 <br> align: 对齐方式 <br> border: 边框粗细 <br> <p class="sycode"> 图像地图<map>： <br> 在<img src="/static/imghwm/default1.png" data-src="Sunset.jpg" class="lazy" alt="Sports students learn programming--html learning_html/css_WEB-ITnose" >标签中使用usemap属性，指定图像可以用作地图 <br> 使用<map>及<area>标签可以把图像的一部分作为超链接 <br> </map></map></p> <p class="sycode"> </p> <pre name="code" class="sycode"><span style="font-size:14px;"><span style="white-space:pre"> </span><img src="/static/imghwm/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> <br> <h2>7、框架<frameset></frameset> </h2> <p class="sycode"> 框架集合标签</p> <frameset>： <br> <frameset>中可以放入多个<frame>框架，把页面分成几个部分 <br> <frameset>不能放在body中 <br> <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> rows：框架集合每行的高度 <br> cols：框架集合每列的宽度 <br> src：框架中显示的页面 <br> name：框架的名字，可用做超链接的target <p class="sycode"> <br> </p> <p class="sycode"> 内联框架<iframe>： <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> 可以在页面中嵌入另一个页面 <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> <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> <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> <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> <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> <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> <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> </h1>

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

Related Article

Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?

Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?Mar 04, 2025 pm 12:32 PM

The official account web page update cache, this thing is simple and simple, and it is complicated enough to drink a pot of it. You worked hard to update the official account article, but the user still opened the old version. Who can bear the taste? In this article, let’s take a look at the twists and turns behind this and how to solve this problem gracefully. After reading it, you can easily deal with various caching problems, allowing your users to always experience the freshest content. Let’s talk about the basics first. To put it bluntly, in order to improve access speed, the browser or server stores some static resources (such as pictures, CSS, JS) or page content. Next time you access it, you can directly retrieve it from the cache without having to download it again, and it is naturally fast. But this thing is also a double-edged sword. The new version is online,

How to efficiently add stroke effects to PNG images on web pages?

How to efficiently add stroke effects to PNG images on web pages?Mar 04, 2025 pm 02:39 PM

This article demonstrates efficient PNG border addition to webpages using CSS. It argues that CSS offers superior performance compared to JavaScript or libraries, detailing how to adjust border width, style, and color for subtle or prominent effect

How do I use HTML5 form validation attributes to validate user input?

How do I use HTML5 form validation attributes to validate user input?Mar 17, 2025 pm 12:27 PM

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

What is the purpose of the <datalist> element?

What is the purpose of the <datalist> element?Mar 21, 2025 pm 12:33 PM

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

What is the purpose of the <progress> element?

What is the purpose of the <progress> element?Mar 21, 2025 pm 12:34 PM

The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati

What are the best practices for cross-browser compatibility in HTML5?

What are the best practices for cross-browser compatibility in HTML5?Mar 17, 2025 pm 12:20 PM

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

What is the purpose of the <meter> element?

What is the purpose of the <meter> element?Mar 21, 2025 pm 12:35 PM

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex

What is the purpose of the <iframe> tag? What are the security considerations when using it?

What is the purpose of the <iframe> tag? What are the security considerations when using it?Mar 20, 2025 pm 06:05 PM

The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

Repo: How To Revive Teammates

1 months agoBy尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: How To Get Giant Seeds

1 months agoBy尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

4 weeks agoByDDD

R.E.P.O. Save File Location: Where Is It & How to Protect It?

4 weeks agoByDDD

Hot Tools

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

Atom editor mac version download

Atom editor mac version download

The most popular open source editor

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

Hot Topics

Where is the login entrance for gmail email?

7366

15

1628

14

CakePHP Tutorial

1354

52

Laravel Tutorial

1266

25

1214

29