html

HTML基础

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (HyperTextMarkupLanguage)

HTML 不是一种编程语言,而是一种标记语言(markup language)

标记语言是一套标记标签(markup tag)

HTML 使用标记标签来描述网页

Web前端的开发工具:

VSCode(首选)https://code.visualstudio.com/

所需要安装的插件:Chinese (Simplified) Language Pack for Visual Studio Code 

        ESLint  Live Server   open in browser   vscode-icons 

Webstrom

编写第一个html网页

<!-- 头信息 -->

这是一个网页

<!-- 所有的网页有内容都要写到body中   ctrl+/注释 -->

注意:

 HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词,比如 

HTML 标签通常是成对出现的,比如  和 

标签对中的第一个标签是开始标签,第二个标签是结束标签

开始和结束标签也被称为开放标签闭合标签

什么是元素:每个html标签都可以被称为一个元素,每个元素都是有内容的

例如:<p>这是元素的内容</p>

什么是属性:每个html标签都会有一个或者是多个属性,请大家参考文档

标题标签:标题(Heading)是通过 <h1> - <h6> 等标签进行定义的。<h1> 定义最大的标题。<h6> 定义最小的标题。

规范:html标签的规范都为小写

分隔线标签

段落标签:段落是通过 <p> 标签定义的。

概念

1.块级元素:独占一行来显示的。

2.内联元素:所以的内联元素会在同一行来显示,如果一行装不下会自动进行换行。

<br>/<br/>:表示换行标签

超链接:几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

我们通过使用 <a> 标签在 HTML 中创建链接。

通过使用 href 属性 - 创建指向另一个文档的链接

百度   在当前页面跳转

属性:target="_blank" 规定在何处打开链接文档。

网易  打开一个新的页面

<!-- 如何制作图片链接 -->

注意:在引用图片的时候的路径的问题  返回上一级目录:../

图像标签(<img>)和源属性(Src)

在 HTML 中,图像由 <img> 标签定义。

<img> 是空标签,意思是说,它只包含属性,并且没有闭合标签。

要在页面上显示图像,你需要使用源属性(src)。src 指 "source"。源属性的值是图像的 URL 地址。

<img src="url" />    表格标签 

表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

列表

1.无序的列表

  • Java
  • NodeJS
  • JavaScript
  • HTML
  • 2.有序的列表

    1. Database
    2. MongoDB
    3. Redis
    4. AngularJS
    5. 3.自定义列表

      Coffee

      Black hot drink

      Milk

      White cold drink

      4.列表是可以嵌套的

      • Java
        • Spring
        • SpringMVC
        • Mybatis
        • NodeJS
        • JavaScript
        • HTML
        • div块级元素

          HTML <div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器。

          <div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。

          <!-- 块级元素 div 它相当于一个容器 如果不与css一起用,那么没有任何效果-->

          这是一个div块级元素

          div1

          div2

          div3

          内联元素

          常见的内联元素(行内元素)  <span>   <a>   <img>

          <!-- 内联元素 -->

          <!-- span如果不与css一起使用没能任何效果,与div标签唯一不同的是,它是内联元素而div是块级元素 -->

          这是一个行内元素

          这是一个行内元素

          这是一个行内元素


          首页

          公司简介

          业务方向

          联系公司

          表单(重点)

          HTML 表单用于搜集不同类型的用户输入

          <form> 标签用于为用户输入创建 HTML 表单。

          表单能够包含input 元素,比如文本字段、复选框、单选框、提交按钮等等。

          表单还可以包含menustextareafieldsetlegendlabel 元素

          表单用于向服务器传输数据。

          注释:form 元素是块级元素,其前后会产生折行。

           action="url"  url就是服务端的资源

           method:客户端向服务器端提交数据的方式:get/post 

           一般来说表单的提交方式都设置成为post,这样的话对用户来说数据是安全的

           如果设置成为get方式来提交数据,那么用户所输入的数据都会暴露在游览器的地址栏中,不安全

          <form action="url"  method="post">

           表单元素

          </form>

          HTML <input> 标签

          <input> 标签用于搜集用户信息。

          根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

          语法

          <input type="value"> 

          ©著作权归作者所有,转载或内容合作请联系作者
          【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
          平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

          相关阅读更多精彩内容

          • HTML HTML简介 1、什么是HTML? HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言...
            小山居阅读 724评论 0 5
          • 学习HTML的最佳网站没有之一http://www.w3school.com.cn/html/ 关于HTML/HT...
            Amyyy_阅读 2,425评论 0 16
          • 0.B/S结构 浏览器服务器模式,web浏览器是客户端最主要的应用软件.将客户端使用web进行统一,系统功能实现集...
            liusong007阅读 1,219评论 0 1
          • 第一章 1、使用浏览器去访问的程序,叫网页 2、web代码存放在服务器 代码分为两种:① 运行在浏览器端:前端代...
            fastwe阅读 3,612评论 0 2
          • HTML 指超文本标记语言(HyperText Markup Language),是一种用于创建网页的标准标记语言...
            神齐阅读 2,184评论 0 3

          友情链接更多精彩内容