博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML基础
阅读量:4654 次
发布时间:2019-06-09

本文共 2570 字,大约阅读时间需要 8 分钟。

HTML是超文本标记语言,是一门标记语言,是一套标记标签,HTML使用标签来描述网页

1、HTML基本结构及书写规范

HTML书写规范 1.名字用小写字母 2.以英文开头,可以包含英文字母,数字,_,-,不能使用中文 3.驼峰命名     className  第二个单词首字母大写 4.id命名     id只能有一个名字,而且在页面中相同的名字只能出现一次,相当于身份证号码一样 5.class命名     class可以出现多次,而且相同的名字可以有多个,相当于人名一样 标签名+tab:自动补全命令

2、常用的HTML标签(元素)

①标题标签   (独占一行,一般在文章的开头)

   <h1>  </h1>...... <h6> </h6>

  一个页面h1标签一般只出现一次

②段落标签   (段落之间空一行)

  <p> </p>

③加粗标签    (字体加粗)

  <b></b>  只是物理加粗

  <strong> </strong> 不仅加粗,还有利于seo搜索

④斜体标签 (字体倾斜)

  <i> </i>    只是物理斜体

  <em> </em>    不仅斜体,还有利于SEO搜索

⑤换行标签(单标签)

  <br> 或<br/>  文档内容换行

⑥水平线标签(单标签)

  <hr>      在文档中添加一条水平线

⑦特殊符号

  &gt;      大于号

  &lt;     小于号

  &nbsp;  空格符号(连续多个只空一位)

  &emsp;   空位符号

  &amp;  &字符

  &copy;  版权符号

⑧a标签 (链接)

 刷新当前页面   死链接
 锚点(跳转到指定name或id的位置)

⑨图片标签 (单标签)默认图片大小,宽度和高度只指定一个值时,会等比缩放

图片描述,用于seo的搜索

⑩列表

  无序列表

 
  •  

  有序列表 

  自定义列表 

 
列表标题
 

⑪行内元素和块级元素(display:block(块级元素),inline(行内元素),inline-block(行内块级),none(隐藏))

  1、块级元素div display:block;

    可以包含任何块和行内元素独占一行,支持设置宽高

    如果没有设置宽高,高度由内容撑开,宽度默认浏览器宽度

    没有内容,在网页上肉眼看不到东西,但是审查元素,宽度是浏览器宽度,高度0

  2、行内(内联)元素span display:inline;

     可以和其他行内元素位于同一行

    行内元素不要包块级元素不支持设置宽高

    内容撑开宽高

  3、行内块元素 display:inline-block;

    块级元素可以横排展示

    行内元素可以设置宽高

    元素既能设置宽高 也能排在一排

  4、display:none

   隐藏元素,包括他的子标签,在页面中不占位置,等同于消失了,可以设置特定条件显示出来

  <div></div>(块级)

  <span></span>(行内)

⑫table表格(boder-collapse:collapse合并边框)<table border="边框">   

   <thead(表头)>

       
    
     

⑬form表单(用于前后台交互)

    
Title
action 指定当前提交表单向何处发送表单数据 method 默认get post autocomplete自动完成,on输入框会提示 off输入框不会提示 账号:
密码:
required为必填字段 文件上传:
隐藏:
单选框:
男(disabled时不能被选中)
(使用label标签时点击包含在标签内的文字也能选中,提高用户体验)
多选框:
兴趣
唱歌
跳舞
看书
游戏
disabled 禁止选 checked 默认选中
文本域:
提交
重置

 

转载于:https://www.cnblogs.com/wangwei13631476567/p/9158337.html

你可能感兴趣的文章
Redis Windows版安装详解
查看>>
linux后台运行python程序 nohup
查看>>
吴裕雄--天生自然 高等数学学习:对面积的曲面积分
查看>>
css
查看>>
Web应用程序整体测试基础——单元测试
查看>>
通过修改manifest文件来解决Vista/Win7/Win8/win10下应用程序兼容性问题
查看>>
Spark使用总结与分享
查看>>
JMETER - BEANSHELL获取响应结果
查看>>
Line 7.10 : Syntax error
查看>>
[转] 树状数组学习
查看>>
ASP.NET-ActionFilter过滤器用法实例
查看>>
将url的查询参数解析成字典对象
查看>>
Redis与RabbitMQ作为消息队列的比较
查看>>
mybatis实战教程三:mybatis和springmvc整合
查看>>
Java多线程:Semaphore
查看>>
960栅格化优势
查看>>
LSP原则—关于正方形不是长方形
查看>>
Android内核开发 相关工具及源码下载汇总
查看>>
多线程(二)--NSThread基本使用
查看>>
git command
查看>>