HTML入门速成

2022-11-24 0 742

组织工作当中,时常须要他们写许多单纯的页面,所以,就须要有很大的后端标识符潜能。HTML,CSS,JavaScript等皆是最常用的后端标识符,本拍子即自学讲义,协助诸位新手加速找出他们想的页面制做所须要的HTML标识符。

一. 最常用的页面内部结构

<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>已经开始HTML</title> </head> <body> <h1>你那时码标识符了吗?</h1> </body> </html>

以内标识符留存为.html文件格式,接着用应用程序关上即为最单纯的页面。能试试看~

二. HTML原素

原素是HTML的最基本上组件,库塞县对圆括弧<>及括弧间的文本共同组成。比如:<h1>你那时码标识符了吗?</h1>。

2.1 基本上原素(文字粗细,斜体,上/下标,链接,加载图片,删除线,下划线)

<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>教程</title> </head> <body> <h1>我的第一个标题</h1> <p>我的第一个段落</p> <a href=“http://www.runoob.com”>这是我的第一个链接</a> <br /> <img src=“/images/logo.png” width=“258” height=“28” /> <br /> <b>加粗文本</b> <br /> <i>斜体文本</i> <br /> <p>这是<sub>下标</sub></p> <p>这是<sup>上标</sup></p> <p>My favorite color is <del>blue</del> <ins>red</ins>!</p> <br /> <br /> <br /> <br /> <br /> <br /> </body> </html>

上述原素包括文字粗细,斜体,上/下标,链接,加载图片,删除线,下划线等。以内标识符运行后,如图:

HTML入门速成

2.2 表格

如何生成表格?

HTML入门速成

会用到以下标签<table></table>,<tr>行标签设置</tr>,<tr>列标签设置</tr>,<th>表头标签设置</th>

<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>教程</title> </head> <!–给表格加样式—> <style type=“text/css”> th {background-color:lightskyblue;color: #255e95} </style> <body> <table border=“1” cellspacing=“0” > <caption>工资单</caption> <tr> <th>年份</th>> <th>季度</th>> <th>姓名</th>> <th>工资</th>> <th>奖金</th>> <th>个税</th>> <th>扣除个税工资</th>> </tr> <tr> <td rowspan=“4”>2019</td> <td>1</td> <td rowspan=“4”>王建民</td> <td>28900</td> <td>3458</td> <td>3988</td> <td>21454</td> </tr> <tr> <td>2</td> <td>27366</td> <td>3458</td> <td>3988</td> <td>21454</td> </tr> <tr> <td>3</td> <td>27366</td> <td>3458</td> <td>3988</td> <td>21454</td> </tr> <tr> <td>4</td> <td>27366</td> <td>3458</td> <td>3988</td> <td>21454</td> </tr> </table> </body> </html>

2.3 列表(有序列表/无序列表/嵌套列表)

2.3.1 有序列表

<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>教程</title> </head> <body> <ol type=“A”> <li>苹果</li> <li>香蕉</li> <li>雪梨</li> <li>西瓜</li> </ol> </body> </html>
HTML入门速成
有序列表-水果

2.3.2 无序列表

<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>教程</title> </head> <body> <ul type=“A”> <li>苹果</li> <li>香蕉</li> <li>雪梨</li> <li>西瓜</li> </ul> </body> </html>
HTML入门速成
无序列表-水果

2.3.3 嵌套列表

<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>教程</title> </head> <body> <ul type=“A”> <li>苹果</li> <ol> <li>大苹果</li> <li>小苹果</li> </ol> <li>香蕉</li> <li>雪梨</li> <li>西瓜</li> </ul> </body> </html>
HTML入门速成

2.4 <style>和<script>

style原素能给HTML增加css样式
<!–给表格加样式—> <style type=“text/css”> th {background-color:lightskyblue;color: #255e95} </style>

以内是给表格增加背景色的标识符,一般这段加在HTML的<head></head>之间

加入css样式有三种形式:内联样式,内部样式表,外部样式表

内联样式:<h1 style=”font-family:arial;”> 文字文字文字</h1>

内部样式表:<style type=”text/css”> body {background-color:yellow;} </style>

外部样式表:<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>

script+脚本

以下是xmind能协助大家记忆:

HTML入门速成

觉得有用的小伙伴记得收藏点赞~

HTML入门速成
上一篇: HTML 元素类型
HTML入门速成
下一篇: html常用标签大全

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务