一. html的基本语法
1.网页基本结构
实现一个网页需要用到的三个技术：
html - 决定网页中有哪些东西（决定网页中的内容）
Css - 负责网页中的样式和布局
Js - 负责网页中内容的改变（javascript、jQuery、Nodejs、Vue、...）
2.html基本结构
html是一种超文本标记语言（类似markdown语法），是通过不同的标记（标签）来给网页提供不同的内容。
html标签表示整个网页
head标签表示网页顶部的部分
body标签表示网页显示数据的内容部分
3.html基本语法
1）语法
双标签：<标签名 属性1=属性值1 属性2=属性值2 ...>标签内容</标签名>
单标签：<标签名 属性1=属性值1 属性2=属性值2 ...> 或者 <标签名 属性1=属性值1 属性2=属性值2 ... />
2）说明
标签名 - 标签名有哪些是固定的，哪些标签是双标签哪些标签是单标签是但标签也是固定的
属性 - 哪些标签有哪些属性是固定的；多个属性用空格隔开，属性名和值用=连接，属性值不管是什么都必须在双引号里面
标签内容 - 标签内容可以是文字也可以是其他的一个或者多个标签
<!--说明当前使用的html版本-->
<!DOCTYPE html>
<!--网页内容结构-->
<html lang="en">
<head>
<!-- 设置网页的编码方式 -->
<meta charset="UTF-8">
<!-- 设置网页标题 -->
<title>Title</title>
</head>
<body>
</body>
</html>
二. 常见的标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常见标签</title>
</head>
<body>
<!--===========文本相关标签=================-->
<!-- 1.标题标签：h1-h6 -->
1. 标题
<h1 id="top">标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<!-- 2.文字内容标签 -->
<p>我是段落1</p>
<p>我是段落2</p>
<font>我是font1 我是font2 我是font3</font>
<span>我是span1 我是span2</span>
<!-- 3.换行和空格标签和符号
html中的换行和空格都是无效的；
如果需要强制换行需要使用<br>标签，空格需要使用空格符：
- 空一格像素
  - 空一个空格
-->
<!--===========图片标签=================-->
<!--
img标签：
src属性 - 图片路径(决定需要显示的是哪张图片)
title属性 - 图片名称
alt属性 - 图片加载失败的时候显示的提示信息
-->
<!-- 显示本地图片 -->
<img src="img/397377.jpg">
<!-- 显示网络图片 -->
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">
<!--===========超链接=================-->
<!--
超链接标签在点击后可以自动跳转或者刷新出一个新的页面
a标签：
1）标签内容 - 决定的是可点击的部分
2）href属性 - 决定点击后跳转的目标位置
3）target属性 - 决定是在当前窗口中加载新的页面还是在新的窗口中加载新的页面
_self：在当前窗口中加载（默认）
_blank：在新窗口中加载
-->
<!-- 1.文字超链接 -->
<a href=""></a>
<a href="./02-html基础语法.html">基础语法</a>
<a href="#top">回到顶部</a>
<!-- 2.图片超链接 -->
<a target="_blank" href="https://www.baidu.com/"><img src="img/397377.jpg"></a>
<!--===========列表标签=================-->
<!--
1.无序列表：
ul标签 - 表示整个列表
li标签 - 表示列表中每个元素
2.有序列表：
ol标签 -
li标签 -
-->
<ul>
<li>Python数据分析和人工智能</li>
<li>前端开发</li>
<li>java分布式</li>
<li>UI/UE设计</li>
<li>测试</li>
</ul>
</body>
</html>
2.表单相关的标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单相关标签</title>
</head>
<body>
<!-- ===============1.input标签================== -->
<!--
type属性：
1）普通文本输入框（text）
value属性（重要） - 和输入框中的显示内容是双向绑定的
placeholder属性 - 输入框的输入提示信息
maxlength属性 - 限制输入框中最多能输入的字符的个数
2）密码输入框（password）
value属性 - 和输入框中的内容是双向绑定的
placeholder属性 - 输入框的输入提示信息
maxlength属性 - 限制输入框中最多能输入的字符的个数
3）单选按钮（radio）
4）复选按钮（checkbox）
5）普通按钮
...
-->
<input type="text" value="张三" placeholder="请输入用户名" maxlength="10">
<input type="password">
<input type="radio" name="sex" id="s1"><label for="s1">男</label>
<input type="radio" name="sex" id="s2"><label for="s2">女</label>
<input type="radio" name="sex" id="s3"><label for="s3">不明</label>
<br>
<br>
<input type="checkbox" value="篮球" name="interest" id="i1"><label for="i1">篮球</label>
<input type="checkbox" value="乒乓球" name="interest" id="i2"><label for="i2">乒乓球</label>
<input type="checkbox" value="羽毛球" name="interest" id="i3"><label for="i3">羽毛球</label>
<br>
<input type="color">
<br>
<input type="file">
<br>
<input type="time">
<input type="date">
<br>
<input type="button" value="确定">
<!-- ===============2.textarea(多行文本域)================== -->
<!--
标签内容 - 输入框中的显示内容
-->
<textarea cols="30" rows="10">没有意见</textarea>
<!-- ===============3.下拉列表：select================== -->
<!--
select标签 - 表示整个列表（获取select的value就是在获取当前选中的选项的value属性）
option标签 - 表示列表中的选项（标签内容和value属性都必须赋值）
-->
<select name="" id="city">
<option value="成都市">成都市</option>
<option value="北京市">北京市</option>
<!-- 设置 上海市 对应的选项处于默认选中状态 -->
<option value="上海市" selected="selected">上海市</option>
<option value="杭州市">杭州市</option>
<option value="深圳">深圳</option>
</select>
</body>
</html>
扫一扫
2088
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
