Introduction to HTML Basics 1

What is HTML

1.HTML ( HyperText Mark-up Language ) is hypertext tag language (there are many types of content that can be displayed)

2.HTML text is text composed of HTML tags, which can include text, graphics, animations, sounds, tables, connections, etc.

3. The structure of HTML includes two parts: Head and Body . The head describes the information required by the browser, and the body contains the specific content to be explained.

How HTML works

Run locally

It doesn't make sense, just look at the explanation or something like that

remote access

Quick Start with HTML

Use idea to write hello.html and run the effect

HTML development tools: Sublime, Visual Studio Code, webstorm, Dreamweaver, Hbuilder, etc.

Create html page

<!--文档类型说明 注释-->
<!DOCTYPE html>
<!--使用语言的地区 en 表示英国美国 en-US-->
<html lang="en">
<!--html 头-->
<head>
  <!--charset 文件的字符集-->
  <meta charset="UTF-8">
  <!--文件标题-->
  <title>Title</title>
</head>
<!--body 体，主体部分-->
<body>
  <!--内容-->
hello，我个菜狗
</body>
</html>

Notes and details

1. HTML files do not need to be compiled and are directly parsed and executed by the browser.

2. The browser that can be selected is the browser installed on your computer. If this browser is not installed, an error will be reported.

HTML basic structure

html basic structure

The shortcut key for html comments: ctrl+/, pay attention to the shortcut key: ctrl+shift+/

HTML tags

HTML tag/element documentation

1. Online documentation: w3school online tutorial

2.Offline documents

HTML tags/elements-description

1.HTML tags are enclosed in two angle brackets "<>"

2.HTML tags are generally double tags, such as <b> and </b>. The former tag is the start tag and the latter tag is the end tag.

3. The text between the two tags is the content of the html element

4. Some tags are called "single tags" because they can fully express their meaning when used alone, such as <br/><hr/>

5.HTML elements refer to all code from the start tag to the end tag

html tag considerations and details

Tag usage details

1. Tags cannot be cross-nested

2. Tags must be closed correctly

3. Comments cannot be nested

4.html syntax is not strict, sometimes tags are not closed, attributes do not have "" and no error is reported

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签使用细节</title>
</head>
<body>
<!--
标签使用细节
1.标签不能交叉嵌套
2.标签必须正确关闭
3.注释不能嵌套
4.html语法不严谨，有时候标签不闭合，属性不带“”也不报错
-->
<!--标签不能交叉嵌套-->
<div><span>tom</span></div>
<!--<div><span>tom</div></span>错误用法-->

<!--标签必须正确关闭-->
<span>jack</span>
<!--<span>jack  错误用法-->

<!--注释不能嵌套-->

<!--html语法不严谨，有时候标签不闭合，属性不带“”也不报错-->

</body>
</html>

严谨：<font color="blue">hello,HTML</font>

Not rigorous: <font color=blue>hello,HTML</font>

<br />

<br>

hello,world!~

font font tag

(Used less often, mainly css)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>font标签</title>
</head>
<body>
<!--字体标签
应用实例1：在网页上显示 北京  ，并修改字体为微软雅黑，颜色为蓝色
font标签是字体标签，它可以用来修改文本的字体，颜色，大小（尺寸）
（1）color属性修改颜色
（2）face 属性修改字体
（3）size 属性修改文本大小
注意：对应标签的属性，顺序不做要求
-->
<!--<font size="40px"face="微软雅黑"color="red">北京</font>-->
<font color="blue"face="微软雅黑"size="3">北京</font>
</body>
</html>

character entity

1. Display some special symbols on the web page, called character entities (also called symbol entities)

Convert <hr/> into text and display it on the page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字符实体</title>

</head>
<body>
<!--特殊字符  应用实例：
    把<hr/>变成文本显示在页面上
    常用的特殊字符：
    < :&lt;
    > :&gt;
    空格：&nbsp
-->
jack
<!--浏览器会将<hr/>解析成一条线输出-->
<hr/>
&lt;hr/&gt;
smith smith2           hsp<br/>
smith
smith2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hsp<!--一个&nbsp，程序会解析成一个空格-->
</body>
</html>

List of character entities

title tag

1. Titles are defined using <h1>-<h6> tags. <h1> defines the largest heading. <h6>Define the smallest title

2. Application examples

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题标签</title>
</head>
<body>
<!--标题标签
应用实例：演示标题1到标题6的h1 - h6都是标题标签 h1:最大 h6 :最小
align ：属性是对齐属性
left ： 左对齐（默认）
center ： 居中
right ：右对齐
-->
<h1 align="left">标签1</h1>
<h2>标签2.</h2>
<h3 align="center">标签3</h3>
<h4>标签4</h4>
<h5>标签5</h5>
<h6 align="right">标签6</h6>
</body>
</html>

hyperlink tag

Refers to the connection relationship from a web page to a target. The target can be a web page, or a different location on the same web page, or it can be a picture, an email, a file, or even an application.

<a href ="http://www.sohu.com">Sohu</a>

a tag is a hyperlink

href attribute sets the address of the connection

The target attribute sets which target to jump to

_self: represents the current page (default value), that is, using the current replacement target page

_blank: means opening a new page to jump

Click on the hyperlink to open the email

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接标签</title>
</head>
<body>
<!--a 标签是超链接-->
<!--href 属性设置连接的地址-->
<!--target属性设置哪个目标进行跳转-->
<!--_self : 表示当前页面（默认值），即使用当前替换目标页-->
<!--_blank : 表示打开新页面来进行跳转-->
<a href ="http://www.sohu.com">搜狐</a><br/>
  <!--点击超链接，打开邮件-->
  <a href="mailto:[email protected]?subject=hello">[email protected]</a><br/>
</body>
</html>

Unordered list ul/li

ul/li basic syntax

ul: represents an unordered list

li : list item

type attribute: specifies the symbol before the list item

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ul li标签</title>
</head>
<body>
<!--
ul : 表示无序列表
li : 列表项
type 属性: 指定列表项前的符号
-->






</body>
</html>

Out of order:

Ordered list ol/li

Image tag (img)

1. The img tag can display images on the html page (the image must be created under the document)

File name: imgs

Directly ctrl+v to the file

2. Application example: Use img tag to display a photo of a beautiful woman

img: The tag is an image tag, used to display images
src: Attribute can set the path of the image (specify where)
width: attribute sets the height of the image
height: attribute sets the height of the image
border: attribute sets the picture border size
alt: Attribute setting is used to replace the displayed text content when the image cannot be found in the specified path.
Relative path: starting from the project name
Absolute path: drive letter/directory/file name

There are two types of paths in the web: relative paths and absolute paths.

Relative path: . indicates the directory where the current file is located

.. indicates the upper-level directory where the current file is located

File name: indicates the file in the directory where the current file is located, equivalent to ./file name./ can be omitted

Absolute path: The correct format is: http://IP address.port/project name/resource path

The error format is: drive letter:/directory/file name

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>
<!--应用实例：使用img标签显示一张美女的照片
●  img ： 标签是图片标签，用来显示图片
● src ： 属性可以设置图片的路径
● width ： 属性设置图片的高度
● height：属性设置图片的高度
● border ： 属性设置图片边框大小
● alt ： 属性设置当指定路径找不到图片时，用来代替显示的文本内容
●     相对路径：从工程名开始算
●      绝对路径：盘符/目录/文件名
在web中路径分为相对路径和绝对路径两种
相对路径：.表示当前文件所在的目录
                .. 表示当前文件所在的上一级目录
文件名：表示当前文件所在目录的文件，相当于./文件名./可以省略
绝对路径：正确格式是：http://IP 地址.port/工程名/资源路径
                 错误格式是：盘符:/目录/文件名（一般指本地打开）

                 应用实例：演示如何将图片做成超链接
-->
<!--如果只是指定width或者height浏览器会按比例显示，不会变形-->
<img src="x.png"width="300"border="1"alt="美女找不到"/><hr/>
<img src="../1.png"width="300"border="1"alt="美女找不到"/><hr/>
<img src="../aaa/1.png"width="100"border="1"alt="美女找不到"/><hr/>
<!--如果同时指定width height 自己要计算，否则图像会变形-->
<img src="../aaa/1.png"width="200"height="80"alt="美女找不到"/><hr/>
</body>
</html>

Application example: Make pictures into hyperlinks

table tag

basic grammar

table: The label is the table label border: Set the table label

width: Set the table width height: Set the table height

align: Set the alignment of the table relative to the page

cellspacing: Set cell spacing

tr: is the row label th: is the header label td: is the cell label

align: Set the cell text alignment b: Is a bold label

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
<!--说明：
table ： 标签是表格标签 border ： 设置表格标签
width ： 设置表格宽度 height : 设置表格高度
align ： 设置表格相对于页面的对齐方式
cellspacing ： 设置单元格间距
tr : 是行标签         th ： 是表头标签        td ： 是单元格标签
align ： 设置单元格文本对齐方式 b ： 是加粗标签
px : 表示像素-java 坦克大战
ctrl + shift + 下光标:将该行代码直接下移一行
  ctrl+shift+上光标：将鼠标行所在代码直接上移一行
-->
<table width="500"border="6"align="center">
    <h1 align="center">表格标签的使用</h1>
    <tr><!--表头-->
        <th>名字</th>
        <th>住址</th>
        <th>邮件</th>
    </tr>
    <tr> <!--第一行-->
        <td>第1行第1列</td>
        <td>第1行第2列</td>
        <td>第1行第3列</td>
    </tr>
    <tr><!--第二行-->
        <td>第2行第1列</td>
        <td>第2行第2列</td>
        <td>第2行第3列</td>
    </tr>
    <tr><!--第三行-->
        <td>第3行第1列</td>
        <td>第3行第2列</td>
        <td>第3行第3列</td>
    </tr>
</table>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
<!--说明：
table ： 标签是表格标签 border ： 设置表格标签
width ： 设置表格宽度 height : 设置表格高度
align ： 设置表格相对于页面的对齐方式
cellspacing ： 设置单元格间距
tr : 是行标签 th ： 是表头标签 td ： 是单元格标签
align ： 设置单元格文本对齐方式 b ： 是加粗标签
px : 表示像素-java 坦克大战
ctrl + shift + 下光标

  相对上面的代码，该代码改变了像素
-->
<table width="500px"border="6"width="300"height="100"cellspacing="0">
    <h1 align="center">表格标签的使用</h1>
    <tr>
        <th>名字</th>
        <th>住址</th>
        <th>邮件</th>
    </tr>
    <tr>
        <td>第1行第1列</td>
        <td>第1行第2列</td>
        <td>第1行第3列</td>
    </tr>
    <tr>
        <td>第2行第1列</td>
        <td>第2行第2列</td>
        <td>第2行第3列</td>
    </tr>
    <tr>
        <td>第3行第1列</td>
        <td>第3行第2列</td>
        <td>第3行第3列</td>
    </tr>
</table>
</body>
</html>

Table label-cross-row and cross-column table

Write the following web page: Modify: table2.html

Merge columns: colspan="Number of columns"

Merge rows: rowspan="number of rows"

cellspacing: Specifies the size of the gaps between cells: 0 means no gaps

bordercolor: Demonstration of specifying table borders

border: table border

width: width of the table

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格（跨行跨列）</title>
</head>
<body>
<!--
  column：列
合并列：colspan="列数"；（colspan：跨列;合并列;合并单元格）
合并行：rowspan="行数"（rowspan：跨行;合并行;跨行属性;行宽）
cellspacing ： 指定单元格间的空隙大小：0表示没有空隙
bordercolor：指定表格边框的演示
border：表格边框
width：表格的宽度

思路：
1.先把整个表格的完整地行和列，展示出来5*3
2.在使用合并的技术，来处理
3.如果是16进制的颜色，前面#
  截取颜色，快捷工具（Faststone Capture）
-->
<table border="1" height="250" bordercolor="#E87EFA"
       cellspacing="0"width="500">
    <tr>
        <!--合并了3列-->
        <td align="center"colspan="3">第1行第1列</td>
    </tr>
    <tr>
        <!--合并行，跨行  row：行-->
        <td rowspan="2">第2行第1列</td>
        <td>第2行第2列</td>
        <td>第2行第3列</td>
    </tr>
    <tr>
        
        
        <td>第3行第2列</td>
        <td>第3行第3列</td>
    </tr>
    <tr>
        <!--合并行，跨行row行-->
        <td rowspan="2">第4行第1列</td>
        <td>第4行第2列</td>
        <td>第4行第3列</td>
    </tr>
    <tr>
        <td>第5行第2列<img src="imgs/2.png"width="100"></td>
        <td>第5行第3列</td>
    </tr>
</table>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格（跨行跨列）</title>
</head>
<body>
<!--
合并列：colspan="列数"
合并行：rowspan="行数"
cellspacing ： 指定单元格间的空隙大小：0表示没有空隙
bordercolor：指定表格边框的演示
border：表格边框
width：表格的宽度
-->
<table border="1px" bordercolor="#E87EFA"
       cellspacing="0"width="400px">
    <tr>
        <!--合并了3列-->
        <td align="center"colspan="3">星期一菜谱</td>
    </tr>
    <tr>
        <!--合并行，跨行row行-->
        <td rowspan="2">素菜</td>
        <td>青草茄子</td>
        <td>花椒扁豆</td>
    </tr>
    <tr>
        
        
        <td>小葱豆腐</td>
        <td>炒白菜</td>
    </tr>
    <tr>
        <!--合并行，跨行row行-->
        <td rowspan="2">荤菜</td>
        <td>油焖大虾</td>
        <td>海参鱼翅</td>
    </tr>
    <tr>
        <td>红烧肉<img src="imgs/2.png"width="100"></td>
        <td>烤全羊</td>
    </tr>
</table>
</body>
</html>

Introduction to form tag

URL represents the path to locate a web resource, and method mainly includes two types: get and post.

form element - small exercise

Simulation demonstration login form_login.html ok.html

1.form represents the form

2.action: which page to submit to

3.method: submission method, commonly used get and post

4.input type=text input box

5.input type=password password box

6.input type=submit submit button

7.input type=reset reset button

Tip: To align Chinese characters, just enter a full-width space.

If method is not written, the default is get

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单登录</title>
</head>
<body>
<!--说明
1.form 表示表单
2.action ： 提交到哪个页面
3.method ： 提交方式，常用get和post
4.input type=text 输入框
5.input type=password 密码框
6.input type=submit 提交按钮
7.input type=reset 重置按钮
小技巧：为了汉字对齐，输入全角的空格即可(切换为英文，右键“英”字，点击全半角切换）
            method不写默认是get
 -->
<form action="ok.html"method="get"><!--form包起来表示是表单的标签/元素-->
    用户名：<input type="text"name="username"><br/>
    密码：<input type="password"name="username"><br/>
    <input type="submit"value="登录"><input type="reset" value="重新填写">
</form>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆成功</title>
</head>
<body>
<h1>恭喜你，登录OK</h1>

</body>
</html>

input tag/element

checked represents the default selection (that is, the default selection is not selected)
<input type = "Image" name="submit"> represents image submission

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单登录</title>
</head>
<body>
<!--说明
1.form 表示表单
2.action ： 提交到哪个页面
3.method ： 提交方式，常用get和post
4.input type=text 输入框
5.input type=password 密码框
6.input type=submit 提交按钮
7.input type=reset 重置按钮
小技巧：为了汉字对齐，输入全角的空格即可(切换为英文，右键“英”字，点击全半角切换）
            method不写默认是get
 -->
<form action="ok.html"method="get">
    用户名：<input type="text"name="username"><br/>
    密　码：<input type="password"name="username"><br/>
    <input type="submit"value="登录"><input type="reset" value="重新填写">
    <input type="Image"src="2.png"width="50"value="登录">
</form>
</body>
</html>

select/option/textarea tag

<option value=Online games selected>Online games</option>: The text between <option> and </option> is for customers to see, and what is submitted to the URL is the online game of value=Online games

textarea

rows: rows

cols: columns

Form synthesis exercises

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单综合案例</title>
</head>
<body>
<!--一定一定要用form标签把input元素包起来-->
<!--提交给URL的是value属性的值，而不是客户所看到的值-->
<form>
    用户注册信息<br/>
    <!--一定一定要给input元素设置name属性，否则，数据提交不到URL（即服务器）-->
    用户名称：<input type="text"name="username"><br/>
    用户密码：<input type="password"name="username"><br/>
    确认密码：<input type="password"name="username"><br/>
    选择你喜欢的运动项目：
    <!--注意：checkbox是复选框，如果希望是同一组数据，name要一致-->
    <input type="checkbox"name="sport"value="lq">篮球<br/>
    <input type="checkbox"name="sport"value="zq"checked>足球<br/>
    <input type="checkbox"name="sport"value="sq">手球<br/>
    请选择性别：
    <!--单选type="radio"-->
    <!--这里name都要是gender同名，如果不一样就不是单选-->
    <input type="radio"name="gender"value="male">男<br/>
    <input type="radio"name="gender"value="female">女<br/>
    请选择城市：
    <select name="city">
        <option value="cd">成都</option>
        <option value="bj">北京</option>
        <option value="sh">上海</option>
    </select><br/>
    自我介绍：
    <textarea rows="10"cols="20"></textarea>
    选择你的文件（头像）<input type="file"name="myfile"value="上传头像"><br/>
    <input type="submit"value="提交"/><input type="reset"value="重置"/>
</form>
</body>
</html>

Form formatting

ctrl+d: Copy all code of the selected lines

ctrl+x: delete code