pc端目录在页面左边，手机端目录在右下角
创建html文件
在目标位置创建文件夹，在vscode中打开文件夹，创建html文件
英文! + tab 键自动生成基础代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html><title> </title> 之间填写网页标题。
标签基本都在<body></body>间填写。
注释：ctrl+/
保存：ctrl+s
浏览器打开：alt+b
基本标签
标题<h1></h1>~<h6></h6>
段落<p></p>
换行<br>（单标签）
分割线<hr>
<body>
<h1>这是h1标签</h1>
<hr>
<h2>上面是hr标签分割线效果，这是h2标签</h2>
<p>这是p标签<br>
br符换行效果
</p>
<p>两个p标签效果
</p>
</body>
文本标签
文本样式
字体加粗<strong></strong>或<b></b>
字体斜体<em></em>或<i></i>
删除线 <del></del>或<s></s>
下划线<ins></ins>或<u></u>
<body>
<p>
<b>加粗</b>
<i>斜体</i>
<s>删除线</s>
<u>下划线</u>
</p>
</body>
特殊符号
空格
1个 为1/2字符，utf-8字符编码中1汉字占3字符。
大于号>
小于号<
引号"
版权符号©
<body>
<p>
空 格<br>
大于号><br>
小于号<<br>
英文引号"<br>
版权符号©鸣弦<br>
</p>
</body>
图像标签：<img src=" " />
图像：JPG GIF PNG BMP
<img src="./img/1.jpg" alt="图像无法加载时显示文本" title="鼠标悬停显示文本" width="200" height="100" border="10" align="left" />
src：图片地址
绝对地址：
本地：盘符开始 D:\chapter02\images\1.jpg
网页：https://image.baidu.com/search/1.jpg
相对地址：在当前html文件位置“.”返回上一级目录，“/”进入。“..”返回上一级目录的上一级
./img/1.jpg
alt：替换文本 图像无法加载时显示文本
title：鼠标悬停显示文本
width：图像宽度 height：高度 单位像素
border：边框粗细 单位像素
align：left 图片居于页面（文字）左边；right 右；center 中
超链接标签<a>
页面间链接：<a href=" ">文本或图像</a>
可以跳转到另一个页面，在浏览器打开文件、邮箱、短信、电话、微信、qq、，空链接
<a href="https://baike.baidu.com/" target="_blank" id="lianjie" name="wenzi">这是文字超链接，链接到百度</a><br>
<a href="./2/demo2.html" target="_blank">
<img src="./img/1.jpg" width="200" title="这是图片超链接，链接到本地的demo2网页">
</a><br>
<a href="./img/1.jpg">这是在浏览器打开文件</a><br>
<a href="mailto:xxxxx@xxx.com;xxxxx@xxx.com">唤起邮箱</a><br>
<a href="sms:10086">短信</a><br>
<a href="tel:10010">拨打电话</a><br>
<a href="weixin://微信号">微信</a><br>
<a hfer="tencent://message/?uin=qq号&Site=&Menu-=yes">qq</a>
<a href="#">这是空链接</a><br>href：目标地址
target：打开方式 _blank新开窗口 _self本窗口打开
id：唯一标识
name：名字
点击链接效果依次为
空链接无效果
锚链接：从 <a href="#marker"></a> 跳转到 <a name=" marker"></a> 或 id="marker"所在的标签
同页面：从 <a href="#marker"></a> 跳转到 <a name=" marker"></a> 或 id="marker"所在的标签
不同页面：从 <a href="目标页面地址#marker"></a> 跳转到目标页面的 <a name=" marker"></a> 或 id="marker"所在的标签
列表
无序列表<ul><li></li></ul>（圆点）
ul 声明无序，li列表项
<ul>
<li>kabukimono</li>
<li>scaramouche</li>
<li>wanderer</li>
</ul>
有序列表<ol><li></li></ol>（数字）
<ol>
<li>kabukimono</li>
<li>scaramouche</li>
<li>wanderer</li>
</ol>
自定义列表<dl> <dt></dt> <dd></dd><dd></dd> <dt></dt> <dd></dd><dd></dd> </dl>
dl声明自定义
<dl>
<dt>声明列表项</dt>
<dd>列表内容</dd>
<dd>列表内容</dd>
<dd>列表内容</dd>
<dt>声明列表项</dt>
<dd>列表内容</dd>
<dd>列表内容</dd>
<dd>列表内容</dd>
</dl>
表格<table border=" "><tr><th></th></tr> <tr><td></td></tr> </table>
table表格 tr行 th表头单元格 td表格单元格
<table border="1" cellspacing="10" cellpadding="5" width="300" height="100" align="left">
<caption>标题</caption>
<tr>
<th>1行1列的标题</th>
<th>1行2列的标题</th>
……
</tr>
<tr>
<td>1行1列的单元格</td>
<td>1行2列的单元格</td>
……
</tr>
</table>
border 边框，必填。
cellspacing 单元格之间间距
cellpadding 单元格内文本与单元格框距离
width 表格宽度
height 高度
align 表格在网页中对齐方式
跨列（横向合并）colspan=" "
跨行（纵向合并）rowspan=" "
<table border="1">
<tr>
<td colspan="3">成绩</td>
</tr>
<tr>
<td rowspan="2">张三</td>
<td>语文</td>
<td>99</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
表单<form></form>
<input type=" ">标签
文本框<input type="text">
name文本框名称 value值,框内默认值 size文本框长度 maxlength可输入最大字符数
readonly只读,不可编辑
disabled 禁用,变灰
placeholder 提示文本变灰
required 必填
autofocus 鼠标自动选中这一行 ，打开页面后鼠标自动选中此框
pattern 验证是否符合正则表达式 （验证手机号等）
aotocomplete(on/off) 是否记录历史填写数据
密码框 <input type="password">
name value size maxlength
readonly disabled placeholder required autofocus pattern aotocomplete(on/off)
单选框<input type="radio" name=" " value=" ">选项
name 对单选框有分组功能，同一组单选框name属性需相同
value 尽量与后面选项对应
disabled
checked 默认选中此选项
多选框<input type="checkbox" name=" " value=" ">选项
name value
disabled checked
上传文件 <input type="file">
文本域 <textarea name="文本框" cols="30" rows="10"></textarea>
按钮（input/button）
提交按钮 <input type="submit">
常用属性value
提交按钮 <input type="submit">
自定义图片代替提交按钮<input type="image" src=" " width=" ">
自定义文字提交按钮<button type="submit">自定义</button>
或<input type="submit" value="自定义">
重置按钮 <input type="reset">
常用属性value
重置按钮 <input type="reset">
图片代替重置按钮<button type="reset"><img src=" "></button>
自定义文字重置按钮<button type="reset">自定义</button>
或<input type="reset" value="自定义">
无用按钮 <input type="button">
常用属性value
下拉框<select name=" "><option value=" ">选项</option></select>
select常用属性 size下拉菜单的可见选项数
multiple多选（按住ctrl键）
option常用属性 selected 默认选中此项
<body>
<form action="" method="post" name="注册表">
<p>
文本框（value size autofocus效果） <input type="text" name="文本框" value="框内默认值" autofocus size="50"
maxlength="可输入最大字符数" id="wenben">
</p>
<p>
文本框（placeholder效果）<input type="text" placeholder="placeholder效果">
</p>
<p>
密码框 （maxlength效果,最多可输6位）<input type="password" maxlength="6" name="密码框">
</p>
<p>
单选框（checked disabled效果）
<input type="radio" name="同一组需相同" value="选项一" checked disabled>选项一
<input type="radio" name="同一组需相同" value="选项二">选项二
<input type="radio" name="同一组需相同" value="选项三">选项三
</p>
<p>
多选框（checked效果）<br>
<input type="checkbox" name="duo同一组需相同" value="1选项一" checked>选项一<br>
<input type="checkbox" name="duo同一组需相同" value="2选项二" checked>选项二<br>
<input type="checkbox" name="duo同一组需相同" value="3选项三">选项三<br>
</p>
<p>
上传文件 <input type="file"><br>
文本域 <textarea name="文本框" cols="30" rows="10"></textarea>
<p>
提交按钮 <input type="submit"><br>
自定义图片代替提交按钮<input type="image" src="./img/1.jpg" width="40"><br>
自定义文字提交按钮<button type="submit">自定义提交</button><br>
或<input type="submit" value="自定义提交">
重置按钮 <input type="reset"><br>
图片代替重置按钮<button type="reset"><img src="./img/1.jpg" width="40"></button><br>
自定义文字重置按钮<button type="reset">自定义重置</button><br>
或<input type="reset" value="自定义提交">
图片代替重置按钮<button type="reset"><img src="./img/1.jpg" width="40"></button><br>
无用按钮 <input type="button" value="普通按钮"><br>
</p>
<p>
下拉框
<select name="下拉框" size="4" multiple>
<option value="a选项一" selected>选项一</option>
<option value="b选项二" selected>选项二</option>
<option value="c选项三">选项三</option>
</select>
</p>
</form>
</body>
未完待续
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
