A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 小石姐姐 于 2018-5-4 09:42 编辑

【石家庄校区】HTML笔记整理

HTML
概述
HTML ----超文本标记语言
超文本:比普通的文本更强大
HTML是用来制作页面(静态页面)
案例一:网站信息页面的显示
  • HTML的文件的创建

    一个HTML为文件 拓展名是.html  或者.htm结尾

    - 01.html
      HTML的标签
      <!DOCTYPE html>//代表用的是HTML5
      <html>//跟标签
      <head>//头标签
        <meta charset="utf-8">
        <title></title>
      </head>//头标签
      <body>  //体标签
       
      </body>
      </html>

font  字体标签   

<font>标签:字体标签
        <font>文字<font>
    标签中的一些属性:
        <font>标签的属性
            <标签 属性名="属性值"属性名="属性值"><标签>
        属性:
            color
                英文单词设置:black,green
                使用16进制数:#FFFFFF  两位分段 红绿蓝
            size  size = "1到7"
            face属性: 字体
            br 换行
先保存再运行

size 字体大小

color 字体颜色     face字体 HTML的排版标签
<!-- HTML的标题标签 -->//注释
<h1>一级标题</h1>
<h2>一级标题</h2>
<h3>一级标题</h3>
<h4>一级标题</h4>
标签的嵌套:对称
<b><i></i></b>
<pre>标签    原生标签  将输入的内容原封不动的显示
h 标题标签

<p> 段落标签</p>

<b> 字体加粗标签</b>

<i> 字体斜体标签</i>

<u>字体下划线</u>

<center> 居中标签</center>案例二:网站图片页面显示:
HTML的图片标签

图片标签 <img/>

      src: 图片的来源

      width:图片的宽度

      height:图片的高度

       alt:图片找不到显示的内容

    路径:相对路径(以自己文件为出发点)
   
   
    <img/ src = "图片引入的路径">
图片路径:
路径:
    相对路径:目标资源和我的相对位置
        如果引入图片再同意路径
            当前路径
            ./ 代表当前路径  写./或者文件名
            上一路径:../
            上2路径../../
            下一级路径: 文件夹名/文件名
        如果是在当前路径的下一级img路径,
        *<img src="img/cs10086.jpg" alt = "一张图片" width="50"   height = "60" />案例三:网站列表页面的显示
​    有序列表

有序列表   //有顺序标记 1,2,3,4   A,B,C,D
<ol>

            <li>(标签显示的内容)</li>

        </ol>

有序列表的type属性

        1:数字类型
        
        a:英文类型
        
        i:罗马字符
        
        start属性:从哪开始
​    无序列表

    <ul>

        <li></li>

    </ul>

无序列表type属性

    diesc 实心点
   
    circle 空心圆
   
    square 方块
   超链接标签  <a>

    href  链接的路径

    target  打开的方式

     self   在自身页面打开

      blank  新打开一个窗口
<a>

属性
    href 连接的路径
    tagret 打开的方式
    self  在自身页面打开
    blank 新建一个窗口打开
    parent案例四:网站的首页的显示
HTML的表格标签

<table>

<tr>

    <td></td>
    <td></td>

</tr>

</table>
属性

width 表格宽度

    height 表格高度

    border 边框

    align 表格水平位置

    <td>的属性

    colspan=“列数”

    rowspan="行数"
HTML的表单标签 <form>

action  提交的路径.默认提交到当前页面

    method  请求的方式.GET和POST.默认是GET

        GET 方式和 posT方式的区别

    GET:数据会显示到地址栏中.GET方式提交是有大小的限制

    POST:数据不会显示到地址栏中,POST方式提交的是没有大小限制

HTML中表单元素

<input type=”text”> :文本框.

    常用属性:

        name   :表单元素的名称.必须有name属性,然后后台才可以接收数据.

        value  :文本框的默认值.

        size   :文本框的长度.

        maxlength:文本框输入的最大长度.

        readonly:只读文本框.
<input type=”password”> :密码框.

    * 常用属性:

        *name   :表单元素的名称.必须有name属性,然后后台才可以接收数据.

        *value  :密码框的默认值.

        *size   :密码框的长度.

        *maxlength:密码框输入的最大长度.
<input type=”radio”>     :单选按钮.

    常用的属性:

        name   :表单元素的名称.必须有name属性,然后后台才可以接收数据.

        value  :单选按钮的默认值.

        checked:单选按钮默认被选中.

<input type=”checkbox”>    复选按钮

常用的属性:

        *name   :表单元素的名称.必须有name属性,然后后台才可以接收数据.

        *value  :单选按钮的默认值.

        *checked:单选按钮默认被选中.

<input type=”button”>    :普通按钮.没有任何功能的按钮.

<input type=”submit”>    :提交按钮.

<input type=”reset”>     :重置按钮.

<input type=”file”>      :文件上传的表单项.

<input type=”hidden”>    :隐藏字段.

<input type=”image”>     :图片按钮



<select>                 :下拉列表.

<textarea>               :文本域.
HTML的框架标签
表单元素
表单的输入: input
​                根据type属性不同有不同的输入类型
单元格的合并
​        只要找准跨行还是跨列




1 个回复

倒序浏览
我来占层楼啊   
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马