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.无序的列表
2.有序的列表
3.自定义列表
Coffee
Black hot drink
Milk
White cold drink
4.列表是可以嵌套的
div块级元素
HTML <div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。
<!-- 块级元素 div 它相当于一个容器 如果不与css一起用,那么没有任何效果-->
内联元素
常见的内联元素(行内元素) <span> <a> <img>
<!-- 内联元素 -->
<!-- span如果不与css一起使用没能任何效果,与div标签唯一不同的是,它是内联元素而div是块级元素 -->
这是一个行内元素
这是一个行内元素
这是一个行内元素
首页
公司简介
业务方向
联系公司
表单(重点)
HTML 表单用于搜集不同类型的用户输入
<form> 标签用于为用户输入创建 HTML 表单。
表单能够包含input 元素,比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含menus、textarea、fieldset、legend和label 元素。
表单用于向服务器传输数据。
注释:form 元素是块级元素,其前后会产生折行。
action="url" url就是服务端的资源
method:客户端向服务器端提交数据的方式:get/post
一般来说表单的提交方式都设置成为post,这样的话对用户来说数据是安全的
如果设置成为get方式来提交数据,那么用户所输入的数据都会暴露在游览器的地址栏中,不安全
<form action="url" method="post">
表单元素
</form>
HTML <input> 标签
<input> 标签用于搜集用户信息。
根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
语法
<input type="value">