zoukankan      html  css  js  c++  java
  • html知识点总结

    html常用标签
    一、页面的头部标记
      1.标题标记<title>
        用于给网页命名,当设置这个属性之后,我们能直观的在浏览器上看到网页的名字。
      2.元信息标记<meta>
        meta标签的属性
          http-equiv 类似http的头部协议,以键值对的形式出现,“键”由http-equiv设置项目,“值”由content属性设置
          name 以键值对的形式出现,“键”由name设置项目,“值”由content属性设置
          content根据http-equiv和name来设置对应的值
        字符编码的设置
          语法:<mate http-equiv="content-type" content="text/html;charset=字符集">
          常见字符集是GB2132,表示为国际汉字码,在实际应用中也常常使用utf-8编码
        刷新页面
           语法:<mate http-equiv="refresh" content="刷新时间">
          设置为refresh(刷新),content用于设置刷新时间,单位是秒。
        页面跳转
          语法:<meta http-equiv="refresh" content="刷新时间;url=目的地址">
          设置为refresh(刷新),content用于设置刷新时间,单位是秒,在刷新的时候跳转到目的地址所在的页面
        设置关键字
           语法:<meta name="keywords" content="关键字1;关键字2;关键字3;...">
           keywords表示“关键字”设置项目,content用于设置具体的关键字,但是在实际情况中,如果输入太多的关键字,可能会在网页搜索的时候被忽略,所以在设置关键字时要注意在这方面的精简。
        设定页面描述信息
           语法:<meta name="discription" content="页面描述语言">
           discription表示“描述”设置项目,content用于设置具体的描述语言
      3.<link>
      4.<style>
      5.<script>

    二、页面的主体标记<body>
      封装页面的主体内容,使用<body>可以设置页面正文颜色与背景颜色,页面背景图片,页面边距,网页链接颜色(未访问的连接颜色,正在访问的连接颜色,已经访问过的连接颜色)等。
      1.文字与段落标记
        文字标记:
          文字内容
            普通文字可以直接通过键盘键入或拷贝的方式进行输入到<body>标签中
          空格在<body>标签中,不论我们键入多少个空格,在网页显示时都默认显示一个空格,所以为了在浏览器中显示多个空格,可以使用空格对应的一个字符代码
            语法:&nbsp;
          除了空格还有许多特殊文字无法直接输入,也可以通过使用对应的字符实体来表示
          在网页中有一些内容我们只希望给编程的人员看到,不想它在浏览器中显示出来可以使用注释
            语法:<!-- 注释内容 -->
        文字字体
          默认情况下,中文网页中的文字是以黑色,宋体,3号字的效果来显示的。可以用<font>来更改文字的显示效果
            语法:<font size="" color="" face="">
          size设置文字大小,color设置文字颜色,face设置文字字体
      2.标题字标记
        语法:<h1~6 align="对齐方式"></h1~6>
        给文字添加标题语义,数字越大,字体越大。可以再其中设置文字对其方式,默认是左对齐。
      3.文字的装饰标记
          使用较少
      4.段落标记
        语法:<p>段落内容</p>
            <p>段落内容
        <p>的双标记会与上下文产生一空行的间距,单标记只会与上文产生一空行的间距,可设置对其方式
       5.换行标记
         语法:<br/>
          给一段文字强制性换行,两个连续的<br/>相当于<p>的单标记
       6.预格式化标记
          语法:<pre></pre>
          让文字与原来设置好的效果一样,可以将空格保留下来
       7.居中标记
          语法:<center></center>
          让文字居中
       8.缩排标记
          语法:<blockquot>缩进文字</blockquot>
          让文字产生一定的缩进
       9.水平线标记
          语法:<hr/>
          单标记,在标记处产生一条水平线,可以进行宽度,高度,水平对其方式,阴影效果,颜色进行设置
       10.列表标记
          将相关内容按照整齐划一的方式排列
      11.有序列表
        语法:<ol>
            <li>列表内容</li>
            ...
          </ol>
        默认情况下,有序列表的前导符是阿拉伯数字,可以通过type设置改变前导符
      12.无序列表
        项目列表:
          语法:<ul>
              <li>列表内容</li>
              ...
             </ul>
          默认情况下,无序列表的前导符是实心圆点,可以通过type设置改变前导符
        定义列表:
          语法:<dl>
              <dt>名词</dt>
              <dd>解释</dd>
               ...
              </dl>
          对名词进行解释,是一种具有两个层次的列表,名词为层次一,解释为层次二
       13.嵌套列表
        指一个列表项的定义中嵌套了另一个列表的定义
      14.图片标记
        插入图片
          语法:<img src="">
          src表示插入图片的路径,一般使用相对路径
        设置图片大小
          语法:<img src="" height="" width="">
          通过高宽来设置图片的大小
        设置图片与周围对象的边距
          语法:<img src="" hspace="" vspace="">
          通过设置图片与周围对象的水平距离和垂直距离来设置边距
        设置图片提示文本
          语法:<img src="" alt="">
          在图片还未加载好或无法加载时,对图片进行解释说明
        设置图片的对齐方式
          语法:<img src="" align="">
          设置图片与周围对象的对齐方式
        设置图片的边框
          语法:<img src="" border="">
          给图片设置边框
    三、超链接
      超链接标记
        语法:<a href="目标端点">源端点</a>
        源端点可以是文字,也可以是图片,鼠标点击以后跳转到目标端点处
      超链接目标端口
        默认情况下在当前窗口打开,有时为了某种目的,希望超链接页面在其他窗口,如新开一个窗口中打开,此时在我们创建超链接时就必须修改它的目标窗口,目标窗口的修改可以通过target来进行修改
      超链接的连接路径
        绝对路径
        相对路径
      超链接的类型
      根据目标短点的内容
        内部链接
          在同一个网站内部,不同网页的链接,通常使用相对路径
        外部链接
          在不同的网站中,通常使用绝对路径
        书签链接
          目标端点为网页中的某个书签的链接
            步骤:1.创建书签
                语法:<a name="书签名"></a>
                  <a>标记中的内容可有可无,书签名不能有空格
              2.创建书签链接
                语法:<a href="#书签名">源端点</a>
        脚本链接
          指使用脚本作链接目标端点的链接,通过脚本可以实现HTML语言实现不了的功能
        文件下载链接
          创建文件下载,只要在链接地址处输入文件路径即可,当用户点击链接时,浏览器会自动判断文件类型,做出不同情况的处理
        根据原端点的内容
          文本链接
            源端点为文本的链接
          图像链接
            源端点为图片的链接
          图像映射
            一幅图片中的多个链接
              语法:<img src="img_url" usemap="#map_name">
                  <map name="map_name">
                  <area shape="rect" coords="x1,y1,x2,y2" href="链接地址1">
                  <area shape="circle" coords="x,y,r" href="链接地址2">
                  <area shape="poly" coords="x1,y1,x2,y2,x3,y3..." href="链接地址3">
                  ...
                </map>
              rect表示矩形,circle表示圆形,poly表示多边形
    四、表格
       语法:<table>
            <tr>
              <th></th>
              <td></td>
              ...
            </tr>
            ...
          </table>
      使用<th>创建表头
      在表格标记<table>中可以设置表格宽度width,高度height,边框线border,对齐方式align,背景颜色bgcolor,背景图片background,表格标题caption,单元格间距cellspacing和边距cellpadding等表格属性
      在<tr>标记中可以设置对齐方式align,行单元格背景颜色bgcolor,行边框颜色bordercolor,单元格的垂直对齐方式valign
      在<td><th>标记中可以设置以上各种属性及单元格跨行操作rowspan,单元格跨列操作colspan
    五、表单
      表单标记<form>
        语法:<form name="" method="" action="">
            ...
           </form>
        还有onsubmit(用于指定处理表单的脚本函数),enctype(设置MIME类型,默认值为application/x-www-form-urlencoded。需要上传文件到服务器时,应将该属性设置为multipart/form-data
    get与post的区别

      输入标记<input>
      设置表单元素 文本text,按钮button,密码password,单选框radio,复选框checkbox,文件file,隐藏hidden,提交按钮submit,重置函数reset,图像域image
      选择列表标记<select>
      列表:
        语法:<select name="列表名称" size="显示的选项数目" multiple="multiple">
            <option value="选项值" selected="selected">选项一</option>
            ...
           </select>
          multiple设置列表中的项目可多选
      下拉列表
          一次只能选择一个列表选项,且一次稚嫩显示一个列表选项的选择列表
          语法:<select name="列表名称" >
              <option value="选项值" >选项一</option>
              ...
            </select>
      文本域标记<textarea>
        语法:<textarea name="文本区域名称" rows="行数" cols="字符数">
            ...
            </textarea>
        rows设置的是当前可见行数,如果内容的行数超过这个值,则会出现垂直滚动条

  • 相关阅读:
    springboot配置视图控制器
    springboot测试的方法
    cookie之sameSite
    docker 安装Elasticsearch +kibana
    find + xargs 删除文件名中含有空格的文件
    git,composer 代理
    Composer更新依赖报错Fatal error解决方案
    compose 设置代理 SET HTTP_PROXY="http://192.168.1.103:8080"
    php使用composer常用问题及解决办法集:zlib_decode():data error......
    ERROR: .FileNotFoundError: [Errno 2] No such file or directory: '.\docker-compose.yml:docker-compose.apache.yml'
  • 原文地址:https://www.cnblogs.com/tyjz/p/6622438.html
Copyright © 2011-2022 走看看