html标签

排版标签

  • h1-h6标签
    标题语意:重要性递减 h1 尽量少用
  • p 段落标签
    标题语意:分段 会自动换行
  • hr:水平线标签 单标签
  • br 打断换行 单标签
  • div 盒子标签
  • span 跨度范围

文本格式标签

  • b 加粗标签
  • strong 加粗标签 加粗有两个标签推荐使用这一个标签
  • i 倾斜标签文字倾斜
  • em 推荐的倾斜标签
  • s 删除的标签 文字上划线
  • del 删除标签 推荐使用
  • u 下划线标签
  • ins 推荐是有的下划线

属性标签

  • age 格式 <标签名 属性= ’‘ 属性’‘> 内容<属性>

1.标签可以有多个属性。

  1. 属性之间不分先后顺序,标签与属性、属性与属性之间均以空格分开
  2. 任何标签的属性值都有默认,省略该属性则取默认值

图像标签

  • img
  • 外部连接 百度
    连接必须有href 属性 路径就是http地址

  • 内部链接 只需要写上页面或者名称就可以了,不要网络后缀名

锚点定位

  • 适合于较长的页面,我们可以点击关键词到一个关键位置
  • 注意的两点
    1 使用 《a href =“#id名”》链接文本《/a》创建链接文本
    2 使用相应的id名标注跳转目标的位置

base标签

  • 设置页面的链接都在新窗口中打开
  • head标签中

特殊字符标签

  • &nbsb 空格标签
  • < 小于符号 > 大于符号
  • 这里符号就不说了 到时候直接查表

注释标签

  • 多使用注释是很好的代码习惯
  • 注释标签里面的内容是程序员看的 不是给浏览器看的
  • < !-- 这是注释 -->

路径

相对路径

  • 图像文件夹和HTML 文件夹位于同一文件夹;只需要输入图像文件的名称就可以了例如:《imge src = “logo.gif/》”
  • 图像文件位于HTML 文件的下一级文件夹;输入文件夹和和文件名,之间用/隔开如:《img src = “img/img01/logo.gif/》”
  • 图像文件位于HTML文件上一级文件夹;在文件名之前加“../”,如果是上量级,则需要使用“../../”,以此内推,如《img src = "../logo.gif"/》

绝对路径

  • “d:\web\img\logo.gif”,或者完整的网络地址,如“http://www.itcast.con/images/logo.gif”

列表标签

  • 无序列表 ul
    格式《ul》《li》《/li》《/ul》里面li标签
    注意点:
    1 ul 里面只能放li标签
    2 li 标签里面可以放任意的标签
  • 有序列表ol
    格式《ol》《li》《/li》《/ol》里面li标签
    注意点:
    1 ul 里面只能放li标签
    2 li 标签里面可以放任意的标签
  • 自定义列表 dl
    格式:《dl》《dt》《dd》《/dd》《/dt》《/dl》
    dl 里面放dt dt相当于标签 dt里面放dd dd相当于标签的内容
    一般用于 页面的底端结构

表格标签

  • 表格标签 table
    不是用来布局的,是用来像股票布局之内的地方

    格式:《table》《tr》《td》项目1《td》《td》项目2《td《/tr》《/table》
    注意:table 里面只能放tr 标签 tr标签里面只能放td标签 td 里面可以放任何标签

  • 表格的属性
    属性 含义 单位
    border 设置表格的边框 像素
    cellspacing 设置单元格于单元格边框之间的空白距离默认 2像素
    cellpadding 设置单元格于单元格边框的空白间距默认为1像素
    align 设置单元格的对其方式 left center right

  • 表头标签 th
    表头一般位于表格的第一行或第一列,其文本加粗剧中。设置表头非常简单,只需用表头标记《th》《/th》替换相应单元格的《td》《/td》就可以了

  • 表的结构 表头:《thead》《/thead》
    表体:《tbody》《/tbody》

  • 表格标题 《catption》《/catption》 写在表格table里面

  • 合并单元格
    rowspan 跨行合并《td rowspan = “2”》 合并两行《td》
    colspan 跨列合并格式 《td colspan = “2”》 合并两列《td》

表单标签

如银行开户表单, 表单标签主要用来搜集用户信息
表单由3部分组成

  • 表单空间:包含两具体的表单功能项,例如单行文本输入框、密码
  • 提示信息 : 一个表单中通常还需要包含一些说明性的文字,提示用户进行填写和操作
  • 表单域: 它相当于一个容器,用来容纳所有的表单控件和提示信息,可以通过他定义处理表单数据所用程序的url地址,以达到数据提交到服务器的方法。如果不支持制定一表单域,表单中的数据就无法传送到后台服务器。

表单控件

input 控件

  • 单标签控件
  • inpt 里面就可以堪称变色龙的 可以通过type 属性变化形状
tye的属性
  • week 星期
  • month 年和月
  • data 年月日
  • time 时间
  • range 区域滑块
  • search 搜索
  • url 网址
  • number 数字
  • tel 电话
  • emal 邮箱
  • text 文本
  • password 密码
  • radio 单选按钮
  • checkbox 单选框
  • button 按钮
  • submit 提交
  • reset 重置按钮
  • image 图像形式的提交按钮
  • file 选文件
name 用户自定义

value 用户自定

size 正整数

checked checkend

maxlength 最大长度

  • 默认选中项目 chenck = “chenck”

label 点一行都可以输入

  • 例子《label》请输入账号《intput/ type=‘text“》《/label》
  • 例子《label from=“two”》请输入账号《intput/ type=‘text“》 《intput/ type=‘text“,id = “two”》《/label》 这样点击后光标会到id = two 的input 中

textarea 控制文本域

  • 输入大量的信息,类似ios 的textView

下拉菜单

  • select

1 selected 中至少包含一个option

2 optin 中 selected = ”selected“ 为默认选中

表单域

我们现在学了三个域名

  • 文本域 textarea 相当于ios textView
  • 文件域 input type = “file”
  • 表单域 搜集表单控件信息,并且提交
  • url 是提交的地址, metod 是提交的方式 post 或者 get name 就是提交的参数

datalist html5的新功能 类似百度的搜索有选择其他的功能


    
        
        
        
        

    

html 新增的属性

  • pleasehold input 站位文字
  • autofocus input 自动获取焦点
  • multiple input 多文件上传
  • autoncomplete input 有提交按钮,有名字 提交后会记录上次写的东西
  • required input 必须要填写的参数
  • accesskey +s input 获取焦点

多媒体标签

embed :标签定义嵌入的内容 《embed = src“地址”》
audio:播放音频《audio src = “地址” autoplay controls loop=”2“》《/audio》
autoplay 自动播放
controls 显示控制条 这里可以停止 快进等
loop = -1 无限循环,loop=2 播放两次

    audio 在不同的播放器上有不同的兼用,为了考虑兼容用以下的方法
    
  • video 播放器 支持ogg MP4 webM格式

你可能感兴趣的:(html标签)