前端 -- HTML

一. HTML介绍:

  • HTML是什么?
    • 超文本标记语言(Hypertext Markup Language),是一种用于创建网页的标记语言,不是编程语言
    • 本质上是浏览器可识别的规则,我们按照规则写网页,浏览器根据规则渲染我们的网页.对于不同的浏览器,对同一个标签可能会有不同的解释. (兼容性问题)
    • 网页文件的扩展名: .html 或 .htm
  • HTML 文档结构 
    <!DOCTYPE html> 
<html lang="zh-CN">   #这个lang表示语言，zh-CN是中文的意思，就是说，你整个文档的内容以中文为主，如果以英文为主，就写成lang='en'

<head> 
  <meta charset="UTF-8">  # 编码
  <title>css样式优先级</title>
</head>
<body> 
     正文内容
</body>
</html>
    • <!DOCTYPE html> 声明为HTML5文档
    • <html> </html> 是文档的开始标记和结束标记. 是HTML页面的根元素,在它们之间的文档的头部(head) 和主体(body)
    • <head> </head> 定义了HTML文档的开头部分,它们之间的内容不会在浏览器的文档窗口显示. 包含了文档的元 (meta) 数据,配置信息等,是给浏览器看的,我们看到是在body标签里面写的内容
    • 注意: 对于中文网页需要使用<meta charset = 'utf-8'>声明编码,否则会出现乱码. 有些浏览器会设置GBK编码,则需要设置为<meta charset = 'gbk'>
  • web服务器本质　 
    import socket

sk = socket.socket()
sk.bind(('127.0.0.1',8008))
sk.listen()

while True:
    conn,addr = sk.accept()
    data = conn.recv(1024)
    conn.send(b"HTTP/1.1 200 OK\r\n\r\n")
    conn.send(b'<h1>hello word</h1>')
    conn.close()

     浏览器发请求 --> HTTP协议 --> 服务端接收请求 --> 服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面

 

二. HTML标签介绍

  • 标签的格式: 严格封闭的
    • HTML标签是由尖括号包围的关键字，如<html>, <div>等
    • HTML标签通常是成对出现的，比如：<div>和</div>，第一个标签是开始，第二个标签是结束。结束标签会有斜线。
    • 也有一部分标签是单独呈现的，比如：<br/>、<hr/>、<img src="1.jpg" />等。
    • 标签里面可以有若干属性，也可以不带属性。
  • 标签的语法
    • <标签名 属性1=“属性值1” 属性2=“属性值2”……> 内容部分 </标签名> 
    • <标签名 属性1=“属性值1” 属性2=“属性值2”…… />
  • 标签的分类:
    • 内敛标签(行内标签) : 不独占一行 (b / i / u / s / img / a / span / button 等),内敛标签只能嵌套内敛标签
    • 块级标签(行外标签) : 自己独占一行 (h1- h6 / br / hr / p / div 等),可以嵌套内敛标签和某些块级标签
    • p标签 : 不能嵌套p标签,也不能嵌套块级标签

　　　　

三. HTML常用标签

  • head标签中的标签:
    • <title> </title> : 定义网页标题
    • <style> </style> : 定义内部样式表
    • <script> </script> : 定义JS代码或引入外部JS文件
    • <link/> : 引入外部样式表文件
    • <meta/> : 定义网页原信息
      • meta标签共有两个属性,分别是http_equiv属性和name属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能
      • http_equiv属性: 相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。 
        <meta http-equiv="refresh" content="2;URL=https://www.baidu.com">
# 两秒后跳转到相应的网址,如果把URL和后面的内容删掉,就是两秒中刷新一次

<meta http-equiv="content-Type" charset="UTF8"> 
# 指定编码的类型

         

      • name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。　
        • 红框就是描述的信息　　
  •  body标签中的基本标签　(块级标签和内联标签) 
    <b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>

<p>
    段落标签  # 独占一个段落
</p>

<button>一个按钮</button>

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
# 从上到下,字体依次变小

<!--换行-->
<br>

<!--水平线 / 分割线-->
<hr>
  • div标签和span标签(常用)
    • 这两个标签是没有特别的样式的。<div>xxxx</div>，但是这是两个标签最大的特点，可以通过CSS来控制，就像咱们画画一样，在一个白纸上画好，还是在一个报纸上画好啊，对不对。打开个网页通过f12看一下，就发现多数都是div和span。
    • div标签用来定义一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
    • span标签用来定义内联(行内)元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
    • 块级元素与行内元素的区别：所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。
  •  img标签
    • 图片标签
    • 属性:
      • src = '图片路径'     # 网络地址的绝对路径或者本地的相对路径
      • alt = '图片未加载成功时的提示'
      • title = '鼠标悬浮时提示信息'
      • width = '设置图片的宽'
      • height = '设置图片的高'
    • # 示例:
<img src="1.jpg" alt="这是个美女,请稍等.." title="美女" width="200" height="200">
  • a标签
    • 超链接标签
    • 属性:
      • href : 超链接的地址
      • target : 是否新建窗口
        • target = '_self'   当前窗口打开某个路径对应的html页面
        • target = '_bland'    新建窗口打开某个路劲对应的html页面
    • <a href="https://www.baidu.com" target="_blank">
   <button>点击进入百度</button>
</a>
  • 列表标签
    • 无序列表
      • type属性:
        • disc : 实心圆点(默认值)
        • circle : 空心圆圈
        • square : 实心方块
        • none : 无样式
      • <ul type = 'disc'>
    <li>太白</li>
    <li>alex</li>
    <li>wusir</li>
</ul>
    • 有序列表
      • start属性 : 是从数字几开始
      • type属性:
        • 1 : 数字列表.默认值
        • A : 大写字母
        • a : 小写字母
        • I : 大写罗马
        • i : 小写罗马
      • <ol type="A" start="2">
    <li>太白</li>
    <li>alex</li>
    <li>wusir</li>
</ol>
# 表示按照大写字母进行排序,从B开始
    • 标题列表标签
      • 就像大纲一样,有一个层级效果
      • <dl>
    <dt>标题1</dt>
    <dd>内容1</dd>
    <dt>标题2</dt>
    <dd>内容1</dd>
    <dd>内容2</dd>
</dl>
  •  表格标签
    • 属性:
      • border : 表格边框 (边框高度)
      • cellpadding : 内边距 (内边框和内容距离)
      • cellspacing : 外边距 (内外边框的距离)
      • width : 像数 百分比 (最好通过css来设置长宽)
      • rowspan : 单元格竖跨多少行 (写在td里面)
      • colspan : 单元格横跨多少列(即合并单元) (写在td里面)
    • <table border="5" cellpadding="5" cellspacing="2">
    <thead>   # 表格的标题(头)
        <tr>  # 一行
            <th>姓名</th>  # 一个单元格的内容
            <th>年龄</th>
            <th>爱好</th>
        </tr>
    </thead>

    <tbody>   # 表格的正文内容
        <tr>
            <td>alex</td>
            <td>83</td>
            <td>抽烟</td>
        </tr>
        <tr>
            <td>wusir</td>
            <td>74</td>
            <td>喝酒</td>
        </tr>
    </tbody>
</table>
  • input标签
    • type属性表现形式对应代码
      text 单行输入文本 <input type = 'text' />
      password 密码输入框(不显示明文) <input type = 'password' />
      date 日期输入框 <input type = 'date' />
      checkbox 复选框 <input type = 'checkbox' name = 'x' />
      radio 单选框 <input type = 'radio' name = 'x' />
      submit 提交按钮 <input type = 'submit' value = '提交' />
      reset 重置按钮 <input type = 'reset' value = '重置' />
      button 普通按钮 <input type = 'button' value = '普通按钮' />
      hidden 隐藏输入框 <input type = 'hidden' />
      file 文本选择框 <input type = 'file' />
    • type属性 : 控制输入框的样式
    • name属性 : 分组,携带数据key  传给后台的是: key:value
    • value : 表单提交时对应项的值
      • type="button", "reset", "submit"时，为按钮上显示的文本内容
      • type="text","password","hidden"时，为输入框的初始值
      • type="checkbox", "radio", "file"，为输入相关联的值
    • readonly : 只读,针对的是输入框 如:text,password
    • disabled : 不允许操作,所有的input都可以设置
    • 设置了readonly的标签,它的数据可以被提交到后台,设置了disabled的数据,是不能提交到后台的
    • submit : 发送浏览器上输入标签中的内容,配合form表单使用,页面会刷新
    • reset : 页面不会刷新,将所有内容清空
  • form表单 
    • <form action="http://127.0.0.1:8008">    # action: 指定数据提交的路径
    用户名:<input type="text" name = 'username'>
    密码:<input type="password" name = 'password'>
    <br>
    <input type="radio" name = 'sex' value="1">男  # 传给后台的数据是 : sex:1
    <input type="radio" name = 'sex' value="2">女
    <br> 
    <input type="checkbox" name = 'hobby' value="a">喝酒  # 传给后台的数据是: hobby:a
    <input type="checkbox" name = 'hobby' value="b">抽烟
    <input type="checkbox" name = 'hobby' value="c">烫头
    <input type="submit" value = '提交按钮'>
    <br>
    <input type="date">
    <input type="button" value = '提交按钮'>
    <input type="reset" value = '重置'>
    <input type="hidden">
    <input type="file">
</form>
    • 注意:form表单触发提交数据的操作,必须写在form表单标签里面,写在外面就是普通按钮
      • <input type='submit'>
      • <button>提交按钮</button>
    • checked默认选中
      • <input type="radio" name="sex" value="2" checked>女 #简写方式,当属性名和属性值相同时可简写  默认选中 : 女
      • <input type="checkbox" name="hobby" value="a">喝酒
      • <input type="checkbox" name="hobby" value="b" checked="checked">抽烟
      • <input type="checkbox" name="hobby" value="c" checked="checked">烫头
      • 默认选中了 : 抽烟,喝酒
  • select标签下拉选择框 
    • # 单选
<select name="city">
    <option value="1">北京</option>
    <option value="2" selected='selected'>上海</option>  # 默认选中上海
    <option value="3">深圳</option>
</select>

# 多选:multiple
<select name="city" multiple>
    <option value="1">北京</option>
    <option value="2" selected>上海</option>  # # 默认选中上海
    <option value="3">深圳</option>
</select>
    • multiple：布尔属性，设置后为多选下拉框，否则默认单选
    • disabled：禁用
    • selected：默认选中该项
    • value：定义提交时的选项值
  • label标签
    • 标识标签的功能
    • 方式一: for:执行对哪个标签进行标识
效果: 点击label标签中的文字.就能让标识的标签获得光标
<label for="username">用户名</label>
<input id="username" type="text" name="username" value="alex">

方式二:
<label>
    密码:<input type="password" name="password" value="111" disabled>
</label>
    • 说明:
      • label 元素不会向用户呈现任何特殊效果,但是点击label标签里面的文本,那么和他关联的input标签就获得了光标,让你输入内容
      • label标签的for属性值应当与相关元素的id属性值相同
  • textarea多行文本 
    • <textarea name="memo" id="memo" cols="30" rows="10">
  默认内容
</textarea>
name：名称
rows：行数   #相当于文本框高度设置
cols：列数   #相当于文本框长度设置
disabled：禁用

       

 

 

 

　　

posted @ 2019-06-30 14:35  未来&你好  阅读(292)  评论(0)  编辑  收藏  举报