html简介

注释

快捷键crtl+/

 <!--告诉浏览器使用的规范 -->
<!DOCTYPE html>
<html lang="en">
 <!--head 网页头部标签 -->
<head>
	 <!--meta 描述性标签，用来描述网站信息，一般用于搜索优化 -->
    <meta charset="UTF-8">
     <!--网页标题 -->
    <title>标题</title>
</head>
<body>

</body>
</html>

注意点

当浏览器打不开时需要在设置里配置

基本标签

标题标签< title >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1>一级标签</h1>
<h2>2级标签</h2>
<!--.-->
<!--。-->
<!--。-->
<!--<hn>n级标签</hn>-->
</body>
</html>

段落标签< h1 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1>一级标签</h1>
<h2>2级标签</h2>
<!--.-->
<!--。-->
<!--。-->
<!--<hn>n级标签</hn>-->
<!--段落标签-->
<p>段落标签</p>
<p>锻炼</p>
</body>
</html>

换行标签

<br>
<br/>

段落的间距比较大，换行之间没有间隔

水平线标签< hr >

<hr/>或<hr></hr>

字体样式标签

粗体<strong></strong>
斜体<em></em>

特殊符号

空 格
空 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
&gt >;
&lt <;
&copy;

图片标签 < img >

<!--
<img src="图像地址" alt="图像的替代文字" title=”鼠标悬停文字“ width=”宽度“ height=”高度“
-->

../ 返回上一级目录

<img src="" alt="图片替代文字">

label

<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>
//将label标签与组件绑定，单击label会触发相关组件

超链接 < a >标签

<!--<a href="超链接地址" target="在哪个窗口打开" >显示的图片或文字</a>-->
<!-- _blank 在新标签页中打开 -->
<!-- _self 在当前标签页中打开 默认-->
<a href="https://www.baidu.com/" target="_blank" >hello</a>

锚链接

<a name="top"></a>
<a href="#top">回到top</a>
<a href="myfirsthtml#top">回到myfirsthtml</a>//跳转到Firsthtml的<a name="top"></a>
<!--
功能性链接
邮箱链接：mailto
qq链接
-->
<a href="mailto:xxxx@qq.com">点击跳转到我的邮箱</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?">
    <img border="0" src="http://wpa.qq.com/pa?" alt="点击这里给我发消息" title="点击这里给我发消息"/>
</a>

块元素与行内元素

块元素

无论内容多少，独占一行（p,h1~h6...）

行内元素

行的宽度可以被内容撑开，行内元素可以共占一行(a strong em)

列表

<!-- 有序列表 -->
<ol>
    <li>java</li>
    <li>python</li>
    <li>c</li>
    <li>c++</li>
    <li>c#</li>
</ol>
<!-- 无序列表   -->
<ul>
    <li>java</li>
    <li>python</li>
    <li>c</li>
    <li>c++</li>
    <li>c#</li>
</ul>
<!-- 自定义列表 
    dl 标签
    dt 列表名称
    dd 列表内容
-->
<dl>
    <dt>列表名称</dt>
    <dd>java</dd>
    <dd>pthon</dd>
    <dd>c</dd>
    <dd>c++</dd>
    <dd>c#</dd>
</dl>

表格table

<!--th 定义表头
	tr 定义行
	td 定义列
border-collapse: collapse;设置表格为合并边框模式
-->

<table border="1">
    <tr>
        <!--colspan 跨列 align 对齐格式-->
        <td colspan="4" align="center">学生成绩</td>
    </tr>
    <!--rowspan 跨行-->
    <tr>
        
        <th rowspan="2">name</th>
        <td>la</td>
        <td>en</td>
    </tr>
    <tr>
        <td >line</td>
        <td>10</td>
        <td>99</td>
    </tr>
    <tr>
        <td>ks</td>
        <td>10</td>
        <td>99</td>
    </tr>
</table>

视频&音频

<!--音频与视频
video  src 相对地址 可以控制（即显示） 自动播放
-->
<video src="../video" controls autoplay></video>
<audio src="../audio" controls autoplay></audio>

网页结构

<hander><h2>网页头部</h2></hander>
<section><h2>网页主体</h2></section>
<footer><h2>网页脚部</h2></footer>

iframe内联框架

<!--<iframe src="引用页面地址" name="标识名" frameborder="0" width="1000" height="1000"></iframe>-->
<iframe src="" name="hello" frameborder="0" width="1000" height="1000"></iframe>
<a href="https://www.baidu.com" target="hello">change</a>

表单form

<form action="testlist.html" method="get">
    <p>name:<input type="text",name="username"></p>
    <p>password:<input type="password" name="pwd"></p>
    <p>
        <input type="submit" value="提交">
        <input type="reset">
    </p>

</form>

get 会在地址栏暴露提交的信息不安全，但高效

post 不会，更安全，传输大文件

单选框

<input type="radio" name="sex" value="girl" checked>
<input type="radio"name="sex" value="boy">
name 表示组 名字需要一样否则非单选
checked 表示默认

多选框

<input type="checkbox" value="sex" nmae="hobby"checked>性
<input type="checkbox" value="yg" nmae="hobby" checked>游戏

按钮

<input type="button" value="点击变成" name="btn1">
<input type="image" src="testtable.html" >
<input type="submit">
<input type="reset">

下拉框

<select name="country" >
    <option value="china">ch</option>
    <option value="china" selected>en</option>
    <option value="china">am</option>
    <option value="china">eth</option>
</select>
selected 默认

文件域&文本域

<textarea name="textarea" cols="100" rows="100">文本内容</textarea>
<input type="file" name="files">

简单验证&搜索框&滑块

<input type="search" value="搜索框">

简单验证功能的

<input type="email" name="email">
<input type="url" name="url">
<input type="math" max="100" min="0">

滑块

<input type="range" max="100" min="0" step="3" >

常用标签属性

hidden 隐藏域

readonly 只读属性

disabled 禁用

<label for="mark">word</label>
<input type="text" id="mark">
点击“word” 鼠标会跳转到id为mark 的标签

表单验证

placeholder 提示信息
<p>
name:
<input type="text"  name="username" placeholder="yourname">
</p>

required 非空
<p>password:<input type="password" name="pwd" required></p>

pattern="正则表达式" 验证输入字段的模式。
<input type="text" name="email" placeholder="email" pattern="w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*">

Html-01