Html标签第一课

时间：2022-08-11 07:39:39
  • <p>段落标签</p>
  • <h1>字体标签，1到6，越来越小</h1>.....<h6></h6><h>标签自动换行
  • <br/>换行 （单个标签）
  • <hr/> 水平线（单个标签）的几个属性：
  • size粗细   width 宽度  Align对齐方式（left,right,center,默认center） color颜色
  • 空格：&nbsp;
  • <center>整体居中</center>
  • <b>粗体</b>
  • <i>斜体</i>
  • <u>下划线</u>
  • <s>删除线</s>
  • <sup>上标</sup>
  • <sub>下标</sub>
  • <body>标签的三个属性：bgcolor背景颜色  text 网页中所有的字体颜色   background="image/bg.jpg"
  • <ol  type="a">有序列表,通过type的值修改初始值
  • <li>你好 默认从1开始<li>
  • <li>你好<li>
  • </ol>
  • <ul  type="circle">无序列表,通过type的值空心圆还是实心圆
  • <li>你好  默认是个黑点点<li>
  • <li>你好<li>
  • </ul>
  • <caption>表格标题</caption> 属性：align=bottom/top;  表格可以进行嵌套
  • <table >表格 属性：border（边框宽度）,width（宽度）,height（高度），cellspacing(表格内框的宽度)cellpadding(表格内的文字至四周边框的距离)bordercolor(边框颜色)bgcolor(背景颜色)align(表格在网页中的水平对齐方式)colspan:跨列 rolespan:跨行
  • <tr> 行标签 <th>表头，姓名</th><th>表头，年龄</th><th>表头，国籍</th></tr>
  • <tr> 行标签 <td>列,张三</td><td>年龄，24</td><td>中国</td></tr>
  • <tr> 行标签 <td>列,张三</td><td>年龄，24</td><td>中国</td></tr>
  • </table>
  • 有序列表跟无序列表可进行嵌套。
  • 虽然有些html有自己的属性去设置该标签的外观，但是实际开发中，不会用自己的属性去做外观处理，而是用CSS。一般用div做布局，不用table做布局
  • <image  src="1.jpg"/>  图片和HTML在同一个文件夹下
  • <image  src="../1.jpg"/>  html上一级目录下的图片(相对路径)
  • <image  src="../2/1.jpg"/>  html上一级目录文件夹为2下的图片(相对路径)
  • <image  src="c/user/.."/> (绝对路径)
  • <image  src="../1.jpg"/> 属性：height， width，border边框  lowsrc（低分辨率的图片位置）alt(当找不到图片时可用文字代替)
  • <a href = "http://www.baidu.com" target="_black">百度</a>
  • <a href = "javascript:;" target="_black">百度</a> 不跳转页面
  • <marquee>滚动字幕（图片也可滚动），默认从右到左</marquee>属性：height，开始滚动时的高度；hspace滚动的区域(离浏览器左边的边框)；,direction，滚动的方向（=up/down/right）behavior="alternate"(来回滚)/slide(跑到目的地就不滚动了) ；scrollamount,滚动的速度；scrolldelay,滚动一下停止的时间，单位为毫秒，走走停停；bgcolor,滚动文字的背景；

  • <form>表单元素</forrm>

    （表单：当做一个注册时，可把内容放在表单里面，当输入的时候需要把内容提交至后台，后台的传值方式有两种，一种是get{通过问号传参的方式，数据量较小，安全系数比较高的。浏览器的地址栏可以看到id/类型},另一种是post｛地址栏看不到，安全系数较高的情况，数据量较大｝，默认情况是get）

    <form action="http://www.baidu.com "(提交到后台的网址)  method ="post"(选择为post)>

    <table>

    <tr><td>用户名：</td><td><input type = "text"/></td></tr>

    <tr><td>密码：</td><td><input type = "password"/></td></tr>

    <tr><td>喜欢的颜色：</td><td><select>

    <option>-----请选择</option><option>红色</option><option>绿色</option></select></td></tr>

    <tr><td>性别：</td><td><input type = "radio"(单选按钮) name = "sex" id ="m"/><label for="m"></label>男<input type = "radio"(单选按钮)  name = "sex" id ="f"/><label for="f"></label>女</td></tr>

    <tr><td>你喜欢的水果：</td><td><input type = "checkbox（复选框）"/>橘子<input type = "checkbox（复选框）"/>苹果<input type = "checkbox（复选框）"/>香蕉</td></tr>

    <tr><td>头像：</td><td><input type = "file（上传按钮）"/></td></tr>

    <tr><td>个人简介：</td><td><textarea(多行输入框) cols(宽度)rows（高度）></texearea></td></tr>

    <tr><td><input type = "reset"（重置按钮，清空表单里的内容）/></td></tr>

    <tr><td><input type = "submit"(提交按钮，把表单里的内容整体提交）/></td></tr> 重置按钮和submit 只能在form中用

    <tr><td><input type = "button"  value="我是一般的按钮"/></td></tr></table>

    </form>

    <form><fieldset style=""><legend align="top"> 图书分类</legend></fieldset>   fieldset：对表单进行分组，一个表单可以有多个fieldset。
    　　　　legend：说明每组的内容描述。

    </form>

    <iframe src ="http://www.baidu.com"  height=""  width =""> （页面里面嵌套页面）</iframe>

    百分比是针对上一级标签的，如果没有上一级标签，则针对浏览器的页面。

    <textarea(多行输入框) cols(宽度)rows（高度）style = "resize:none;"(文本框大小不能拖放)></texearea>

  • Html标签第一课

相关文章