1. # 前端学习
  2. # html 决定架构 css 决定显示样式 js 决定交互、
  3. # 前端，网站前台部分，
  4. # HTML 超文本标记语言，是网页制作必备语言
  5. # 1，HTML页面结构
  6. '''
  7. 超文本标记语言的机构包括
  8. 头部 head 主体 body
  9. <html lang="zh-CN">
  10.    <head>
  11.    </head>
  12.       <body>
  13.       </body>
  14. </html>
  15. meta 在头部中是用来声明编码格式的
  16. title 页面标题
  17. '''
  18. <h1~h6> 标题标签，共6级，数值越大字符越小
  19. <p> 段落标签
  20. &bsp 空格
  21. <div> 块级元素 会独占一行 
  22. <span> 会计 行内快元素，与div不同点是不会换行
  23. <i> 倾斜
  24. <b> 加粗
  25. <strong> 加粗
  26. <img src='address' alt='没显示出来㲏的话替代显示的文本'>
  27. <ul> 无序列表 
  28. <li> 列表项
  29. <ol> 有序列表
  30. tr>td*5 
  31. td*5  按tab自动生成，偷懒方式
  32. <th> 表头
  33. <td> 单元格
  34. <tr> 定义表格行
  35. <table> th td tr 都需要在table大标签内
  36. <form action="定义表单提交地址" method="采用get请求/post请求方式提交数据到后台">
  37.     <input type="submit" value="按钮提示文本"> 提交
  38.     <input type="radio" value="按钮提示文本"> 单选框
  39.     <input type="file" value="按钮提示文本"> 上传文件
  40.     <input type="submit" value="按钮提示文本"> 提交数据
  41. </form>  表单
  42. <!--    下拉框-->
  43.     生日<select name="test" id="">
  44.     <option value="1">1</option>
  45.     <option value="2">2</option>
  46.     <option value="3">3</option>
  47.     <option value="4">4</option>
  48.     <option value="5">5</option>
  49.     </select>
  50.     <input type="submit" value="提交">
  51.     <textarea name="大型输入框" id="" cols="30" rows="10"></textarea>
  52. <!--    隐藏表单-->
  53.     <input type="hidden" name="token" value="1233123">
  54.     <input type="reset" name="重置按钮" value="1233123">
  55.     <input type="button" name="普通按钮" value="1233123">
  56.     <input type="image" name="吧一个图片当做按钮" value="1233123">
  57.     <iframe src="" frameborder="0"></iframe>  内嵌页面

块元素，内联元素，内联块元素

1，块元素

也叫做行元素，布局中常用的标签 如 div p ul li h1-h6 dl dt dd 都是块元素

在布局中的行为
支持全部的样式，如果没有设置宽度，默认宽度为父级宽度100%
盒子占据一行，即是设置了宽度

2，内联元素

内联元素，也可称为是行内元素，布局中常用的标签如 a，span em b strong i 等等都是内联元素，在布局中的行为支持部分样式
不支持 宽高 margin 上下 padding上下
宽高由内容决定
盒子并在一行
代码换行，盒子之间会产生间距
子元素是内联元素，父元素可以使用text-align属性设置子元素对其方式

3，内联块元素

内联块元素，也叫做行内块元素，是新增的元素类型，现有元素没有归于此类别的，img和input元素的行为类似这种元素但是也归类于内联元素，可以用display属性将快元素或者内联元素转化为这类元素，
在布局中表现的行为
支持全部样式
如果没有设置宽高，宽高由内容决定
盒子并在一起
子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式
这三种元素，可以通过display属性来相互转化，实际开发中，块元素使用较多，所以经常吧内联元素转化为块元素，少量转化为内联块，而要是用内联元素时，直接使用内联元素，而不用块元素了。

display属性

display属性是用来设置元素的类型及隐藏的，常用的属性有
none 元素隐藏且不占位置
block 元素以块元素显示
inline 元素以内联元素显示
inline-block 元素以内联块元素显示

css 的引入方法

1，外链式

通过link标签，连接到外部样式表到页面中

  1. <link rel = "stylesheet" type='text/css' href='css/main.css'>

2，嵌入式

通过style标签，在网页上创建嵌入的样式表

  1. <style type = "text/css">
  2. div{
  3. }
  4. </style>

3，内联式 标签的style方式

<div style="height:100px;background-color: chartreuse"> 测试菜单栏</div>