前端知识之html内容

  • web服务本质

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

    • 实例简单的一个socket

      1. import socket
      2. sk = socket.socket()
      3. sk.bind(("127.0.0.1", 9000))
      4. sk.listen()
      5. while 1:
      6.     conn, addr = sk.accept()
      7.     data = conn.recv(9000)
      8.     print(data)
      9.     conn.send(b"HTTP/1.1 200 OK\r\n\r\n")
      10.     conn.send('hello'.encode('utf8'))
      11.     conn.close()

  • html是什么

    • 超文本标记语言（html）是一种用于创建网页的标记语言，它不属于编程语言

    • 本质是浏览器可识别的规则

    • 最基本的html文档

      1. <!DOCTYPE html> 声明为html5文档

        <!DOCTYPE>指web浏览器关于页面使用哪个html版本进行编写的指令

      2. <html> </html>是文档的开始和结束标记，是html的根源素，在他们之间是head（头部）和body（身体）

      3. <head> </head>head>定义了html文档的开头部分，他们之间的内容不会显示在浏览器的文档窗口上，包含文档的meta（元）数据

      4. <title> </title>定义了网页标题，在浏览器标题栏显示

      5. <body> </body>之间的文本是可见的网页主体内容

      6. 注释语法 <!--注释内容-->

        注意：对于中文网页需要使用<meta charset='utf8'>声明编码，否则会出现乱码，有些浏览器会设置gbk为默认编码，则你需要将声明的编码改成gbk的样子

      1. <!DOCTYPE html>
      2. <!--lang='zh-CN'表示网页主要显示为中文，lang='EN'则表示主页显示为英文-->
      3. <html lang="zh-CN">
      4. <head>
      5.     <!--指定文档的编码类型-->
      6.     <meta charset="UTF-8">
      7.     <title>Title</title>
      8. </head>
      9. <body>
      11. </body>
      12. </html>

    html标签格式

  • html标签

    • 由尖括号包围的关键字形成
    • 标签通常是成对出现，例<div>和</div>
    • 部分标签是单独呈现的例<br>换行的意思
    • 标签里面可以有若干属性，也可以不带属性

  • 标签语法

    • <标签名 属性1=“属性值1” 属性2=“属性值2”>内容部分</标签名>
    • <标签名 属性1=“属性值1”>

  • 几个很重要的属性

    • id 定义标签的唯一id，一个html文档中唯一
    • class 为html元素定义一个或多个类名（classname）（css样式类名）
    • style：规定元素的行内样式（css样式）

html常用标签

  • head常用标签

    • <title>网页标题</title>定义网页标题
    • <style>内部样式</style>定义内部样式表
    • <script></script>定义js代码或引入外部js文件
    • <link>引入外部样式表文件
    • <meta>定义网页元信息
      • 可提供有关页面的原信息，针对搜索引擎和更新频繁的描述和关键字
      • 位于head（头部），不包含任何内容
      • 提供的信息时用户不可见的
      • 含有http-equiv属性和name属性，（了解）

  • body内常用标签

      1. <b>加粗</b>
      2. <i>斜体字</i>
      3. <u>下划线</u>
      4. <s>删除文字中间一横杠</s>
      6. <p>段落标签，该标签的内容为一段落</p>
      7. <h1>标题</h1>
      8. <h6>标题6</h6>
      9. <!--换行标签-->
      10. <br>
      11. <!--水平线-->
      12. <hr>

      常用特殊字符（百度html特殊字符表）

      1. <!--空格-->
      2. &nbsp;
      3. <!--大于＞符号-->
      4. &gt;
      5. <!--小于＜符号-->
      6. &lt;
      7. <!--&符号-->
      8. &amp;
      9. <!--¥符号-->
      10. &yen;
      11. <!--版权符号-->
      12. &copy;
      13. <!--注册符号-->
      14. &reg;

    • div标签和span标签

      • 相同点：

        • 没有自带的样式
        • 可以通过使用css来调整样式
      • 不同点
        • div是块级元素，独占一行
        • span是行内（内联）元素，不会另起一行
      • 注意：块级标签支持嵌套
        • 通常块级元素可以包含内联元素或某些块级元素，但是内联元素不能包含块级元素
        • p段落标签不能包含块级元素，也不能包含p标签

    • 块级标签和内联（行内）标签

      • 块级标签

        • P段落标签
        • h1~h6标题标签
        • hr 水平线标签
        • div标签
      • 内联标签
        • span标签
        • b加粗标签 ，i斜体标签，u下划线标签，s删除标签

    • img标签

        1. <img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">

    • a超链接标签

      • 定义：指从一个网页指向一个目标的链接关系

        1. <a href="http://www.oldboyedu.com" target="_blank" >点我</a>

        target属性值

        • _blank 表示在新标签页中打开目标网址
        • _self表示在当前标签中打开目标网址

    • 列表标签

      • 1.无序列表

        1. <ul type="disc">
        2.   <li>第一项</li>
        3.   <li>第二项</li>
        4. </ul>

        type属性：

        • disc（实心圆点，默认值)
        • circle（空心圆圈）
        • square（实心方块）
        • none（无样式）

      • 2.有序列表

          1. <ol type="1" start="2">
          2.   <li>第一项</li>
          3.   <li>第二项</li>
          4. </ol>

          type属性

          • 默认数字，A大写字母，a小写字母，I大写罗马，i小写罗马
          • start属性：排序从start是几开始

      • 标题列表

          1. <dl>
          2.   <dt>标题1</dt>
          3.   <dd>内容1</dd>
          4.   <dt>标题2</dt>
          5.   <dd>内容1</dd>
          6.   <dd>内容2</dd>
          7. </dl>

    • 表格标签

        1. <table>
        2.   <thead>
        3.   <tr>
        4.     <th>序号</th>
        5.     <th>姓名</th>
        6.     <th>爱好</th>
        7.   </tr>
        8.   </thead>
        9.   <tbody>
        10.   <tr>
        11.     <td>1</td>
        12.     <td colspan="1">Egon</td>
        13.     <td>杠娘</td>
        14.   </tr>
        15.   <tr>
        16.     <td>2</td>
        17.     <td rowspan="2">Yuan</td>
        18.   </tr>
        19.   </tbody>
        20. </table>

        属性：

        • border :表格边框
        • cellpadding 内边框
        • cellpacing 外边距
        • width 像素 百分比（最好同过css来设置长宽）
        • rowspan 单元格竖跨多少行
        • colsapn 单元格横跨多少列（合并单元格）

    • 获取用户输入的标签form

      • 功能：

        • 用于向服务器传输数据，从而实现用户与web服务器的交互

        • 包含input系列标签，例文本字段，复选框，提交按钮等

        • 包含textarea,select,fieldset和label标签

        • 表单属性

          • accept-charset 规定在 被提交表单中使用的字符集(默认：页面字符集)

          • action 规定向何处提交表单的地址

          • autocomplete 规定浏览器应该自动完成表单（默认开启）

          • enctype 规定被提交数据的编码(默认 url-encoded)

          • method 规定在提交表单是所用的http方法 默认get

          • name 规定识别表单的名称（对于dom使用document.forms.name)

          • novalidate 规定浏览器不验证表单

          • target 规定action属性中地址的目标

            1. <form action="http://127.0.0.1:9000" method="post" enctype="multipart/form-data">

      • input标签

        • 通常和label标签配合使用

          例

          1. <p>
          2.     <label for="i1">用户名：</label>
          3.   <input id="i1" type="text" name="username">
          4. </p>
          5. <!--等同-->
          6. <p>
          7.     <label>密码：
          8.         <input type="password" name="pwd">
          9.     </label>
          10. </p>

        • type属性

          1. text 单行输入文本
          2. password 密码输入框 （密文）
          3. date 时间输入框
          4. checkbox 复选框<input type="checkbox" checjed="checked" >
          5. radio 单选框 <input type="radio">
          6. submit 提交按钮 <input type="submit" value="提交">
          7. reset 重置按钮 input type="reset" value="重置按钮" >
          8. button 普通按钮 <input type="button" value="普通按钮" >
          9. hidden 隐藏输入框 <input type="hidden">
          10. file 文本选择框 <input type="file">

前端知识之html基础的更多相关文章

  1. 前端开发：css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  2. 3 HTML&JS等前端知识系列之javascript的基础

    preface 作为一名运维开发,必须懂得前端知识,比如javascript,dom等等,下面就聊聊javascript. include 数据格式 条件判断,循环流程等. 函数 面向对象 what ...

  3. web前端知识体系总结

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  4. 自己总结的web前端知识体系大全【欢迎补充】

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  5. WEB前端知识体系脑图

    说在开始的话: 我上大学那会,虽说主要是学Java语言,但是web前端也稍微学了一些,那时候对前端也没多在意,因为涉入的不深,可以搞一个差不多可以看的界面就可以了,其他也没过多在意. 因为稍微了解一点 ...

  6. web前端知识体系大全

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  7. [转]前端利器：SASS基础与Compass入门

    [转]前端利器:SASS基础与Compass入门 SASS是Syntactically Awesome Stylesheete Sass的缩写,它是css的一个开发工具,提供了很多便利和简单的语法,让 ...

  8. JS前端知识模块大全

    公司前端:小胖提供,表示感谢 1. 基础 HTML, CSS, JS 文档 W3CSCHOOL: http://www.w3schools.com/ MDN: https://developer.mo ...

  9. web前端知识体系小结（转）

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

随机推荐

  1. LeetCode随缘刷题之赎金信

    欢迎评论区讨论. package leetcode.day_12_04; /** * 为了不在赎金信中暴露字迹,从杂志上搜索各个需要的字母,组成单词来表达意思. * * 给你一个赎金信 (ransom ...

  2. 编译安装&打包压缩&定时任务

    内容概要 编译安装 打包压缩 定时任务 内容详细 一.编译安装 1.特点 使用源代码,编译打包软件. ​ 1.可以自定制软件 ​ 2.按需构建软件啊 2.步骤 下载安装包 wget 下载网址 如果没有 ...

  3. Solution -「NOI 模拟赛」彩色挂饰

    \(\mathcal{Description}\)   给定一个含 \(n\) 个点 \(m\) 条边的简单无向图,设图中最大点双的大小为 \(s\),则保证 \(s\le6\).你将要用 \(k\) ...

  4. kube-scheduler源码分析（1）-初始化与启动分析

    kube-scheduler源码分析(1)-初始化与启动分析 kube-scheduler简介 kube-scheduler组件是kubernetes中的核心组件之一,主要负责pod资源对象的调度工作 ...

  5. Vue2.0源码学习(3) - 组件的创建和patch过程

    组件化 组件化是vue的另一个核心思想,所谓的组件化就,就是说把页面拆分成多个组件(component),每个组件依赖的css.js.图片等资源放在一起开发和维护.组件是资源独立的,在内部系统中是可以 ...

  6. nacos配置中心文件（bootstrap.properties）不生效问题解决

    springcloud整合nacos作为配置中心时,配置文件不生效的问题 在这个问题处卡了一天多,在网上各种搜索.大多数解决方案都是在bootstrap.properties文件中配置nacos地址. ...

  7. Vue3学习（十五）之 级联选择组件Cascader的使用

    写在前面 好像又过去了一周,依旧是什么也没产出,不是懒,而是心情不好,什么也不想干,失眠是常事. 应该是从今年开始,突然感觉博客园就像是我自己的日记一样,承载着自己的喜怒哀乐和酸甜苦辣咸,当然,尴尬的 ...

  8. 2. 堪比JMeter的.Net压测工具 - Crank 进阶篇 - 认识yml

    目录 堪比JMeter的.Net压测工具 - Crank 入门篇 堪比JMeter的.Net压测工具 - Crank 进阶篇 - 认识yml 堪比JMeter的.Net压测工具 - Crank 进阶篇 ...

  9. Linux 中CPU 和 GPU 的行为监控

    由于 Steam(包括 Steam Play,即 Proton)和一些其他的发展,GNU/Linux 正在成为越来越多计算机用户的日常游戏平台的选择.也有相当一部分用户在遇到像视频编辑或图形设计等(K ...

  10. Spring 5 , 狭义上的spring 以及 广义上的spring , spring 设计模式

    Spring 5 距离 Spring4 发布有4年多, 所以说Spring 5是一个重要的版本 要构建和运行Spring 5应用程序, 至少需要Java EE 7 和JDK 8 , 之前的JDK和Ja ...