轻松学HTML--day1

最新推荐文章于 2024-08-07 19:16:33 发布

稳健的不二少年

最新推荐文章于 2024-08-07 19:16:33 发布

阅读量237

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/i_like1ac/article/details/103094995

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.我的第一个HTML文件

/*   1.<p>表示段落
     2.<h1>表示标题
     3.<br/>单标签表示换行
     4.<hr/>单标签表示分割线
*/
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<h1>title1</h1>
	<p>
  	hello world!
    </p>
    <br/>
    <hr/>
	<h2>title2</h2>
	<p>
  	l like code
    </p>
	<h3>title3</h3>
	<h4>title4</h4>
	<h5>title5</h5>
</body>
</html>

2.a标签的使用

//使用a标签，并将文字转换成链接，将文字放在a标签中间即可
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
     <a href="https://www.baidu.com">百度</a>
     <p>
     	<a href="https://ww.baidu.com">我喜欢</a>
     	<a href="https://www.163.com">编程</a>
     </p>
     <h1><a href="https://www.sina.com">title</a></h1>
</body>
</html>

3.编写网页的title

//title放在head中
<!DOCTYPE html>
<html>
<head>
	<title>稳健的不二少年</title>
</head>
<body>
     <a href="https://www.baidu.com">百度</a>
     <p>
     	<a href="https://ww.baidu.com">我喜欢</a>
     	<a href="https://www.163.com">编程</a>
     </p>
     <h1><a href="https://www.sina.com">title</a></h1>
</body>
</html>

4.编写注释

//<!--   -->来表示注释
<!--这是注释-->

5.引入图片

/*
..表示上一级目录
.当前所在文件夹
通过相对路径和绝对路径来访问图片
相对路径以文件名(.或者..)开头，绝对路径以/根目录开头
可以添加图片的常宽高属性
*/
<!DOCTYPE html>
<html>
<head>
	<title>稳健的不二少年</title>
</head>
<body>
	 <!--这是注释-->
	 <img src="1.jpg"alt="请点击"/>
	 <br/>
	 <img src="/Users/wangqiang/Desktop/8.jpg"alt="w"width="100px"height="100px">
     <br/>
     <a href="https://www.baidu.com">百度</a>
     <p>
     	<a href="https://ww.baidu.com">我喜欢</a>
     	<a href="https://www.163.com">编程</a>
     </p>
     <h1><a href="https://www.sina.com">title</a></h1>
</body>
</html>

6.编写表格

/*
<tr>表示行，<td>表示列
<table>里面只能包含<tr>
<tr>包含<td>
border为添加边框属性
*/
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<table border="5">
		<tr>
			<td>队伍</td>
			<td>姓名</td>
			<td>球衣号码</td>
		</tr>
		<tr>
			<td>皇家马德里</td>
			<td>c罗</td>
			<td>9</td>
		</tr>
		<tr>
			<td>巴塞罗那</td>
			<td>梅西</td>
			<td>10</td>
		</tr>
	</table>

</body>
</html>

7.编写列表

/*
<ul>表示无序列表，<li>表示列表的元素
<ol>表示有序序列
<dl>表示自定义序列，<dd>表示自定义序列的样式
*/
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<ul>
		<li>l</li>
		<li>like</li>
		<li>code</li>
	</ul>

	<ol>
		<li>l</li>
		<li>like</li>
		<li>code</li>
	</ol>

	<dl>
		<dt>l</dt>
		<dd>我!</dd>
		<dt>like</dt>
		<dd>喜欢!</dd>
		<dt>code</dt>
		<dd>编码!</dd>

</body>
</html>

8.编写表单

/*
<label>标签中的for表示与哪一个input关联,需要在input里面添加id属性
id与for保持一致
   <label for="name-input">name</label>
   <input id="name-input"type="text" name="">

&nbsp;表示空格

<input>中的name属性，表示选项之间是否有关联
<input>中的type=password表示为验证密码
<input>中的type=radio表示为单选
<input>中的type=checkbox表示为多选
<input>中的type=submit表示为提交按钮，value为按钮的名称
<form>中的action后加URL表示提交的数据给后台
<button>表示为普通按钮
*/
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<form action="http://www.baidu.com">
		<label for="name-input">name</label>
		<input id="name-input"type="text"/>
         
        <input type="password"/>
        <label for="h-1">&nbsp;&nbsp;看电视</label>
        <input type="radio" name="单选"id="h-1">
        <label for="h-2">&nbsp;&nbsp;踢足球</label>
        <input type="radio" name="单选"id="h-2">
        <label for="h-3">&nbsp;&nbsp;打篮球</label>
        <input type="radio" name="单选"id="h-3">

        <label for="h1-1">&nbsp;&nbsp;吃饭</label>
        <input type="checkbox" name="多选",id="h1-1">
        <label for="h1-1">&nbsp;&nbsp;睡觉</label>
        <input type="checkbox" name="多选",id="h1-1">
        <label for="h1-1">&nbsp;&nbsp;打豆豆</label>
        <input type="checkbox" name="多选",id="h1-1">

        <input type="submit" value="提交">
	</form>
    <button onclick="javascript:window.location='https://www.baidu.com'">普通按钮</button>
</body>
</html>

稳健的不二少年

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
轻松学HTML--day1

1.我的第一个HTML文件/* 1.<p>表示段落 2.<h1>表示标题 3.<br/>单标签表示换行 4.<hr/>单标签表示分割线*/<!DOCTYPE html><html><head> <title></title></head&...
复制链接

扫一扫

专栏目录