HTML随笔记录(一)

首先html中允许元素使用大写元素。

标签(元素)不区分大小写
元素可以省略结束标签。
元素属性可以省略属性值
属性值可以不用引号

HTML5支持的两种指定页面使用的字符集的方式。

首先是是使用Content-type指定字符集,或者直接使用charset的指定字符集

< meta http-equiv=“Content-Type” content=“text/html ; charset=gb2312” >
gb2312是为了防止乱码。
< meta charset=“gb2312” >

网页类型分为动态和静态的。
前者主要是 .jsp .php .asp .aspx
后者主要是 .html 和 .htm(dos系统保留)

< title >用于给你写的网页定名字。
< base >该文档所有的链接的默认地址或者默认目标。使用相对路径的时候比较有用。
< link >中的三个重要属性主要有三个:rel,href,type
rel用于规定文档与被连接文档之间的关系。
ex:rel="dns-prefetch"预先解析缓存文档中使用的域名,目的是为了提高网页访问速度,
当一个网页频繁使用其它域名资源的时候特别有用。
href 用于资源的路径
type规定被连接文档的打开方式。
< meta >一般放在head中,定义元数据,主要有http-equiv、name、content
http-equiv是把content属性值关联到http头部,常见的属性值有Content-Type
(浏览器接受的文档类型,一般是text/html)expires(设定网页到期时间)
refresh(网页刷新)
name把content属性关联到一个名称,content定义前两者属性相关的元信息,是必要的。

<!DOCTYPE html>
<html>
    <head>
        <title>this is my first web</title>
        <link rel="shortcut icon" href="images/tianmao.ico" type="image/x-icon"/>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
        <meta name="keywords" content="various develop"/>
        <meta name="description" content="what's this?"/>
        <meta http-equiv="expires" content="1 Agu 2018"/>
        <meta http-equiv="refresh" content="3"/>
    </head>
</html>

< div >块级标签通常用于布局
通常使用id和class为标签的类标识,可以通过id和
class对div的样式进行设置,id是唯一的标签标识,class为标签的类标识。
相当于一个容器,而其大小由其内容决定,默认情况下高度由内容的高度决定,宽度自动适应屏幕。

< font >控制文本的大小、颜色和字体。

< h1 >到 < h6 >字体大小依次递减。

特殊字符:
空格:&nbsp;
引号:&quot;
小于:&lt;
大于:&gt;
版权号:&copy;

图片 < img >中的几个属性
alt 图片找不到时要替换的文字。如果图片资源使用的是外网资源,
则不会显示要替换的文字。如果使用的是本网站的资源(相对路径给出),
则找不到图片时会显示替换的文字,并保留图片设置的宽高结构。
align 图片周围文字的垂直对齐情况。该属性的使用已经过时了。要让图片和文字对齐、
,通常的做法是让图片称为一个标签的背景。如京东商城。
常用的属性值有:top(与图片的顶部对齐)、middle(与图片的中部对齐)、
bottom(默认,与图片的底部对齐)使用场景:图片的左右两边没有文字,
文字在图片上部或文字在图片的下部。如果图片的左右两边有文字的话,
一般通过给一个标签(可以使用文字标签标签)设置背景图片的形式来实现。

< span >用来组合行内元素,一边用样式来格式化他们。

< i >显示斜体 通常使用它来显示图片和背景照片。

< em >和< i >很类似,但是前者主要用来修饰文字,后者用来修饰照片

< dl >一般搭配< dt >(标题,可文可图)和 < dd >(对标题的描述)一起使用。

< table >表格标签中的属性:
align(水平对齐方式)、bgcolor(背景颜色)、border(表格的边框)、
cellpadding(单元格与内容之间的距离)、cellspacing
(单元格的间距,设置为0时,表格变为实线表格)、
width(表格的宽度,可以用%或者像素)。

< caption> 表格的标题 < thead> 表格头部< tbody> 表格主体部分。使结构更加分明。

表格的跨行跨列显示:rowspan(跨行)、colspan(跨列)

水平分割线:< hr >
< hr size=“5”(线的厚度) color=“red”(线的颜色) width=“300”(线的宽度)>

< a >标签锚标记
html的name属性用于创建锚标记。< a name=“marker”>Name< /a>
为了达到这种跳转效果,请在href参数中使用该标记。< a href="#marker">Name< /a>

<!DOCTYPE html>
<html>
    <head>
        <title>链接到其它的页面</title>
    </head>
    <body>
        <a href="#helpme">this</a>
        <!--
            ...content
        -->
        <a name="helpme">here</a>
    </body>
</html>

滚动< marquee >
< marquee scrolldelay=“100” direction=“up” >
(滚动文字或者图像 前者为滚动延迟时间(默认值为90)
后者为滚动对象的方向(默认从右向左))
< /marquee >

表单元素中

<!DOCTYPE html>
<html>
    <body>
        <form action="http://www.sohu.com" method="POST">
            <input type="text" />
            <input type="password" />
            <input type="hidden" />
            <input type="radio" />
            <input type="checkbox" />
            <input type="file" />
            <input type="button" />
            <input type="reset" />
            <input type="submit" />
            <input type="image" />
            <textarea rows="5" cols="40">
            </textarea>
            <select>
                <option></option>
            </select>
        </form>
    </body>
</html>

配合解释:
在这里插入图片描述

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值