html笔记

HTML 作用就是用标记标签来描述网页,把网页内容在浏览器中展示出来。

html常用的标签

    <b>加粗标签</b>
    <i>斜体
    
    <strong>加粗标签</strong>
    <em>斜体</em>
    
    <del>删除标签</del>
    
    <sup>上标字</sup>
    
    <pre>预格式话文本标签</pre>
    
    <blockquote>引用块,比如引用别人的名言</blockquote>
    
    <abbr title="英雄联盟">lol</abbr>
    
    <ruby>陈<rt>chen</rt></ruby>
    
    <mark>带标记的标签</mark>
    
    <mylove>我是自定义标签</mylove>
    
    <details>
        <summary>隐藏内容的标题</summary>
        <p>woshineirongyi</p>
    </details>

实体字符

大于号:&gt;
小于号:&lt;
空格符:&nbsp;
引号:&quot;
注册商标:&reg;
版权:&copy;
&符号:&amp;

a标签

link(未被访问的链接) visited(以被访问的链接)
hover(鼠标移到链接上) active(正在被点击的链接)

href:地址
target:跳转方式
    _self:(默认值)在当前页面打开链接
    _blank:跳转到新窗口
作用:
             1.页内跳转:
             2.空链接
             3.实现下载(不安全)

无序列表 ul (重点)

无序列表的各个列表项之间没有顺序级别之分,是并列的。其基本语法格式如下:

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>

脚下留心:

 1. <ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
 2. <li>与</li>之间相当于一个容器,可以容纳所有元素。
 3. 无序列表会带有自己样式属性,放下那个样式,一会让CSS来!

有序列表 ol (了解)

有序列表即为有排列顺序的列表,其各个列表项按照一定的顺序排列定义,有序列表的基本语法格式如下:

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ol>

自定义列表(理解)

定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。其基本语法如下:

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ...
</dl>

创建表格

在HTML网页中,要想创建表格,就需要使用表格相关的标签。创建表格的基本语法格式如下:

<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>

在上面的语法中包含三对HTML标签,分别为 <table></table>、<tr></tr>、<td></td>,他们是创建表格的基本标签,缺一不可,下面对他们进行具体地解释

1.table用于定义一个表格。

2.tr 用于定义表格中的一行,必须嵌套在 table标签中,在 table中包含几对 tr,就有几行表格。

3.td /td:用于定义表格中的单元格,必须嵌套在<tr></tr>标签中,一对 <tr> </tr>中包含几对<td></td>,就表示该行中有多少列(或多少个单元格)。

注意:

1. <tr></tr>中只能嵌套<td></td>
2. <td></td>标签,他就像一个容器,可以容纳所有的元素

表头标签

表头一般位于表格的第一行或第一列,其文本加粗居中,如下图所示,即为设置了表头的表格。设置表头非常简单,只需用表头标签<th></th>替代相应的单元格标签<td></td>即可。

合并单元格(难点)

跨行合并:rowspan 跨列合并:colspan

合并单元格的思想:

​ 将多个内容合并的时候,就会有多余的东西,把它删除。 例如 把 3个 td 合并成一个, 那就多余了2个,需要删除。

​ 公式: 删除的个数 = 合并的个数 - 1

合并的顺序 先上 先左

热区:通过map地图的名字与图片关联起来

        属性:shape:定义地图形状,coords定义地图坐标,href:定义地图链接地址
        定义地图坐标方法:
            矩形地图rect:测量矩形左上角的坐标,从大图的左上角开始到目标地图左上角的距离即是矩形左上角的坐标值,
                        测量矩形右下角的坐标,从大图的左上角开始到目标地图的右下角的距离即是矩形右下角的坐标值,
                        然后按从左到右的顺序依次写坐标值(注意先写x轴坐标再写y轴坐标),坐标值之间用逗号隔开。
            圆形地图circle:测量目标地图的圆心坐标,从大图的左上角开始到目标地图的圆心的距离即是圆心的坐标值,
                        依次将坐标值写入coords这里,第三个参数是目标地图的半径。
            自定义形状poly:测量目标地图的坐标从左上角的角开始测量,依次测量出每个角的坐标值,写入coords,完成。         
    <img src="img/map.jpg" usemap="hotmap"/>
    <map name="hotmap">
        <area shape="rect" coords="181,120,279,204" href="景点一.html" alt="" />
        <area shape="circle" coords="184,500,50" href="景点一.html" alt="" />
        <area shape="poly" coords="234,282,267,350,201,350" href="" alt="" />
    </map>

iframe:引入其他页面

src:需要引入的目标页面的路径
            frameborder:iframe的边框
                0/no:表示隐藏边框
                1/yes:表示显示边框
            scrolling:iframe的滚动条
                no:表示隐藏滚动条
                yes:表示显示滚动条
                auto:自动
                
        优点:提取网站公共部分,比如底部的信息
        缺点:不利于搜索引擎优化,百度爬虫不能识别iframe引入的页面的内容。
    <img src="http://img1.3lian.com/2015/a2/53/d/25.jpg"/>
    <iframe src="1、热区.html" width="100%" height="50%" frameborder="0" scrolling="auto"></iframe>
    <iframe src="http://www.baidu.com" width="100%" height="50%" scrolling="no"></iframe>

语义化标签

header nav section article footer

表单和表单元素

  action:提交数据给后台的路径
        method:提交表单的方式
            get:提交内容显示在地址栏,通过?连接在提交地址的后面,对于有敏感信息的数据不适合用get方式提交(不安全)。
            post:一般适合用于敏感信息的数据提交,适合数据比较多的时候使用。
        enctype:定义表单提交数据的格式
  表单元素类型type(默认为text)
                    radio:单选按钮,可以通过label关联到文字
                    text:文本框
                    password:密码
                    CheckBox:复选框
                    submit:提交按钮
                    reset:重置按钮
                    image:提交表单按钮
                    button:普通按钮
                    hidden:隐藏域
                    file:上传文件(提交表单方式用post,定义表单的数据格式为enctype="multipart/form-data")
                    
                required:表示此文本框是必填项
                placeholder:用户提示语
                readonly:表示只读
                disabled:禁用
                readonly和disabled的区别,1、页面显示样式不一样,2、readonly可以提交数据到后台,disabled不能提交数据到后台
                maxlength:输入内容的最大长度
                size:定义input框的大小
                checked:复选框默认选项
                accept:定义文件上传类型
                color:拾色器
                    data:日期控件
                    email:定义邮箱字段,判断邮箱地址格式是否正确
                    number:只能输入数字
                    search:搜索框
                    ulr:定义url文本字段,提交表单时会检测url地址格式是否正确
                多行文本域
                rows:定义多行文本域的行数
                cols:定义多行文本域的列数
                浏览器不能解析多行文本域里面的标签的
                resize:none;禁止用户拉伸文本框

媒体标签

音频audio
            src:音频路径
            autoplay:音乐自动播放
            controls:音乐控制器,比如播放按钮等
            loop:循环播放音乐
            preload:页面加载时进行加载,当设置了autoplay时,此属性不起效。
video视频
            poster:设置视频播放前的封面
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,847评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,208评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,587评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,942评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,332评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,587评论 1 218
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,853评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,568评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,273评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,542评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,033评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,373评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,031评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,073评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,830评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,628评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,537评论 2 269

推荐阅读更多精彩内容

  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 3,362评论 0 0
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    X先生_未知数的X阅读 15,937评论 3 118
  • 在打开《白夜行》之前,听很多人说起过这本书,无论是因为作者东野圭吾讲述故事的手法还是因为作品本身的沉重。 在打开《...
    BJ_dream阅读 194评论 0 0
  • 感觉p4有点悬了,计算怎么也算不对,文字题也没有思路……
    做一个会写诗的女子阅读 88评论 0 0
  • 好的昨天下午写的东西有点戏精了,下面我改进一下,捞点干货说说。理财习惯的养成可以从记账开始。记账不一定要事无巨细,...
    暖暖的小南阅读 96评论 0 0