HTML:初学笔记1

元素、标签、属性:

        html中的代码最基础的分类是元素、标签、属性,三者关系是元素>标签>属性。各个元素组成一个完整的html文件,标签在元素中为编写者实现功能,属性是包含在标签中的修饰性关键词,对已有功能进行补充、修饰、限定。

html文件的基本组成元素:

一个html文件的基本组成元素是:声明、开始、头部、身体

最基础的html文件

<!DOCTYPE html> -------声明一个html文档

<html lang="en">-------网页开始的部分

<head>-------网页的头部

    <meta charset="UT-8F">

    <meta name=""viewport" content="width=device-width, intial-scale=1.0">

    <title>这是一个网页</title>

</head>

<body>

    hello  world   

</body>

        1.声明<!DOCTYPE htm>

                DOCTYPE是document type的简写,它并不是 HTML 标签,也没有结束标签,它是一种标记语言的文档类型声明,即告诉浏览器当前 HTML 是用什么版本编写的。

        2,开始<html lang="en">

                意为该html文件开始运行的标志

        3.头部<head>

                它的作用是保存页面的一些元数据,包含了诸如页面的 <title>(标题)、指向 CSS 的链接(如果是用 CSS 来为 HTML 内容添加样式)、指向自定义网页图标的链接和其他的元数据(描述 HTML 的数据,比如作者和描述文档的重要关键词)等信息。

        4.身体<body>

                它是整个html文件的主体,编写时将包含网页的各类功能要素,如超链接、图像、表格、列表。

标签:

        标签分为单标签和双标签,双标签大致形如<■■■■>.......</■■■■>,其中</■■■■>是该■■■■标签的结束符,单标签类型的标签没有结束符

各类常用标签:

        以下将提及各类常用标签并打出标准(?)格式,没有对应结束符的为单标签类型。

        字体加粗标签(strong、b):

                <strong>.....</strong>

                <b>.....</b>

        换行标签(br):

                <br>

        分割符标签(hr):

                <hr>

        段落标签(p):

                <p>.....</p>

                两个相邻的p标签中间会空一行,可搭配align属性、font标签、color属性。

        文本修饰标签(sub、sup、pre、span):

                <sub>...</sub>作用为添加上角标。

                <sup>...</sup>作用为添加下角标。

                <pre>.....</pre>作用为将其包含的文本内容原样输出在网页页面,因为html在编写的需要输出的文本在输出时不会自动换行、无视空格等

        标题标签(hn):

                <hn>....</hn>

                n为数字1~6,前后必须对应,会给予文本加粗、字号增大效果,n越大,字号加粗效果越弱。

        区块分割标签(div):

                标准的块级标签,用于定义 HTML 文档中的一个分割区块或一个区域部分会组合块级元素,以便通过 CSS 来对这些元素进行格式化。

        表单标签(form):

                <form>....</form>

                form 标签 一般会和 input 标签连用。

        输入框(键入)标签(input):

                <input>

                <input type = " 元素的类型 " name = " 元素的名称 " value = " 元素的值 " >

                一般与 type、name、value属性连用。

                input标签常用的属性:

                        checked ---- 默认选择
                        readonly ------ 只读 字段只可以读不能修改
                        disabled ----- 禁用 不可以点击
                        autofocus ------ 默认光标的位置
                        required---- 不能为空白提交

                type的取值:

                        text ------ 文本框
                        password ---- 密码框
                        radio ---- 单选按钮
                        checkbox ----- 多选按钮
                        submit ---- 提交按钮
                        reset ----- 重置按钮
                        button ----- 普通的按钮
                        image ---- 图像按钮
                        file ---- 文件域
                        hidden ----- 隐藏域
                        email ------ 邮箱
                        color ----- 颜色域
                        date ----- 日期
                        time ------ 时间
                        datetime-local ------ 日期+时间
                        range ---- 进度条

        下拉表框标签(select):

                <form action=" ">

                        <select name="" id="" multipe>

                                <option value="">□□</option>

                                <option value="" selected>□□</option>

                </form>

                下拉列表框一般和option标签进行连用

                selected属性默认被选中的选项

                multiple属性以列表的形式显示

        文本域标签(textarea):

                        <textarea name=" " id=" " clos=" " rows=" ">....</textarea>

                        clos设置多少列,rows设置多少行,也就是设置文本域(框)的大小。

        超链接标签(a):

                <a target=" ">.....</a>

                a标签 ----- 超文本链接标签 ----- 用来进行页面跳转 herf = "url" 跳转页面的路径

                target属性用于设置该超链接的打开方式:_blank-新窗口打开、_self-默认当前窗口打开、_parent-在父框架打开,_top-在整个窗口中打开

        图片标签(img):

                <img src=" ">

                通常与以下属性搭配:

                        src-图片的地址路径

                        alt-图片备注,用于图片未加载成功时,用于描述图片内容

                        width-设置图片宽度(X轴)

                        height-设置图片高度(Y轴)

                        border-图片边框像素,默认为0

                        align-位置

                        图片在页面的位置:top (上对齐) middle(居中对齐) bottom(下对齐 默认值) left(左对齐) right(右对齐)

                        title-图片标题,用于描述图片的文字

        位图属性:

                usemap属性
                map标签的name 属性,一般会和 area 标签进行连用
                属性:shape ------- 鼠标点击的形状
                coords ----- 鼠标点击形状的大小
                href ------ 表示跳转的路径

表单元素(form):

                通过表单标签(form)与相关属性可以组成单选多选的表单功能

颜色表示法

        1、英文单词

        2、#rrggbb

        3、 rgba() a 表示透明度

table标签/表格标签:

<table>
    <tr>
        <td>
        ....
        </td>
    </tr>
</table>

      "tr"行,'td"列,表格可以嵌套,嵌套也需要在打全整个表格的关键标签即<table>与</table>。

        表格合并  :

                表格的单元格合并需要用上合并元素:(rowspan="n")-在垂直方向合并n个单元格,;(colspan="n")在水平方向上合并n个单元格,n取正整数。 被合并的对应单元格在html的代码页面对应位置空出。

        表格通常搭配的属性有:

width(宽)、height(高)、align(对齐方式)、bgcolor(背景颜色)、  background(背景图片)、cellpadding(表格边距-元素与单元格边框的距离)、cellspacing(表格间距-单元格与单元格之间的间距)       

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值