web前端开发基础班课堂笔记第二天

1、无序列表ul

<ul><li></li></ul>ul中只能包含li
ul属性type有多种效果,样式CSS效果更好

1.1、有序列表ol

<ol><li></li></ol>ol中只能包含li
运用较少可用表格或者ul代替

1.2、自定义列表dl

<dl><dt>标题</dt><dd>内容</dd></dl>
dd对dt进行描述或者解释

  1. dl里面只能有dt和dd标签
  2. dt和dd一对多的关系 一个dt可以对应着多个dd
  3. 一个dl里面可以有多个dt和dd
    dl>dt>dd按下Tab键快速生成嵌套标签
    展现了语义化
2、认识表格

处理数据,不是用来布局 布局可用div
<table><tr><td>1</td><td>2</td></tr></table>
tr代表行 td代表列 (嵌套关系)非并列

2.1、表格属性

border 边框 border="数字"
cellspacing 设置单元格与单元格边框之间的空白间距
cellspadding 设置单元格内容与单元格边框之间的空白间距
width 设置表格的宽度 height设置表格的高度
align 设置内容在容器中的位置 center left right

2.2、表头标签和合并单元格

表头标签 <th></th>
合并单元格属性
rowspan="数字" 跨行最上侧单元格 添加该属性
colspan="数字" 跨列最左侧单元格 添加该属性

2.3、表格结构和表格标题

<thead></thead><tbody></tbody><tfoot></tfoot>
tfoot兼容性较差 html5不支持
用于较大表格,具有加载优先级作用
<caption>表格标题</caption> 定义表格标题

2.4、表格总结
  1. 表格提供了HTML中定义表格数据的方法
  2. 表格中由行中的单元格组成
  3. 表格中没有列元素,列的个数取决于行的单元格个数
  4. 表格不要纠结于外观,那是CSS的作用
3、认识表单

由表单域 提示文本和表单组成

3.1、input及属性

<input type="属性值" />
type属性 text 单行文本输入框
password 密码输入框
radio 单选按钮 checkbox 复选框

button 普通按钮 submit提交按钮 用value属性键入按钮值
reset 重置按钮 file 文件域(上传图像)
image 图像按钮(type值)
<input type="image" src="图片路径" alt="" />

name 用户自定义属性
value input控件中的默认文本值
maxlength input控件允许输入的最多字符数
checked 定义控件默认被选中的项目
<input type="radio" name="sex" />
如果是多选一需要指定相同的name为一组

3.2、label标签

直接用label包裹
<label>用户名:<input type="text" /></label>
指定表单(for id选中)
<label for="no2">用户名:</label> <input type="text" /><input type="text" id="no2" />
这样,我们就可以通过点击用户名实现光标介入输入框

3.3、textarea文本域

<textarea cols="每行中的字符数" rows="显示的行数" > 文本内容</textarea>

3.4、下拉列表Select(运用较少)

<select><option></option></select>
兼容性较差,各浏览器解析不同展现效果不同
默认选中用selected="selected"属性添加至option标签
select标签中至少包含一对option标签

3.5、表单域

<form action="后台url地址" method="get/post" ></form>

4、多媒体embed

上传至视频网站然后复制embed地址放至自己的网站即可

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

推荐阅读更多精彩内容

  • Bootstrap是什么? 一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。GitHub上介绍 的...
    凛0_0阅读 10,843评论 3 184
  • HTML需要掌握标签 标签(空格分隔): H5+CSS [TOC] 常用标签 img 注意点 和H系列标签/p标签...
    袁俊亮技术博客阅读 2,044评论 1 8
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,224评论 1 41
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    程序员poetry阅读 16,510评论 32 459
  • img标签 功能:告诉浏览器需要显示一张图片; 参数:width、height、src、title、alt;wid...
    Latte_Bear阅读 541评论 0 0