热门关键字:
jquery > jquery教程 > jquery教程 > HTML基础语法学习

HTML基础语法学习

362
作者:管理员
发布时间:2021/3/1 14:41:30
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=4035
  1.HTML (Hypertext. Markup Language) – 超文本标记语言


  2.标记语音 – 在不同的文本中加不同的标记让文本的意义和功能不同,例如:markdown,html


  3.HTML大小不敏感:html=Html=HTML=hTml(小写和大写功能一样)


  4.web标准


  w3c针对网页开发指定了web标准


  (1)结构标准 – html,负责网页内容的显示


  (2)表现结构 – css,负责网页内容的样式和布局


  (3)行为标准 – js,负责网页内容的变化


  5.结构标准 – html(超文本标记语言)


  html代码写在后缀是。html的文件中,一个html文件表示一个网页


  网页内容:文字,图片,超链接,输入框,按钮,视频,音频,flash…


  网页结构:整个网页是一个html标签,html中有head和body两个兄弟标签


  html标签 – 表示整个网页


  head标签 – 表示网页的顶部


  body标签 – 表示网页内容部分


  1.就是标记,不同的标签功能不一样


  2.标签是html的基本结构,不同的标签功能不一样


  3.语法:


  双标签(标准标签): <标签名 属性1=属性值1 属性2=属性值2 …>标签内容</标签名>


  单标签: <标签名 属性1=属性值1 属性2=属性值2 …>或者<标签名 属性1=属性值1 属性2=属性值2 …/>


  4.说明:


  a.<>和/ – 固定写法


  b.标签名 – 标签名是html规定好的,单标签和双标签也是固定的


  注意:标签名前后不能随意添加空格


  c.属性 – 以 属性=属性值 的形式存在,多个属性之间用空格隔开;不同的标签属性是确定的;属性值不管是什么值都必须放在""中


  d.标签内容 – 双标签开始标签和结束标签中间的部分就是标签内容;


  标签内容很灵活,可以是独立的文本,也可以是一个标签,还可以多个标签或者多个标签和文本的组合


  (1)从可见性来分:


  可见标签:p,a,img标签


  不可见标签:meta,style,script,link标签…


  (2)head和非head中的标签(body标签)


  head中标签:


  meta,title,style,link,script,base


  body标签:p,a,b,img,table,lable,ul,ol,li…,style,link,script,base


  1.head中可以使用的标签: meta,title,style,link,script,base


  2.meta标签 – 网页元数据,主要用来对网页进行基本设置,包括:设置文本编码方法,设置网页搜索关键字,网页简介


  3.title标签 – 网页标题


  4.link标签 – 导入外部文件(导入图片作为网页图标,导入外部样式表)


  5.link标签的使用


  rel属性 – 设置导入文件的作业


  stylesheet:外部样式表 icon:网页图标


  type属性 – 指定导入文件的类型和后缀 文件类型/后缀名


  text/css:导入一个后缀是。css的文本文件


  image/png:导入一个后缀是。png的图片文件


  href属性 – 设置被导入的文件的路径


  6.文件路径的写法:


  1.绝对路径:文件在计算机中的全路径


  2.相对路径:


  (1)使用。表示当前目录(当前写代码的文件对应的目录地址表示当前目录)


  。 – 表示当前目录


  (2)使用…表示当前目录的上层目录


  (3)使用…表示当前目录的上层目录的上层目录


  1.标题标签:h1——h6


  如果文本的意义是标题的时候就选标题标签


  2.段落标签:p


  一个段落就对应一个p标签


  3.其他的普通文字标签:font,span


  size属性–设置字体大小


  color属性–设置字体颜色


  4.文本效果相关的标签和符号


  html中手动敲回车无用,手动添加空格也没用


  如果需要在内容中加换行,孺要添加


  标签


  如果需要在内容中加空格,需要使用html符号:?(一个像素) ?(一个空格)


  加粗:b标签,strong标签(有强调的意思)


  倾斜:i标签,em标签(有强调的意思)


  1.无序列表:ul-li


  ul标签 – 表示整个容器


  li标签 – 列举容器中所有的元素


  2.有序列表:ol——li


  ol标签 – 表示整个列表


  li标签 – 表示列表中的元素


  3.自定义列表:dl-dt-dd


  dl – 表示整个列表


  dt – 分类


  dd – 每个分类中的元素


  1.图片标签:img


  src属性 – 图片地址


  可以是本地图片的相对路径;也可以是是网络的图片地址


  title属性 – 设置图片标题(鼠标悬停在图片。上的时候才会显示)


  alt属性 – 图片加载失败的提示信息


  空 – 刷新(重新加载页面)


  2.超链接


  (1)标签内容 – 超链接可点击可看见的部分


  (2)href属性 – 跳转目的地


  网页的地址 – 直接跳转到指定的网页


  本地的html文件路径 – 直接打开HTML文件对应的页面


  id选择器(id属性值前加#) – 将当前页面滚动到id选择器指定的位置


  (3)target属性 – _self(默认值),在当前页面中加载新的页面


  _blank,在新的窗口中加载新的页面


  1.表格标签:table-tr-td


  table标签 – 表示整个表格


  tr标签 – 表示一行


  td标签 – 表示一个单元格


  table:


  border属性:设置边框线的宽度(默认值是0)


  cellspacing属性:设置单元格和单元格之间的间隙(默认是1)


  cellpadding属性:设置表格内容和边框之间的距离


  bgcolor属性:设置整个表格的背景颜色


  height width:高度 宽度


  align属性:left right center;设置整个表格在网页中的居中方式


  colspan属性:列的合并


  rowspan属性:行的合并


  表单标签:form


  是一个容器标签,本身单独用没有意义,一般需要结合表单相关的标签(input,select,textarea)来使用


  它可以对表单标签中所有用户信息收集相关的标签的内容进行整体的重置和提交


  action属性 – 后端数据接口的地址


  method属性 – 请求方式(get/post)


  input是表单相关标签,可以放在form标签中做数据的提交和重置


  1)type属性 - 设置标签类型


  1.下拉列表:select-option


  name属性 – 是select属性,用于提交的区分


  value属性 – 是option属性,表示当前选项的选项值和提交数据


  select属性 – 是option属性,设置默认选中的项


  option标签内容 – 用来展示选项


  2.select-optgroup-option – 选项分组标签


  3.多行文本域 – textarea


  rows属性 – 设置一次最多能显示的行数(默认2)


  cols属性 – 设置一行的列数


  name属性 – 用于区分和提交


  maxlength – 限制最大输入字符的个数


  div和span本身无语义,也是html中比较轻量级的标签


  1.span? –? 用于一行显示多个内容的时候


  2.div? –? 主要用于界面标签的分块和分组




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jquery
友荐云推荐