实验楼HTML基础入门学习

时间:2021-09-19 15:11:33

HTML基本介绍

HTML,一种描述网页的语言

结构

  • html
    • head
      • title
      • script
    • body
      • ...

文档

<html>
    <head>
            <title>.....</title>
    </head>

    <body>
            <p>.....</p>
    </body>
</html>

标签

元素是一整条,如

;而标签则代表了一个,如

,

HTML文本

HTML元素


一个换行符

两个换行符

HTML属性

是在 HTML 元素的开始标签中定义。 总是以名称和值对应的形式出现,比如:name="value"。 属性值应该始终被包括在引号内。双引号是最常用的,不过使用单引号也没有问题

HTML文本格式化

常用

  • < b> (bold)粗体
  • < big> (big)大字体
  • < em> (emphasized)强调字
  • < i> (italic)斜体
  • < small> (small)小字体
  • < strong> (strong)加重语气

HTML样式

用style一气呵成的解决背景,颜色,各种

超文本

链接

  • < a href="http://www.shiyanlou.com">shiyanlou< /a>
  • target等于_self或_blank
  • 添加提示文字title
  • 一页中怎么停泊,锚

       <a href="#跳转目的地名称">跳转起始字符</a>
       ...
       ...
       ...
       <a name="跳转目的地名称">跳转目的地字符</a>

    表格

     <table  align="center" border="1">  
            <tr>
            <td>first row and first column</td>
            <td>first row and second column</td>
            <td>first row and third column</td>
            </tr>
    
            <tr>
            <td>second row and first column</td>
            <td>second row and second column</td>
            <td>second row and third column</td>
            </tr>
     </table>  

    属性

  • border外边框
  • colspan:控制此单位所占列数
  • rowspan:控制此单位所占行数

HTML图像

  • <img src="path">
  • align属性,调整对齐bottom、middle、top左右可加的参数有right,left默认为right
  • width="80" height="80"
  • 规定区域点击
    • rect(矩形)、circle(圆形)、poly(多边形)
    • coords有4个值,分别用逗号隔开,表示矩形区域左上角x坐标、左上角y坐标、右下角x坐标和右下角y坐标

      <map>
      <area shape="rect" coords="" href="" target="">
      </map

列表list(order, unorder)

<ol>
 <li>balabala</li> 
</ol>

有序:type, 采用什么排序;start, 以什么开始
无序:type,Disc(默认)实心黑点;Circle小圈;square方点

注释

<!--这是一段注释。注释不会在浏览器中显示。-->

HTML表单

用于数据的提交,评论

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

type类型

  • usename, password
  • 单选框radio, 多选框checkbox

基础汇总实验截取

选了表单方面,css什么暂时不管

<!DOCTYPE html>
<html>
<head>
    <title>test_form</title>
</head>
<body>
    <form action="MAILTO:support@shiyanlou.com" method="post" enctype="text/plain">
        <h3>Send email to shiyanlou</h3>
        your name:<br>
        <input type="text" name="name" value="yourname" size="20">
        <br>
        your email:<br/>
        <input type="text" name="mail" value="youremail" size="20">
        <br>
        what you want say:<br>
        <input type="text" name="comment" value="yourcomment" size="20">
        <br><br>
        <input type="submit" value="send">
        <input type="reset" value="reset">
    </form>
</body>
</html>

参考链接

实验楼前端路径