1–HTML基础

  • 1–HTML基础已关闭评论
  • 98 次浏览
  • A+
所属分类:Web前端
摘要

编码:charset=“gbk” ;gbk2312,utf-8关键字作者描述 <script> 导入js文件


1.页面结构

<!DOCTYPE html> <html>     <head>         <meta charset="UTF-8">         <title></title>     </head>     <body>     </body> </html>

编码:charset=“gbk” ;gbk2312,utf-8

 2.常见标签

2.1 meta标签

关键字

<meta name="keywords" content="HTML基础" />

作者

<meta name="author" content="lxl" />

描述

<meta name="distribution" content="这是一个基础网站" />

 

<script> 导入js文件

<!-- 文本内容 --> 注释

<p> 段落内容 </p> 段落

2.2 标题标签

由大到小

<h1>h1</h1>

<h2>h2</h2>

<h3>h3</h3>

<h4>h4</h4>

<h5>h5</h5>

<h6>h6</h6>

 

<br> 换行标签 

<p>进行<br>换行</p>

 

<hr> 换行线标签 

<p>进行<hr>换行</p>

 

2.3 文本属性

<strong> 加粗

<b>加粗

<p>进行<strong>加粗</strong></p>
<p>进行<b>加粗</b></p>

 

<i>斜体

<u>下划线

<sup>下标
<sub>上标

<del>删除线

 

<font>规定字体属性

  size 字体大小

  color 字体颜色

<font size="15px" color="blue">字体属性</font>

 

<pre>代码样式原样输出

<p>    <pre>www< /pre>  </p>

2.4 form标签

form标签用于为用户输入建立HTML表单

表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等

 

action属性定义在提交表单时执行的动作,通常会被提交到web服务器上的网页

可以指定某个服务器脚本来处理被提交表单:

<form action="action_page.php"></form>

如果省略action属性,则action会被设置为当前页面:

<form action=""></form>

 

method提交的方法有get,post

enctype属性的值:

  application/x-www-form-urlencoded(默认选项)

  multipart/form-data

  text/plain

<form method="post" enctype="application/x-www-form-urlencoded"></form>

 

<input>元素是最重要的表单元素

注意:表单本身是不可见的

对于type属性:

  text:定义常规文本输入的单行输入字段

<input type="text" name=""/>

  

  password:密码输入框

  file:文件上传(此时enctype的值应为第二个选项)

<form method="post" enctype="multipart/form-data">             <input type="file" value="file"/>                 <input type="submit" /> </form>

  

  hidden:隐藏域

  button:按钮

  reset:重置按钮

  submit:定义提交按钮(提交表单)

  radio:定义单选按钮输入(选择其中之一)

  checkbox:定义多选按钮(选择其中多个)

<input type="radio" name="sex" value="male" checked>Male <br> <input type="radio" name="sex" value="female">Female

name="sex"的作用是性别只能单选

 

name:同样表示文本输入框名称

(如果要正确的被提交,每个输入字段必须设置一个name属性)

size:输入框的大小

maxlength:输入框中允许输入字符的最大数

value:输入框中的默认值

readonly:表示该输入框只能显示,不能修改

<input type="text" name="username" size=25 maxlength="5" value="lxl" readonly="" />

2.5 a标签

a标签用于控制界面与页面之间的跳转

target的默认值为_self

_self:用于在当前选项卡中跳转,不新建页面

<a href="http://baidu.com" target="_self">百度</a>

_blank:用于在新选项卡中跳转,要新建页面

<a href="http://baidu.com" target="_blank">百度</a>

 

_parent:在父框架集中打开被链接文档

_top:在整个窗口中打开被链接文档

2.6 锚文本

<p name="top">顶部内容</p> 锚点 <a href="#top">跳转顶部</a> 跳转锚点

2.7 img标签

img标签用于向网页中嵌入一幅图像

<img src="img/txt.jpg" alt="替代文本"/>

src:规定显示图像的url

alt:规定图像的替代文本

width:规定图片的高度

height:规定图片的宽度

2.8 table标签

table标签用于定义HTML表格

<table border="5" cellpadding="10" cellspacing="10">             <caption>学生表</caption>             <th>分类</th>             <tr><td>学号</td><td>姓名</td><td>年龄</td></tr>             <tr><td>01</td><td>lxl</td><td>20</td></tr>             <tr><td>02</td><td>zhj</td><td>35</td></tr>             <tr><td>03</td><td>ljk</td><td>40</td></tr> </table>

border:定义表格边框

cellpadding:定义单元边沿与内容的空白

cellspacing:定义单元格的空白

colspan:行合并

rowspan:列合并

 

<caption>定义表格标题

<th>定义表格表头

<tr>定义表格的行

<td>定义表格单元

2.9 列表标签

<ul>标签用于定义无序列表

<ul type="circle">             <li>文本内容</li>             <li>文本内容</li> </ul>

项目符号:circle(默认),square,disc

注意:type=“none”时无项目符号

 

<ol>标签用于定义有序列表

<ol type="1">             <li>文本内容</li>             <li>文本内容</li> </ol>

标记类型:1(默认),A,a,I,i

2.10 框架使用