HTML语言基础

HTML语言

HTML全称Hypertext Markup Language ,译作超文本标记语言。

可以在 https://www.w3cschool.cn/html/ 中学习HTML知识

2.HTML 文档结构

HTML文档由四个主要标记组成，分别是<html>,<head>,<title>,<body>,其作用如下

 1   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 2         "http://www.w3.org/TR/html4/loose.dtd">
 3 <html> <!--文件的开头，页面中的所有元素都放在该标签中 -->
 4 <head> <!-- 文件的头标记，放置HTML文件信息，如css等-->
 5     <title>Title</title><!-- 定义在head中，用来定义网页的标题-->
 6 </head>
 7 <body>
 8   页面的主体内容都定义在<body>标签中
 9 </body>
10 </html>

3.HTML常用标记

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2         "http://www.w3.org/TR/html4/loose.dtd">
  3 <html> <!--文件的开头，页面中的所有元素都放在该标签中 -->
  4 <head> <!-- 文件的头标记，放置HTML文件信息，如css等-->
  5     <title>Title</title><!-- 定义在head中，用来定义网页的标题-->
  6     <!--设置编码，解决中文乱码问题-->
  7     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  8 </head>
  9 <body>
 10 <!--1.<br>标记用来换行，单独出现-->
 11 第一行 <br>第二行
 12 
 13 <!--2.<p></p>段落标记，在段前段后添加一个空行-->
 14 <p>第一段</p>
 15 <p>第二段</p>
 16 <!--3.<center></center>居中标记，标记中的文字居中显示-->
 17 <center>这段文字居中显示</center>
 18 <!--4.文字列表标记-->
 19 <!--4.1<ul><li></li></ul> 通过<ul></ul>可以创建一组无需列表，网页显示为在每个列表项显示应原点符号，-->
 20 <!--其中每一项以<li></li>表示-->
 21 
 22 <ul>
 23     <li>无序列表项1</li>
 24     <li>无序列表项2</li>
 25     <li>无序列表项3</li>
 26     <li>无序列表项4</li>
 27 
 28 
 29 </ul>
 30 
 31 <!--4.2有序列表-->
 32 <!--<ol><li></li></ol>创建有序列表，可以将列表项排号-->
 33 <ol>
 34     <li>有序列表项1</li>
 35     <li>有序列表项2</li>
 36     <li>有序列表项3</li>
 37     <li>有序列表项4</li>
 38 
 39 
 40 </ol>
 41 5.表格标记
 42 <table width="318" align="center" bgcolor="aqua" border="1">
 43 
 44     <caption align="top"> 表格标题</caption>
 45     <tr> <!-- 表格行-->
 46         <th align="center">colName1</th><!--单元格标记，又称列标记,th用来定义表头-->
 47         <th align="center">colName2</th>
 48         <th align="center">colName3</th>
 49 
 50 
 51     </tr>
 52 
 53     <tr> <!-- 表格行-->
 54         <td align="center">colValue1</td><!--单元格标记，又称列标记-->
 55         <td align="center">colValue2</td><!--单元格标记，又称列标记-->
 56         <td align="center">colValue3</td><!--单元格标记，又称列标记-->
 57 
 58 
 59     </tr>
 60     <tr> <!-- 表格行-->
 61         <td align="center">colValue1</td><!--单元格标记，又称列标记-->
 62         <td align="center">colValue2</td><!--单元格标记，又称列标记-->
 63         <td align="center">colValue3</td><!--单元格标记，又称列标记-->
 64 
 65 
 66     </tr>
 67 
 68 </table>
 69 6.表单标记
 70 <!--action="url"定义处理表单数据的URL地址-->
 71 <!--method="get"指定请求的方式，有post和get两种-->
 72 <!--name="name"指定表单的名称，其值程序员可以自定义-->
 73 <!--onsubmit=""指定当用户单击提交触发的事件-->
 74 
 75 <!--target="_blank"指定输入数据结果显示在那个窗口中  ，-->
 76 <!-- -blank新窗口中，-self同一个窗口中-parent上级窗口中打开 -top浏览器的整个窗口中打开-->
 77 <form action="url" method="get" name="name" onsubmit="" target="_blank">
 78     用户名：<input name="userName" type="text" id="userNameId" size="20" maxlength="20"><br>
 79     密码：<input name="pasword" type="password" id="paswordId" size="20" maxlength="20"><br>
 80     性别：<input name="sex" type="radio" value="男" checked> 男&nbsp;
 81     <input name="sex" type="radio" value="女"> 女<br>
 82     爱好：<input name="like" value="体育" type="checkbox" id="like">体育
 83     <input name="like" value="看书" type="checkbox" id="like1">看书
 84     <input name="like" value="画画" type="checkbox" id="like2">画画<br>
 85 
 86     <select name="select" multiple>
 87 
 88         <option>1</option>
 89         <option>2</option>
 90         <option>3</option>
 91         <option>4</option>
 92     </select><br>
 93 
 94     <textarea rows="6" cols="30" wrap="soft"></textarea><br>
 95     <input type="reset" value="重置">
 96     <input type="submit" value="提交">
 97 
 98 </form>
 99 </body>
100 </html>

HTML语言基础

HTML语言基础

猜你喜欢