目录1. 路径2. 超链接3. 列表4. 表格5. 常用标签补充6. 表单1. 相对路径以当前位置作为参考点去建立路径。注意点相对路径中的./ 可以省略不写。相对路径依赖的是当前位置后期若调整了文件位置那么文件中的路径也要修改。绝对路径以根位置作为参考点去建立路径。1. 本地绝对路径E:/a/b/c/奥特曼.jpg。很少使用2. 网络绝对路径http://www.atguigu.com/images/index_new/logo.png。注意点使用本地绝对路径一旦更换设备路径处理起来比较麻烦所以很少使用。使用网络绝对路径确实方便但要注意若服务器开启了防盗链会造成图片引入失败。2. 超链接 主要作用从当前页面进行跳转。可以实现①跳转到指定页面、②跳转到指定文件也可触发下载、③跳转到锚点位置、④唤起指定应用。href指定要跳转到的具体目标。target控制跳转时如何打开页面常用值如下_self在本窗口打开。_blank在新窗口打开。id元素的唯一标识可用于设置锚点。name元素的名字写在a标签中也能设置锚点。3. 列表1有序列表 概念有顺序或侧重顺序的列表。ol li/li li/li /ol2无序列表 概念无顺序或不侧重顺序的列表。ul li/li /ul3列表嵌套 概念列表中的某项内容又包含一个列表注意嵌套时请务必把结构写完整。h2我想去的几个城市/h2 ul li成都/li li span上海/span ul li外滩/li li杜莎夫人蜡像馆/li li a hrefhttps://www.opg.cn/东方明珠/a /li li迪士尼乐园/li /ul /li li西安/li li武汉/li /ul4自定义列表 1. 概念所谓自定义列表就是一个包含术语名称以及术语描述的列表。2. 一个dl就是一个自定义列表一个dt就是一个术语名称一个dd就是术语描述可以有多个。注意li标签最好写在ul或ol中不要单独使用。4. 表格基本结构 1. 一个完整的表格由表格标题、表格头部、表格主体、表格脚注四部分组成。表格涉及到的标签table表格 caption表格标题 thead表格头部 tbody表格主体 tfoot表格注脚 tr每一行 th、td每一个单元格备注表格头部中用th表格主体、表格脚注中用td。table属性 width设置表格宽度。height设置表格最小高度表格最终高度可能比设置的值大。border设置表格边框宽度。cellspacing设置单元格之间的间距。thead属性 height设置表格头部高度。align设置单元格的水平对齐方式可选值如下1. left左对齐 2. center中间对齐 3. right右对齐 valign设置单元格的垂直对齐方式可选值如下1. top顶部对齐 2. middle中间对齐 3. bottom底部对齐tbody、tfoot、tr同上。td、th属性 width设置单元格的宽度同列所有单元格全都受影响。height设置单元格的高度同行所有单元格全都受影响。align设置单元格的水平对齐方式。valign设置单元格的垂直对齐方式。rowspan指定要跨的行数。colspan指定要跨的列数。rowspan指定要跨的行数。colspan指定要跨的列数。5. 常用标签补充br换行单 hr分隔单 pre按原文显示一般用于在页面中嵌入大段代码。6. 表单form表单包含内容写里面action表单属性指定什么网站搜索后加/starget表单属性是否在新页面打开method表单属性请求方式包含get、postname input的属性用于指定提交数据的名字不同网站的name不同action后加的/?也不同button按钮a侧重跳转form侧重收集用户数据value input的属性设置默认值maxlength input的属性设置最大输入长度单选框type属性值为radio并且二选一name的属性值要一致设置默认值valuechecked属性默认选中复选框type的属性值为checkboxname和value自定义普通输入框不用写value单选框和多选框必须写隐藏输入框的type属性值为hidden确认按钮的两种写法button确认/buttoninput typesubmit value确认按钮框不能加name属性否则失去按钮效果重置按钮两种写法button typereset重置/buttoninput typereset value重置普通按钮button typebutton检测是否?/buttoninput typebutton value普通按钮普通按钮功能设置目前还没有学到注意button的type属性默认为submit提交文本域textarea属性name、cols、rows下拉框select选项用option属性value最好提前设置默认选择用selecteddisabled禁用表单控件属性input、textarea、button、select、option都可以用label标签实现提示文字和表单控件之间的关联两种用法1. 直接将提示文字和表单控件套在里面2. 设置label属性for和表单控件id属性实现关联不限距离fieldset为表单控件分组legend为分组控件设置标题iframe为框架标签属性name与target配合使用frameborder是否显示边框字符实体用一种特殊形式表示某个符号全局属性常用id给标签指定唯一标识注意id是不能重复的。title给标签设置一个文字提示一般超链接和图片用得比较多。meta元信息就是基本信息。表单控件完整示例1. 文本框单行文本输入框!-- typetext指定为单行文本框name提交数据的名字value默认值maxlength最大输入长度placeholder输入提示文字 -- input typetext nameusername value张三 maxlength10 placeholder请输入用户名2. 单选框!-- typeradio指定为单选框name同一组单选框name必须一致才能实现二选一value提交时的值checked默认选中 -- input typeradio namegender valuemale checked男 input typeradio namegender valuefemale女3. 复选框!-- typecheckbox指定为复选框name提交数据的名字value提交时的值checked默认选中 -- input typecheckbox namehobby valuebasketball checked篮球 input typecheckbox namehobby valuefootball足球 input typecheckbox namehobby valueswimming游泳4. 下拉框!-- select下拉框name提交数据的名字option下拉选项value选项提交时的值selected默认选中 -- select namecity option valuebeijing北京/option option valueshanghai selected上海/option option valueguangzhou广州/option /select5. 文本域多行文本输入框!-- textarea多行文本输入框name提交数据的名字cols可见列数宽度rows可见行数高度 -- textarea namemessage cols30 rows5请输入留言内容/textarea作业!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title个人学习/title /head body table border5 cellspacing0 thead tr th colspan7 aligncenter个人信息/th /tr /thead tbody tr td rowspan3 width100 heigth100 img src./通达校徽.jpg title这是通达校徽 /td td stylewidth: 65px; background-color: skyblue; 姓名/td td form input typetext namename placeholder请输入姓名 /form /td td stylewidth: 65px; background-color: skyblue;年龄/td td form select option selected18/option option19/option option20/option /select /form /td td rowspan3 stylewidth: 130px; a hrefhttps://jwxt.nytdc.edu.cn/jwglxt/xtgl/login_slogin.html target_blank前往查询个人课表/a /td td rowspan3 stylewidth: 110px; span学习目标/span ol li勤学善思/li li笃学力行/li li慎思笃行/li /ol /td /tr tr td stylewidth: 65px; background-color: skyblue; aligncenter valignmiddle性别/td td form input typeradio namegender valuemale checked男 input typeradio namegender valuefemale女 /form /td td stylewidth: 65px; background-color: skyblue;专业/td td form select option selected计算机科学与技术/option option软件工程/option option物联网工程/option /select /form /td /tr tr td stylewidth: 65px; background-color: skyblue; alignright 爱好/td td form input typecheckbox namehobby valueread阅读 input typecheckbox namehobby valuelisten听歌 input typecheckbox namehobby valuerun跑步 input typecheckbox namehobby valuecode checked敲代码 /form /td td stylewidth: 65px; background-color: skyblue; valignbottom自我介绍/td td form textarea namezwjs placeholder我喜欢敲代码希望认识很多朋友/textarea /form /td /tr tr td colspan7 aligncenter form button提交个人信息/button /form /td /tr /tbody /table /body /html !-- 占位符是placeholder --