码迷,mamicode.com
首页 > Web开发 > 详细

前端 html基础第一节

时间:2019-10-15 22:54:07      阅读:186      评论:0      收藏:0      [点我收藏+]

标签:html基础   tab   就是   file   读写   倾斜   网页   相对   使用   

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>html的部分应用</title><!--网页的名字 1-->
</head>
<body><!--所编程序需要在body中书写-->

<h1 align="center">标题</h1><!--标题标签总共有6个,1的标题最大,里面附属内容可以放置标题位置,现所加为居中       2-->
<h4>标题</h4>

<p>这是个段落</p><!--标签作用为标签内的内容为单独一段     3-->
这是个段落
这是个段落<!--未加p标签故二者在同一行-->

<p><a href="https://www.baidu.com">百度</a></p><!--超链接标签,会形成一个按钮,href后面写地址,两个标签中间是按钮名称     4-->
<p><a href="https://www.baidu.com" target="_blank">百度</a></p><!--后面加的trrget的内容,意思是在新的页面打开百度-->
<p><a href="https://www.baidu.com" target="_parent">百度</a></p><!--在原页面打开,如果不添加默认原网页打开-->

<p><a name="名称"></a></p><!--锚记标签   在需要跳转到的位置处添加一个锚记,name后写锚记名称       5-->
<p><a href="#名称">同页演示按钮</a></p><!--跳转按钮,herf后写#锚记名称(锚记name后自己起的名称),双标签中写按钮名称  点击后会跳转至锚记所处位置-->
<p><a href="文件名#锚记名称"></p>换页演示按钮(因为没有相对应锚记故跳转不了会产生错误,仅为教学)</a><!--#前面加文件名可以跳转至文件名所处页面-->
<p><a href="帖子2.html#章鱼" target="_blank">跳转至帖子2</a></p>

<hr width="宽度" color="颜色" size="线粗细"/><!--水平线标签,里面可以加一些附属内容,默认为一条黑色水平线    6-->
<hr width="50" color="red" size="60"/>

<br/><!--换行标签    7-->
锄禾日当午<br/>
汗滴禾下土
谁之盘中餐
粒粒皆幸苦<!--没添加标签所以为同一行-->

?<!--空格标记符号,单纯空格没用,或者使用全角下的空格     8-->
<p>爱         情</p>
<p>爱???????情</p>

<pre>需要填写的东西/pre><!--预格式化标签,把要写的东西写在里面就会在网页上展示出来,不会被读写    9-->
<pre>
                       爱情<!--空格此时就可以用-->
    123456
</pre>

<p><em>嗯嗯</em></p>
<p><i>嗯嗯</i></p><!--倾斜标签   10-->

<p><b>加粗</b></p>
<p><strong>加粗</strong></p><!--加粗标签   11-->

<p><big>字体放大</big></p><!--放大缩小标签    12-->
<p>正常字体</p>
<p><small>字体缩小</small></p>

<p><code>放置代码</code></p>

<p><del>删除线</del></p><!--     13         -->

<p><sub>下标</sub></p><!--上下标        14-->
<p><sup>上标</sup></p>
<p>H<sub>2</sub>SO<sup>4</sup></p>

<img src="图片路径" alt="信息提示(因为没图片路径,所以加载不出来,添加这个后就显示这个的内容)" title="图片描述" width="图片宽度" height="图片高度" /><!--图片    单位:像素(px)百分比(%)-->
<img src="延安.jpg" alt="延安" title="延安宝塔山" width="50"/><!--图片      15-->

<h3 >接下来学习表格</h3><br/>
<br/>
<table border="边框线" cellspacing="边框单元格间距" cellpadding="单元格填充(边距)"width="表格宽度"><!--表格标签以及所属内容     16-->
    <caption>表头</caption>
    <tr><!--控制行   多少行-->
        <th rowspan="2">标题行</th><!--加粗所写内容       所加为跨列标识,数字为几就合并几列    列-->
        <td>普通行</td><!--控制列-->
        <td>普通行</td>
    </tr>
    <tr>                      <!--跨行跨列均需要删除所跨的那个-->
        <td colspan="2">跨行</td><!--所加为跨行,数字为几就合并几个-->
    </tr>
</table>

<table >
    <caption>班级信息</caption>
    <tr>
        <th colspan="2">三年级</th>
        <th colspan="2">二班</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>男</td>
        <td>18</td>
        <td>汉</td>
    </tr>
</table>

<p><h3>列表</h3></p>
    <p><h4>无序</h4></p>
<ul type="disc"><!--无序列表   默认实心圆(disc)    方块(square)   空心圆(circle)     17-->
    <li>碧玉妆成一树高</li>
    <li>万条垂下绿丝绦</li>
    <li>不知细叶谁裁出</li>
</ul>
    <p><h4>有序</h4></p>
<ol type="1" start="2"><!--有序列表    type  默认数字1   还有字母   a  A  英语数字  i   I  start 代表从数字几开始      18  -->
    <li>碧玉妆成一树高</li>
    <li>万条垂下绿丝绦</li>
    <li>不知细叶谁裁出</li>
</ol>
    <p><h4>自定义</h4></p>
<dl><!--自定义列表          19-->
    <dt>李白</dt><!--dt顶格可以作为一个名词-->
    <dd>字太白,号青莲居士</dd><!--dd往后一点,可以解释名词-->
</dl>

<h3 >接下来学习表单</h3><br/><!--                20                   -->
账户<input type="text"/><!--文本框  所输入内容可见 -->
密码<input type="password"/><!--密码框  所输入内容不可见-->
性别<input type="radio" name="aiqing"/>男<input type="radio" name="aiqing"/>女<!--单选框按钮,name中必须一样-->
爱好<input type="checkbox"/>打篮球 <input type="checkbox"/>打羽毛球 <input type="checkbox"/>打乒乓球<!--复选框     -->
文件域<input type="file" width="10" height="50"/><!--存放文件的地方,可以些东西也-->
<input type="submit"/><!--提交按钮      -->
<input type="reset"/><!--重置按钮-->
<button>提交</button><!--按钮,双标签中写按钮名称-->
<input type="button" value="提交"/><!--按钮    value中书写按钮名称-->
<select name="" id=""><!--下拉列表-->
    <option value="2010">2010</option><!--双标签中添加内容    页面会显示所写内容-->
    <option value="2011">2011</option>
    <option value="2012" selected>2012</option><!--添加了selected   会优先显示该内容-->
</select>年
<textarea name="" id="" cols="30" rows="10"></textarea><!--文本域,cols 代表所留区域的列数   rows代表所留区域的行数-->
<fieldset>
    <legend>表单</legend><!--双标签中写表单头名字-->
    内容<!--这里可以书写自己要的内容-->
</fieldset>

</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>帖子2</title>
</head>
<body>
<a name="章鱼"></a>
<h1>成功就是把复杂的问题简单化,然后狠狠去做。</h1>

</body>
</html>

前端 html基础第一节

标签:html基础   tab   就是   file   读写   倾斜   网页   相对   使用   

原文地址:https://blog.51cto.com/14576753/2442677

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!