2021
11/20
0:39
你的位置:首页 > 网页设计 > html完整语法学习

html完整语法学习

发布时间:2021-11-20 00:39:55

原标题:html完整语法学习

html5内容详解

第一个html

<!DOCTYPE html><html lang="en"><head> <!--meta 描述性标签,用来描述网站的一些信息--> <!--meta 标签一般用来做SEO--> <meta charset="UTF-8"> <meta name="key" content="第一个网站,学html"> <meta name="description" content="学习html"> <title>第一个网站</title></head><body>Hello,World!</body></html>

基本标签

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>基本标签学习</title></head><body><!--标题标签--><h1>一级标签</h1><h2>二级标签</h2><h3>三级标签</h3><h4>四级标签</h4><h5>五级标签</h5><h6>六级标签</h6><!--段落标签 将文字分为一个个段落--><p>两只老虎,两只老虎</p><P>跑得快,跑得快</P><P>一只没有眼睛</P><P>一只没有尾巴</P><P>真奇怪!真奇怪!</P><!--水平线标签--><hr/><!--换行标签 只是换了一行,但是还是一段-->两只老虎,两只老虎<br/>跑得快,跑得快<br/>一只没有眼睛<br/>一只没有尾巴<br/>真奇怪!真奇怪<br/><!--粗体,斜体--><h1>字体样式标签</h1>粗体:<strong>i love you</strong> <br/>斜体:<em>i love you</em> <br/>粗体:<B>i love you</B> <br/>斜体:<I>i love you</I> <br/><hr/><!--特殊符号-->空  格; <br/><!--&nbsp;代表一个空格-->空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格 <br/><!--&gt; 代表大于号 &lt;代表小于号-->&gt;&lt; <br/><!--版权符号-->&copy;</body></html>

图片标签

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图片标签</title></head><body><!--src:图片的地址绝对地址:使用盘符找到的文件 D:\代码\HTML\resources\image\2.png相对地址:相对于当前项目的文件 ../resources/image/2.png../返回上一级目录alt : 如果src路径下的文件未找到,就用这里名的内容替代title : 将鼠标放置在这个图片上面会显示title里卖弄的内容width : 图片显示的宽度height : 图片显示的高度--><img src='/images/loading.gif' data-original="../resources/image/2.png"  width="255" height="255"><!--从这里可以直接跳转到下面这个链接的down这个锚标记处--><a href="#">

链接标签

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>链接标签</title></head><body><!--使用a标签里面的name属性设置锚链接标记--><a name="top">顶部</a><br/><!--a标签:href : 必填,表示要跳转到哪里去target : 表示窗口在哪里打开   _blank : 在新标签中打开   _self : 在自己的网页中打开,属于默认设置a标签中间填写链接的文本或图片--><a href="#" target="_blank">点击我跳转到页面一</a><a href="#" target="_self">点击我跳转到百度</a><br/><a href='#'  width="255" height="255"></a><p> <a href='#'  width="255" height="255"> </a></p><p> <a href='#'  width="255" height="255"> </a></p><p> <a href='#'  width="255" height="255"> </a></p><p> <a href='#'  width="255" height="255"> </a></p><p> <a href='#'  width="255" height="255"> </a></p><p> <a href='#'  width="255" height="255"> </a></p><!--锚链接 : 1.需要一个锚标记 2.跳转到锚标记使用方法为 #+锚链接的标记名可以实现页面内的跳转,,也可从一个页面直接跳转到锚链接的标记位置--><a href="#top">回到顶部</a><a name="down">down</a><!--功能性链接: mailto:邮箱地址(可以将内容发送到这个邮箱里面) QQL链接--><a href="mailto:1713791837@qq.com">点击联系我</a><a target="_blank" href=""> <img border="0" src='/images/loading.gif' data-original="" /></a></body></html>

列表

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>列表</title></head><body><!--有序列表 : Orderly list 显示出有顺序的结构,前边用数字显示顺序应用范围:试卷,答题卡...--><ol> <li>Java</li> <li>Python</li> <li>汇编</li> <li>前端</li> <li>编译原理</li></ol><!--无序列表 显示出没有顺序的结构,前边用黑点显示应用范围:导航,侧边栏...--><ul> <li>Java</li> <li>Python</li> <li>汇编</li> <li>前端</li> <li>编译原理</li></ul><!--自定义列表dl : 列表标签dt : 列表名称dd : 列表内容--><dl> <dt>学科</dt> <dd>java</dd> <dd>linux</dd> <dd>spring</dd> <dd>c</dd> <dt>位置</dt> <dd>宁夏</dd> <dd>西安</dd> <dd>甘肃</dd></dl></body></html>

表格

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表格</title></head><body><!--表格 : table行 : tr列 : tdcolspan : 合并多少列为一列rowspan : 合并多少行为一行border : 设置边框宽度--><table border="1px"> <tr>  <td colspan="3">&nbsp;&nbsp;&nbsp;&nbsp;学生成绩</td> </tr> <tr>  <td rowspan="2">小破孩</td>  <td>语文</td>  <td>100</td> </tr> <tr>  <td>数学</td>  <td>100</td> </tr> <tr>  <td rowspan="2">憨憨</td>  <td>语文</td>  <td>100</td> </tr> <tr>  <td>数学</td>  <td>100</td> </tr></table></body></html>

视频与音频

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>媒体元素</title></head><body><!--视频和音频controls : 控制条autoplay : 设置视频自动播放--><video src='/images/loading.gif' data-original="../resources/video/2.qlv" controls autoplay></video><br/><audio src='/images/loading.gif' data-original="../resources/audio/ai.mp3" controls></audio></body></html>

页面结构

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>页面结构</title></head><body> <header>  <h1>网页头部</h1> </header> <section>  <h1>网页主体</h1> </section> <footer>  <h1>网页脚部</h1> </footer></body></html>

内联框架

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>内联框架</title></head><body><!--iframe : 可以将src里面的网页内容嵌套在本网页内src : 链接地址w-h : 宽和高还可以使用name属性:  将a标签里面的链接内容放置到iframe里面--><iframe src='/images/loading.gif' data-original="" name="hello" width="855px" height="512px"></iframe><a href="" target="hello">点击跳转</a></body></html>

form表单

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表单</title></head><body><!--表单formaction : 提交到哪个位置,可以是网站也可以是请求处理地址method : 提交方式,,有post与get  get方式提交,数据可以在url里面看到,不安全,但高效  post方式提交:比较安全,能够提交数据量较大的文件--><h1>注册</h1><form action="1.我的第一个html.html" method="get"> <!--文本输入框 : type="text"  value="你好帅" 默认初始值  maxlength="8" 最多能输入几个字符  size="30"  文本框的长度  readonly 只读  placeholder 提示的默认信息 只能用在输入框上  required 非空判断,表示此字段必须填写 只能用在输入框上 --> <p>名字:<input type="text" name="userName" placeholder="请输入用户名" required> </p> <!--密码框 : type="password"  hidden 隐藏,将这个框用户看不到,但是却是存在的,可以放置默认值  --> <p>密码:<input type="password" name="pwd" hidden value="123456"> </p> <p>性别:  <!--单选框:  type="radio"  value:单选框的值  name : 表示组,name值一样则表示为一组数据,不能同时选择两个  disabled : 禁用,禁止选择男性  -->  <input type="radio" value="boy" name="sex" disabled>男  <input type="radio" value="girl" name="sex">女 </p> <p>  <!--多选框   type="checkbox"   value:多选框的值   name : 表示组,name值一样则表示为一组数据  -->  <input type="checkbox" value="sleep" name="hobby">睡觉  <!--checked : 默认选中-->  <input type="checkbox" value="code" name="hobby" checked>敲代码  <input type="checkbox" value="chat" name="hobby">聊天  <input type="checkbox" value="game" name="hobby">游戏 </p> <p>  <!--按钮  type="button"  name : 按钮名称  value : 按钮上显示的内容   -->  <input type="button" name="btn1" value="点击按钮">  <!--图片按钮 相当于提交按钮-->  <input type="image" src='/images/loading.gif' data-original="../resources/image/2.png" width="50px" height="50px"> </p> <p>国家:  <!--下拉框  使用select标签  name :列表的名称,后台可以获得列表名称  value : 传到后端的值  -->  <select name="country">   <option value="china">中国</option>   <option value="usa">美国</option>   <!--selected 表示默认选择法国-->   <option value="fa" selected>法国</option>   <option value="ying">英国</option>  </select> </p> <p>反馈:  <!--文本域  textarea标签  cols : 默认显示几列  rows : 默认显示几行  -->  <textarea name="textarea" cols="30" rows="10">默认文本</textarea> </p> <p>  <!--文件域-->  <input type="file" name="files"> </p> <p>  <!--邮箱验证 输入的值必须添加@并且前后都有值-->  邮箱:<input type="email" name="email"> </p> <p>  <!--url验证 输入的值必须是一个网址-->  url:<input type="url" name="url"> </p> <p>  <!--数字验证 输入的值必须大于0小于100并且是10的倍数  max : 最大值  min : 最小值  step : 步长,每次加几  -->  数字:<input type="number" name="num" max="100" min="0" step="10"> </p> <p>  <!--滑块  range 标签  可以在参数中获取得到的多少数值  -->  滑块:<input type="range" name="voice" min="0" max="100" step="2"> </p> <p>  <!--搜索框-->  搜索:<input type="search" name="search"> </p> <p>  <!--增强鼠标可用性  label标签  也就是在点击label这个标签里面的内容时,会自动将光标锁定到输入框id为for属性里面的内容  -->  <label for="work">你点我逝世:</label>  <input type="text" id="work"> </p> <p>  <!--pattern 正则表达式,这里输入的东西必须满足pattern的规则-->  自定义邮箱:  <input type="text" name="diyEmail"    pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"> </p> <p>  <!--提交按钮 : type="submit" -->  <input type="submit">  <!--重置按钮 : type="reset"-->  <input type="reset"> </p></form></body></html>



原标题:html完整语法学习

关键词:

转载请保留本文网址: http://www.www.d5897.com/a/1255397.html
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#www.d5897.com (#换成@)。
您可能感兴趣的文章
Baidu