HTML的基础标签和软件配置

HTML的基础标签和软件配置

这里使用的软件是Visual Studio Code
下载地址 : https://code.visualstudio.com/Download.

---

基础环境配置

下载完成后打开界面

• 修改系统语言为中文
  点击左侧栏最后一个按键输入Chinese
  
  lnstall下载
  
  下载完成后点击右下角重启vscode
• 下载插件
  
  点击工具和语言左侧栏找 HTML CSS Support下载
  然后下载以下两个插件
  
  
• 下载完成后桌面新建一个文件夹
  
  点击左上角打开文件夹并新建一个后缀为.html的文件
  输入! + Tab 快捷载入基本结构
  

HTML的基本标签

1. 标题段落和字体

标题
<h1></h1>  h后数字是从1--6表现出来标题字号由大到小

段落
<p> </p>

换行
<br />  <hr />(换行并加分割线)

字体
<strong>加粗</strong>       //strong 和 b 是加粗
<b>加粗</b>                  //em 和 i 是倾斜    
<em>倾斜</em>               //del 和 s 是删除线
<i>倾斜</i>                   //ins 和 u 是下划线
<del>删除线</del>
<s>删除线</s>
<ins>下划线</ins>  
<u>下划线</u>  

2. 图片问题与超链接

<img src="2dse.jpg" alt="图片显示错误"  title="图片" />

1.基本属性
src=" " 双引号写图片路径  src=""这个必须放最前面
alt=" " 双引号内写文字 当图片无法显示时alt内部文字替换
title=" " 当鼠标放图片上面时显示的内容
width 设置图像的宽度   
height  设置图像的高度    这两个属性只修改一个 另一个会自动缩放
border 设置边框的像素 在HTML中暂不修改  在css中修改


2.路径问题   
<img src="   ">    
src 内的填图片的路径
若图片和HTML文件在同一级 
即左侧第二个（打开的编译器的下面的东东）若在一个里面
则为 图片名字加格式 如 1.jpg 如在包含的文件夹里面 
为 （文件夹名称）/ 图片名字加格式 如 src="图片/1.jpc"
若HTML文件在图片的下一级 为 ../图片名字加格式 


//绝对路径的使用 
<img src="图片地址或者网站上复制的图片地址"/>
<img src="https://p5.ssl.qhimgs1.com/sdr/400__/t0104b28e2d6910bfcf.jpg"/>


3.超链接格式
<a href="https://pvp.qq.com/" target="_blank">王者荣耀官网</a>
<a href="网址" target="_blank或_self" >文字或图片</a>   
网址格式为 http://www.4399.com//
_blank 是另起一页打开超链接
_self 是覆盖本页打开超链接
<a href="#">空链接</a>


4.锚点链接
锚点即使传送点 需要的是传送起始链接和传送点的标记
传送链接格式
<a href="#+id">文字或图片</a>  例如 <a href="#666">返回首页</a>
传送点
原为<h1>***</h1>
改为
<h1 id="666">***</h1>


5.特殊字符  常用
空格符   &nbsp;
> 大于号 &it;  &#60;
< 小于号  &gt;  &#62;
& 和号  



6.视频元素和音频元素
<video src="路径" controls autoplay></video>
<audio src="路径" controls autoplay></audio>
controls是显示窗口(视频和音频)(没有这个选项页面不会显示视频播放按钮啥的)
autoplay是自动播放

3. 表格

表格的制作
1.基本格式
    <table>
        <tr> <td>123</td> <td>456</td> <td>789</td></tr>
        <tr> <th>123</th> <th>456</th> <th>789</th></th>
    </table>
    <table> 为一个大格子 <tr> 为一行  <td>或者<th>为单元格
    <th>一般用于首行 能让字体加粗且居中 <td>为普通单元格

2.表格属性
 放在table框中 在HTML中不怎么使用主要在css中用  例如<table align="center"> </table>
 1.单元格在界面的位置 align       (left ,center ,right)
 2.单元格边框的像素 border        0即是没有边框 
 3.内容与单元格边框的距离 cellpadding  
 4.单元格之间的空白 cellspacing
 5.单元格的宽度 width
 6.单元格的长度 height

 3.单元格合并
 跨行(上下合并)   rowspan="合并的个数"
 跨列(左右合并)   colspan="合并的个数"
 把代码加到起始处，然后删除掉合并后的单元格

 4.<thead>和<tbody>标签
 俩标签都成对存在
 第一个标签用于表格第一行课通过修改这俩标签而省去了修改单元格的麻烦
 俩标签都直接写在<table>的下一级
 <tr>的上一级

4. 列表

1.无序列表
基本结构( <ul>里包含很多<li>且<ul>里只能包含<li> )( <li>里面可以包含其他东西 )
<ul>
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
<li> 
<a href="#">QQ</a>
<p> <li>里面可以包含其他东西 </p>
</li>
</ul>



2.有序列表
其他结构同无序列表  <ul>换成<ol>然后里面包含<li>


3.
自定义列表无项目符号
基本结构 
<dl>
<dt> 名词1 </dt>
<dd> 名词1解释1 </dd>
<dd> 名词1解释2 </dd>
<dd> 名词1解释3 </dd>
<dt> 名词2 </dt>
<dd> 名词2解释1 </dd>
<dd> 名词2解释2 </dd>
<dd> 名词2解释3 </dd>
</dl>

5. 表单和基本验证

1.form(表单域)(所有提示信息和标签都写在form里)(以下所以都得有name标签)
form的语法
<form action="url地址(提交到后台的地址)" method="提交方式(get||post)" name="表单域名称">




</form>

2.input     <input type="" name="" value="" id=""/>
(1)输入格式-----往type=""双引号里输入的东西
button----定义点击按钮(点击效果为运行js脚本)
checkbox---多选框
radio---单选框    (name 一样时才能起单选功能)
file---上传文件
text---单行输入文本
password---单行输入不可见的文本(密码)
reset---定义重置按钮
submit---定义提交按钮
(2)input属性 
name---定义input元素名称
value---自定义显示属性
checked---规定默认选项  使用语法<input type="" checked="checked">
maxlenth---定义输入的字符最大长度
size---定义文本框的长度
readonly---只能看不能改不需要参数直接写上即可
disabled---禁用属性
hidden---传递默认值(vaule) 表单对应地方直接消失但是还是能传默认值


3.label标签(点提示信息光标移动到id框内)
<lable for="id">提示信息</lable>


4.select标签(下拉显示)(在opinion中加入一条语句设置为默认项 selected="selected")
籍贯:
<select>
<option> 河南 </option>
<option> 河北 </option>
<option> 湖北 </option>
<option selected="selected"> 湖南 </option>

</select>(多行输入)


5.textarea文本域
<textarea cols="每行的字符数" rows="显示的行数">默认显示的文字</textarea>


6.验证属性
(1)邮箱验证 type="email" (能基本验证输入的格式正确与否)
(2)url地址验证 type="url
(3)数字验证 type="number" max="" min=""  (max和min控制数字范围)
(4) 滑块 type="range" min="" max="" step=""  (step代表每次移动+||-的数)
(5) 搜索框 type="search"


7.表单的初级验证
placeholder---在文本框显示的提示内容，输入文字后消失
required---验证表单属性是否为空
正则表达式