您的位置：首页 > Web前端 > HTML

Html 初阶

2020-07-18 04:57 411 查看

下面是整理的笔记

Html

  • Web 软件架构 C/S ( Client/Server客户端/服务器端 ）
  • B/S （Browser/ Server 浏览器/服务器端）
  • 资源分类
      静态资源（HTML,CSS,JavaScript） 使用静态网页开发技术发布的资源
    • 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源
  • 动态资源（jsp/servlet, php,asp....）
      使用动态网页及时发布的资源
    • 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器 （浏览器只会解析静态资源）
  • Html
      Hyper Text Markup Language 超文本标记语言 用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本;
    • 由标签构成的语言
  • 标签
      标签分为围堵标签与自闭和标签，自闭和标签较少，比如换行标签：<br/>
    • 文件标签 html,head,title,body
    • <!DOCTYPE html>：html5中定义该文档是html文档
  • 文本标签
      注释：<!-- 注释内容 -->
    • <h1> to <h6>：标题标签 h1~h6:字体大小逐渐递减
  • <p>：段落标签
  • <br>：换行标签
  • <hr>：展示一条水平线
      color，width，align,size....
  • <b>：字体加粗
  • <i>：字体斜体
  • <font>:字体标签
  • <center>:文本居中
      * 属性：color,size,face
  • 图片标签
      <img> src 指定图片的位置
  • alt
      当图片加载不出来，出现提示
  • align
      默认左对齐，center,right,left
  • width,height
  • 列表标签
      有序列表 <ol><li></li></ol> 默认：1，2，3，4
    • type = "i". start = "5" (罗马数字展示)
  • 无序列表
      <ul><li></li></ul>
    • type 默认是圆点
    • type = "square" 方框
    • type = "circle" 圆心
  • 链接标签：（网站，本地，图片跳转）
  • 属性
      * target：指定打开资源的方式 * _self:在当前页面打开(默认值)
    • * _blank：在空白页面打开
  • div和span
      div:每一个div占满一整行。块级标签
    • span：文本信息在一行展示，行内标签 内联标签、
    • SPAN 为行内元素，也就是不会对布局结构产生影响，而DIV为块级元素，会单独占据一行
  • 语义化标签：提高程序的可读性
      <header>....</header> 页眉
    • <footer>....</footer> 页脚
  • 表格标签
      <table><tr><td></td></tr></table>
    • <table> width,border,bgcolor,align
    • * cellpadding：定义内容和单元格的距离 (如果不设置cellpadding = "0" cellspacing = "0" 开始的时候会是两条线）
    • * cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
  • <tr>
  • <td>
      定义单元格
    • <th> 定义表头单元格
  • * colspan：合并列
  • * rowspan：合并行
  • 先分行，再对行定义列
      示例 code

    • show

  • * <caption>：表格标题
  • * <thead>：表示表格的头部分
  • * <tbody>：表示表格的体部分
  • * <tfoot>：表示表格的脚部分（永远在最下面表示）
  • 表单标签
      表单：采集用户输入数据，和服务器交互
    • form action 用于指定提交数据的URL
  • method
      7种方式，提交用get,post 两种
    • get请求参数大小有限制，不太安全，post 参数大小没有限制，较为安全
  • 表单项标签
      表单项中的数据要想被提交：必须指定其name属性
    • input <label> 标签 input 元素定义标注，使用该标签的文本元素时，点击该文本，会触发此控件。
    • code

    • 效果（点击文本，即会触发）

  • type属性
      text 文本输入框 placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息
  • password 密码输入框
  • radio 单选框
  • checkbox 多选框
  • file 文件选择框
  • hidden 隐藏域，用于提交一些信息。（携带一些隐藏的信息提交）
  • 按钮
      * submit：提交按钮。可以提交表单 <input  type = "submit"value = “登录” >
  • * button：普通按钮
  • * image：图片形式的提交按钮 *src属性指定图片的路径
  • 日期
      生日： <input type = "date" name = "birthday"> <br>
    • 生日： <input type = "datetime-local" name = "birthday"> <br>
    • 还有属性max与minx常用
  • 邮箱 email
      它 有一个基本输入格式校验，符合邮箱的形式
  • 数字 number
      只能输入数字
  • 取色器 color
      点击后会弹出取色器
  • 老式 web 浏览器不支持的输入类型，会被视为输入类型 text。
  • select
      * 子元素：option，指定列表项
    • 例子（selected 是默认选择）

    • code

  • textarea
      * cols：指定列数，每一行有多少个字符
    • * rows：默认多少行。
    • example 例子

    • <textarea cols = "20" rows = “3” name = "dos"> </textarea>
  • 附加
      html的标签不区分大小写，但是建议使用小写。
    • <meta charset="UTF-8"> // 指定可以使用中文
    • width： 1. 数值：width='20' ,数值的单位，默认是 px(像素)
    • 2. 数值%：占比相对于父元素的比例
  • * color：
      1. 英文单词：red,green,blue
    • 2. rgb(值1，值2，值3)：值的范围：0~255  如  rgb(0,0,255)
    • 3. #值1值2值3：值的范围：00~FF之间。如： #FF00FF
  • 换行字符
      &nbsp 非断行空格，是常规空格的宽度，可运行于所有主流浏览器。
  • 其它几种空格（&ensp;、&emsp;、&thinsp;、&zwnj;、&zwj;）在不同浏览器中宽度各异
  • vscode 自动排版
      先全选或者选中部分代码。然后按Ctrl + K，紧接着Ctrl + F  
  • Html
  •                              
    • 内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
    标签： 
    相关文章推荐
    新的分享
    章节导航