简单了解HTML

来源：互联网发布：金勃良知乎编辑：程序博客网时间：2024/06/07 23:08

html:hypertext markup language(超文本标签语言)

HTML 指超文本标签语言。
HTML 文件是包含一些标签的文本文件。
这些标签告诉 WEB 浏览器如何显示页面。
HTML 文件必须使用 htm 或者 html 作为文件扩展名。
HTML 文件可以通过简单的文本编辑器来创建。

html的语法是使用各个标签来定义格式:使用(开始)<..>内容</..>(结束)，当开始与结束标记中间没有内容的时候可以使用缩写<../>
标记（标签）的作用
- 告诉浏览器如何显示内容
常用的标签
1. 注释
2. <a></a> 定义锚：
  - 通过使用 href 属性，创建一个到另外一个文档的链接
  - 通过使用 name 或 id 属性，创建一个文档内部的书签（在访问连接时可是使用#name书签直接定位到该name属性指定的位置）
  - href=URL target="_blank"在新的空白窗口打开超链接
3. <B></B>定义粗体
4. <body>定义显示的主体
5. <br>插入一个回车（换行）
6. <font> 定义文本的字体，大小，颜色
7. <hr>定义水平线
8. <i>定义斜体
9. <img>定义插入图片
  1. src：所显示图像的 URL。（图片的路径名称：绝对路径，相对路径）
  2. alt：对图片的简短描述
  3. align:规定如何根据周围的文本来排列图像（top顶端，middle居中，left，right图片在文字左侧，bottom文字的中线在图片的底部）
  4. width:定义图片的宽度
  5. height：定义图片的高度
  6. border:定义图片的边框宽度
  7. ```
  <HTML> <HEAD>  <TITLE> New Document </TITLE> </HEAD> <BODY>  <b>hello world</B>  <img src="../water.jpg" alt="这是一张图片" align="middle" width=300 height=400 border=5/> </BODY></HTML>
```
10. <sub>将文本显示为下标
11. <sup>将文本显示为上标
12. <U>在文本上加上下划线
13. <table>定义表格
  1. bgcolor背景颜色
    1. RGB
    2. （x,x,x）百分比的颜色
    3. #xxxxxx十六进制的颜色
      1. colorname颜色名称
  2. border表格的边框宽度
  3. colspan=""合并列
  4. rowspan=""合并行
14. form表单（form 元素可为用户输入创建表单。表单可包含文本域，复选框，单选按钮等等。表单用于向指定的 URL 传递用户数据。）
  1. action：提交表单的地址（URL）
  2. method：表单提交的方法
  3. 表单组件
    1. <input>定义输入域，输入组件
      1. type：指定input元素的类型，默认为"text"
        button:普通按钮（需要js编程实现该按钮的功能）
        radio单选按钮，如果将多个单选按钮的name设置相同，则它们设置为同一组，checked属性表示被选中
        checkbox：复选按钮（多选）
        file文件
        hidden隐藏
        image图片按钮（相当于提交按钮）
        password密码文本(对输入的内容做隐藏处理）
        reset重置按钮（重置当前按钮所在的表单范围）
        submit提交按钮（将当前表单中的数据发送到action指定的地址）
        text文本框
        name定义input元素的唯一名称
        value定义按钮上的文本
        在输入中name重复的后台以数组的形式进行接收
    2. select下拉选项（multiple多选属性）
      1. 例子
        <select name="degree" multiple><option value ="1">小学</option><option value ="2">初中</option><option value="3">高中</option><option value="4">大学</option><option value="5">硕士</option><option value="6">博士</option><option value="7">博士后</option><option value="8">剩斗士</option><option value="9">壮士</option><option value="10">烈士</option></select>
      2. selected被选中

测试用的代码

<HTML> <HEAD>  <TITLE> New Document </TITLE> </HEAD> <BODY><font color="red" size=25>H<sub>2</sub>O<br/> <hr/>2<sup>10</sup>=1024 </font> <hr/><form action="">用户名：<input type="text" name="userName" value="请输入用户名"/><br/>密  码：<input type="password" name="passWord"><br/>性别：<input type="radio" value="男" name="sex" checked>男<input type="radio" value="女" name="sex">女<br/>爱好：<input type="checkbox" value="1" name="hobby">乒乓球<input type="checkbox" value="2" name="hobby">足球<input type="checkbox" value="3" name="hobby">游泳<input type="checkbox" value="4" name="hobby">赛车<br/>学历：<select name="degree"><option value ="1">小学</option><option value ="2">初中</option><option value="3">高中</option><option value="4">大学</option><option value="5">硕士</option><option value="6">博士</option><option value="7">博士后</option><option value="8">剩斗士</option><option value="9">壮士</option><option value="10">烈士</option></select><br/>上传照片：<input type="file" name="photo" value="选择图片"/><br/>自我介绍：<br/><textArea rows=8 cols=25>大家好</textArea><br/><input type="button" value="普通按钮"><input type="reset" value="一键重置"><input type="submit" value="提交按钮"><br/></form> </BODY></HTML>

<HTML> <HEAD>  <TITLE> New Document </TITLE> </HEAD> <BODY>  <b>hello world</B>  <hr/>  <img src="../water.jpg" alt="这是一张图片" align="middle" width="300" height="400" border="5"/>  <hr/>  <hr/>  <img src="../water.jpg" alt="这是一张图片" align="middle" width="300" height="400" border="5"/>  <hr/>  <hr/>  <img src="../water.jpg" alt="这是一张图片" align="middle" width="300" height="400" border="5"/>  <hr/>  <hr/>  <img src="../water.jpg" alt="这是一张图片" align="middle" width="300" height="400" border="5"/>  <hr/><hr/>  <img src="../water.jpg" alt="这是一张图片" align="middle" width="300" height="400" border="5"/>  <hr/><hr/>  <img src="../water.jpg" alt="这是一张图片" align="middle" width="300" height="400" border="5"/>  <hr/><hr/>  <img src="../water.jpg" alt="这是一张图片" align="middle" width="300" height="400" border="5"/>  <hr/><hr/>  <img src="../water.jpg" alt="这是一张图片" align="middle" width="300" height="400" border="5"/>  <hr/><hr/>  <img src="../water.jpg" alt="这是一张图片" align="middle" width="300" height="400" border="5"/>  <hr/><hr/>  <img src="../water.jpg" alt="这是一张图片" align="middle" width="300" height="400" border="5"/>  <hr/><hr/>  <img src="../water.jpg" alt="这是一张图片" align="middle" width="300" height="400" border="5"/>  <hr/><hr/>  <a name="rrr">  <img src="C:/Users/dingshuangen/Desktop/课表.jpg" alt="这是一张图片" align="middle" width="300" height="400" border="5"/>  <hr/><hr/>  <img src="../water.jpg" alt="这是一张图片" align="middle" width="300" height="400" border="5"/>  <hr/>  <table border=2 width=“3000”><tr><!--行--><th>序号</th><!--th表格的标题--><th>书名</th><th>作者</th><th>价格</th></tr><tr><td>1</td><!--单元格--><td>老人与海</td><td>海明威</td><td>55</td></tr><tr><td>2</td><td><a href="http://baike.sogou.com/v64392728.htm?fromTitle=%E9%92%A2%E9%93%81%E6%98%AF%E6%80%8E%E6%A0%B7%E7%82%BC%E6%88%90%E7%9A%84" target="_blank">钢铁是怎样炼成的</td><td>尼古拉</td><td>66</td></tr><tr><td>3</td><td><a href="http://v.sogou.com/series/mnqxe5dpn5xf6obrha4qtoxzykv5bvvv3q.html" target="_top">葫芦娃</td><td>小虎</td><td>25</td></tr><tr><td>4</td><td><a href="img.html#rrr">黑猫警长</td><td>小胖墩</td><td>67</td></tr>  </table> </BODY></HTML>

阅读全文

0 0