初识HTML/CSS之HTML篇

1 篇文章 0 订阅

HTML是一种超文本标记语言(HyperText Markup Language),是一种用于创建网页的标准标记语言。可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析。

首先是HTML的基本结构,head标签里面用于设置标题栏(title)以及插入一些脚本(script),样式文件(CSS)和meta信息。body标签存放HTML的主体内容。

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


</body>
</html>

下面介绍HTML的几个常用标签(由于标签显示与浏览器有冲突,所以涉及的标签均未写尖括号
1、标题标签
共有六级标题用h1~6来表示:

<body>
<h1>这是一级标签</h1>
<h2>这是二级标签</h2>
<h3>这是三级标签</h3>
<h4>这是四级标签</h4>
<h5>这是五级标签</h5>
<h6>这是六级标签</h6>
</body>

这里写图片描述
2、段落(p)、换行(br)、分割线(hr)、斜体(em)、加粗(strong)
段落标签默认情况下会有一定的边距,可以进行设置

<body>

<p><em>这是第一行</em><br/><strong>这是第二行</strong></p><hr/>

</body>

这里写图片描述
3、注释和特殊符号(后面都要带分号,还是由于冲突省略)
空格(&nbsp)、大于号(&gt)、小于号(&lt)、引号(&quot)、版权符号@(&copy)、注释(请参考代码,快捷键单行:ctrl+/,多行:ctrl+shift+/)

<body>
<!--这是一个注释-->
<p>祝&nbsp;大&nbsp;家&nbsp;五&nbsp;一&nbsp;节&nbsp;快&nbsp;乐&nbsp;!</p>
<p>&copy;&quot;wk&quot;</p>
<p>&lt;2017/4/29&gt;</p>
</body>

这里写图片描述
4、图像标签(img)
src属性指定图片所在位置,相对路径或绝对路径均可(这里指的是当前html文件的路径),返回上级目录可使用../
alt用于指定图片的替换文本
工程中创建一个img目录,放入一个图片。
这里写图片描述

<p>我是小明</p>
<img src="img/xiaoming.jpg" alt="正在加载"/>

这里写图片描述

然后将html文件放入test文件夹中

<p>我是一个苹果</p>
<img src="../img/apple.jpg" alt="正在加载" width="200" height="200"/>

这里写图片描述
4、超链接标签(a)
href指定URL,target指定目标窗口位置(当前或新建),并指定点击对象(文本图像或网址)
/test下创建一个second.html文件作为跳转界面。

<a href="second.html" target="_blank">传送门</a>

这里写图片描述
点击后跳转到……
这里写图片描述

5、锚链接
类似于超链接,跳转到某一具体位置(当前网页或其他网页),首先要创建跳转标记,即设置name属性,通过#name创建跳转链接

<a href="second.html#mark" target="_blank">传送门</a>

在second.html中创建锚点

<a name="mark">你好!我的名字叫纳什男爵</a>

跳转后可直接定位到second.xml中的指定位置处。

6、列表
(1)有序列表(ol)
li标签指定列表项
type属性还可指定为A或a作为列表序号


<ol type="数字">周列表
    <li>星期一</li>
    <li>星期二</li>
    <li>星期三</li>
    <li>星期四</li>
    <li>星期五</li>
</ol>

这里写图片描述
(2)无序列表(ul)
square指前面的小方块,dics为实心圆(默认值),circle为空心圆

<ul type="square">劳动节
    <li>五月一号</li>
    <li>五月二号</li>
    <li>五月三号</li>
</ul>

这里写图片描述
(3)自定义列表(dl)
dt标签可指定不同类型列表项,dd指定列表项

<dl>
    <dt>羊族</dt>
    <dd>喜羊羊</dd>
    <dd>美羊羊</dd>
    <dd>懒羊羊</dd>
    <dt>狼族</dt>
    <dd>灰太狼</dd>
    <dd>红太狼</dd>
</dl>

这里写图片描述

7、表格(table)
tr指定行,td指定单元格
boder属性指定表格边界大小,align指定表格对齐方式(默认left),colspan和rowspan分别指定单元格跨列或跨行数

<table border="1" align="left">
    <tr><td colspan="3">成绩表</td></tr>
        <tr>
            <td rowspan="2">张三</td>
            <td>语文</td>
            <td>98</td>
        </tr >
         <tr>
            <td>数学</td>
            <td>100</td>
        </tr> <tr>
            <td rowspan="2">李四</td>
            <td>语文</td>
            <td>99</td>
        </tr >
         <tr>
            <td>数学</td>
            <td>99</td>
        </tr>
</table>

这里写图片描述

8、表单(form)
登录表或信息表等,action指定发送表单数据的地址,method指定发送方式(post和get),在input标签中的type属性选择类型,text指文本框,password密码框,checkbox复选框等等

<form action="second.html" method="post">
    <p>QQ2050登录界面</p>
    <p>姓名:<input name="name" type="text"/></p>
    <p>密码:<input name="password" type="password" maxlength="8"/></p>
    <p>开启声音<input type="checkbox" checked="checked"/></p>
    <p>自动登录<input type="checkbox"/></p>
    <p>记住密码<input type="checkbox"/></p>
    <input type="submit" value="登录"/>
</form>

这里写图片描述

9、列表框(select)
option标签为选项,size属性指定显示行数


<select name="月份" size="1">
<option value="January">一月</option>
<option value="February">二月</option>
<option value="March">三月</option>
<option value="April">四月</option>
<option value="May">五月</option>
<option value="June">六月</option>
<option value="July">七月</option>
<option value="August">八月</option>
<option value="September">九月</option>
<option value="October">十月</option>
<option value="November">十一月</option>
<option value="December">十二月</option>
</select>

这里写图片描述

10、多行文本域(textarea)
cols属性设置最大显示列数,rows属性设置最大显示行数

<textarea name="文本域" cols="30" rows="10"></textarea>

这里写图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值