W3C
World Wide Web Consortium(万维者联盟)
-
W3C标准包括:
结构化标准语言(HTML,XML)
表现标准语言(CSS)
行为标准(DOM,ECMAScript)
开发工具
- IDEA
- WebStorm
- vsCode
- ...
HTML的基本信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
</body>
</html>
- <!DOCTYPE html>
声明使用的规范 - <head> </head>
网页头部 - <meta>
描述性标签,一般用来做SEO - <title>
网页标题 - <body></body>
网页主体
网页基本标签
- 标题标签
<body>
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
...
</body>
- 段落标签
<body>
<p>第一行</p>
<p>第二行</p>
</body>
- 换行标签
<body>
第一行
<br/>
第二行
<br>
</body>
- 水平线标签
<body>
<hr/>
</body>
- 粗体 斜体
<strong>粗体</strong>
<em>斜体</em>
- 图片标签
<img src="图片地址" alt="加载失败显示内容" title="鼠标悬停显示内容" width="图片宽度" height="图片高度">
- 链接标签
<a href="链接路径" target="目标窗口位置 常用值 _self _blank">点击跳转</a>
<a href="链接路径" target="目标窗口位置 常用值 _self _blank">
<img src="图片地址" alt="加载失败显示内容" title="鼠标悬停显示内容" width="图片宽度" height="图片高度">
</a>
_blank 在新标签打开
_self 默认值,自己页面打开
<a name="top">顶部</a>
<a href="#top">回到顶部</a>
<a href=".../4.html#top">回到4.html的top</a>
<a href="mailto:XXXXXX@qq.com">点击联系我</a>
- 列表标签
有序列表:试卷,问答,带编号
<ol>
<li>java</li>
<li>vue</li>
<li>html</li>
</ol>
无序列表:导航,侧边栏....黑圆点
<ul>
<li>java</li>
<li>vue</li>
<li>html</li>
</ul>
自定义列表:公司网站底部
<dl>
<dt>列表名称</dt>
<dd>列表内容1</dd>
<dd>列表内容2</dd>
<dd>列表内容3</dd>
</dl>
- 表格标签
<table border="1px">
<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>
<!--colspan跨列,三列合并为一列-->
<tr colspan="3">
<td>3</td>
</tr>
<!--rowspan跨行,合并为一行-->
<tr>
<td rowspan="2">4-1</td>
<td>4-2</td>
<td>4-3</td>
</tr>
</table>
- 媒体元素(音频,视频)
<!--controls控制条 autoplay打开自动播放-->
<video src="视频资源地址 .../x.mp4" controls autoplay></video>
<audio src="音频资源地址 .../x.mp3" controls autoplay></audio>
- iframe内联框架
<!--iframe内联框架-->
<iframe src="引用页面地址" name="框架标识名"></iframe>
特殊符号
代表一个空格
> 大于符号
< 小于符号
© 版权符号
...
& 开始 ; 结尾
页面结构分析
<body>
<header>网页头部</header>
<section>网页主体</section>
<footer>网页脚步</footer>
<aside>相关内容或应用,多用于侧边栏</aside>
<nav>导航类辅助内容</nav>
</body>
表单语法
form标签，action属性为所提交的目的地址，method选择提交方式
可以选择使用post或者get方式提交
form表单.png
其他属性.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单from
action：表单提交的动作，可以是交给一个网址，也可以是交给一个请求处理地址
method：post get请求方式-->
<form action="xxx/xxx" method="get">
<!--文本输入框：input type="text"-->
<p>用户名：<input type="text" name="username" value="请输入用户名" maxlength="10" size="20"></p>
<p>密 码：<input type="password" name="password" placeholder="请输入密码" required="required"></p>
<!-- submit提交表单，reset清空-->
<p><input type="submit"> <input type="reset">
</p>
<!-- radio单选框标签 value即单选框的值，在提交时对应value
name：单选框组名，在同一个组内的radio标签同时只能选中一个，name值在提交时对应key
checked:默认被选中
-->
<p>性别：<input type="radio" value="boy" name="sex"/>
<input type="radio" value="girl" name="sex"/>
</p>
<p>爱好：
<input type="checkbox" value="b" name="hobby">打篮球
<input type="checkbox" value="s" name="hobby">唱rap
<input type="checkbox" value="d" name="hobby">跳舞
</p>
<p><input type="button" name="btn1" value="按钮上文字"><!--按钮-->
<input type="image" src="xxx/xxx"><!--图片按钮默认是提交：和submit类似-->
</p>
<p><!--下拉框：selected:默认选项-->
你来自：
<select name="location">
<option value="china">中国</option>
<option value="us" selected>美国</option>
<option value="japan">日本</option>
</select>
</p>
<p><!--文本域-->
反馈：
<textarea name="text" id="10" cols="30" rows="10" >文本内容</textarea>
</p>
<p><!--文件域-->
<input type="file" name="files">
<input type="button" name="upload" value="上传">
</p>
<!--邮件：会简单验证是否是邮箱地址
url：会简单验证是否是网络地址
number：数字验证-->
<p>邮箱：<input type="email" name="email">
url：<input type="url"></p>
<!--数字验证
max最大数量
min 最小数量
step 每次点击增加或减少的数量-->
<p>商品数量<input type="number" name="num" max="100" min="1" step="1"></p>
<!--滑块-->
<p>音量：<input type="range" min="0" max="100" name="voice" step="2"></p>
<!--搜索框-->
<p>搜索：<input type="search"></p>
<p><!--增强鼠标可用性-->
<label for="mark">你点我试试</label>
<input type="text" id="mark">
</p>
</form>
</body>
</html>
