HTML常用标签、浏览器、CSS、JS简介

文章目录

HTML常用标签、浏览器、CSS、JS简介

HTML常用标签

HTML标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
</html>
<!--- 表示HTML文件
- 双标签-->

标题标签 : h1~h6

	<h1></h1>
    <h2></h2>
    <h3></h3>
    <h4></h4>
    <h5></h5>
    <h6></h6>
<!-- h1到h6 六级标题
- 双标签-->

段落标签 : p

<p>
- 表示一个段落
- 双标签
- </p>

段内换行 : br

<p>
- 可以<br>  
- 也可以<br/>
- </p>
- <!--单标签-->

预留格式 : pre

<pre>内部都能保存为源文件格式，包括空格与空行
- 双标签</pre>

段内分组 : span

<p>下面为您播报一则<span>最新新闻</span></p>
<!--结合行内元素，便于使用css样式来格式化
- 双标签-->

水平线 : hr

<hr>
<!--单标签-->

空格字符 : &nbsp

&nbsp;&nbsp;&nbsp;
<!--一个&nbsp;为一个空格-->

注释 :

<!--这是一个注释-->

超链接 : a

<a href = "#"> 虚拟超链接</a>
<a href="https://blog.csdn.net/weixin_62957409?spm=1019.2139.3001.5343">CSDN个人博客</a>
<!--- 双标签
-- 属性中添加超链接，两个标签之间加文字或者图片-->

图片 : img

<!--绝对路径：以根目录为基准，但文件移动后会导致无法找到图片-->
<!--相对路径：以该文档所在位置为基准，关注网页文件、网页文件夹、图片之间的位置关系-->
<!-- src属性：路径+文件名  /  图片网址-->
<!--alt属性：图片的替换文本-->
<!--单标签-->
- <div>

        图片插入绝对路径与相对路径实例<br>
        绝对路径<br>
        <img src="D:\Desktop\20191217031149247.jpg" width=100 height=100 alt = "显示错误"/><br>
        相对路径_1:图片与网站在同一个文件夹<br>
        <img src="20191217024157492.jpg" width=100 height=100 alt = "显示错误"/><br>
        相对路径_2:图片在下一级文件夹<br>
        <img src="img_1\2022-03-24113704.png" width=100 height=100 alt = "显示错误"/><br>
        相对路径_3:网站在下一级文件夹<br>
        <img src="..\20191217024045128.jpg" width=100 height=100 alt = "显示错误"/><br>
        相对路径_4:图片和网站各在不同的同级文件夹<br>
        <img src="..\img\20191217024140124.jpg" width=100 height=100 alt = "显示错误"/><br>
    </div>

区域 : div

<div>
<p>
- 便于css样式格式化
- 双标签
- </p>
- </div>

列表 : ul ol li

<ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
</ul>
<ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
</ol>
<!--双标签-->

表格 : table th td tr

<table>
	<tr>  <!--元素划分行-->
		<th> <!--元素内部的文本通常会呈现为居中的粗体文本-->
		</th>
	</tr>
	<tr>
		<td> <!--元素内的文本通常是左对齐的普通文本--></td>
		<td></td>
	</tr>
</table>
<!--双标签-->

表单标签 form input ( text、password、submit、reset、radio、chsckbox、下拉列表、文本域)

<form>表单<!--一个区域，进行用户信息采集，内置表单元素-->
	<input type = "text" /><!--如采集账户姓名-->
	<input type =“password” /><!-- 如输入密码-->
	<input type =“submit” value = “提交”  name = "submit" /><!--提交按钮-->
	<input type =“reset” value = “重置” name = "reset" /><!--重置按钮-->
	<input type =“radio” value = "1" name = "Name" /><!--单选框 （要注意name值一样才能单选）checked表示默认项-->
	<input type =“checkbox” value = "2" name = "NAME" /><!--复选框 checked表示默认项-->
 </form>
 <!--form为双标签 input为单标签-->

下拉列表框 : select option

 <select>
 	<option>选项1</option>
 	<option selected = "selected">选项2</option>//选项2为默认选项
 </seleted>
 <!--都为双标签-->

文本域： Textarea

<form>
 个人简介：<br>
 <textarea cols ="列数" rows = "行数">
 		在这里输入内容...
 </textarea>
 <!--双标签-->

练习

网址：file:///D:/Desktop/hanyue/vscode/web_1/web%20and%20img/homework-1.html
网页截图：

浏览器、CSS、JS介绍

浏览器介绍：浏览器介绍
- 推荐使用edge浏览器和chrome浏览器
- 按键F12打开操作台
CSS介绍：CSS介绍与操作使用
JS介绍： js全称（javascript）中文是java脚本的意思。它的由来（在互联网刚兴起的时候，网络速度比较慢，而体验又是放在服务器端的，所以用户体验度非常差，为了了解这一难题，网景公司发明了livescript liverscript主要把表单验证功能从后台提升到了前端，因为不依赖网络，所以用户体验比较好。但是由于知名度比较差，知道的人很少，后来由于sum公司的java语言一飞冲天，爆红编程世界，为了跟风，博取知名度，网景公司把livescript 改成javascript. 后来微软眼红网景公司的成就，就发明了jscript。但是正因为此，导致了js的标准不同，所以给个大浏览器厂家带来了很大的麻烦。为了有一个统一的标准，js被提交到一个ecma组织，也正因为此，后来的js都是采用ecma标准（ECMAScript））
————————————————
原文链接：原文链接