web学习记录

最新推荐文章于 2024-09-11 10:49:17 发布

qq_49468606

最新推荐文章于 2024-09-11 10:49:17 发布

阅读量365

点赞数

分类专栏： java 文章标签： html web

本文链接：https://blog.csdn.net/qq_49468606/article/details/108722562

版权

java 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

学习目标：
学习内容：
学习产出：
一、网页的组成部分？
二、HTML语法
三、常用标签

学习目标：

15天掌握web基本开发（第一天）

学习内容：

1、网页的组成部分

2、HTML语法

3、常用标签

学习产出：

1、技术笔记 15 遍
2、CSDN 技术博客 15 篇

一、网页的组成部分？

1、结构html：Hyper Text Markup Language
（超文本标记语言）
2、表现css：Cascading Style Sheets（层叠样式表）
3、行为javaScript(jQuery)

二、HTML语法

1、HTML有两种标签：①有开始有结束标签②自结束标签
2、HTML标签不区分大小
3、HTML标签可以嵌套，但不能交叉嵌套
4、HTML标签必须正确关闭
5、HTML属性必须有值，且要加双引号
6、HTML注释不能嵌套

三、常用标签

1、标题标签

语法：h1-h6

2、div标签

语法：<div></div>
作用：布局

3、段落标签

语法：<p></p>
作用：每个结束会自动换行

3、转义字义

1.英语空格：&nbsp;
2.中文空格：&emsp;
3.大于号：&gt;
4.小于号：&lt;
5.版权号：&copy;

4、列表

①有序

<ol>
		<li></li>
</ol>

②无序

<ul>
		<li></li>
</ul>

5、插入图片

<img src="图片路径名" target="鼠标悬停时提示文本" 
alt="文件不能显示时替代文本"/>
//假如要访问上一级： ../

6、超链接

<a href="跳转链接路径" target="链接以什么方式
（_self自页面|_blank新建页面）">可以嵌套其他标签
</a>

7、表格

<table>
	<tr>(行)内容
		<th></th>(列头,字体加粗)|<td></td>(列内容)
	</tr>
</table>

例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<table border="1">
		<tr>
			<th>11</th>
			<th>12</th>
			<th>13</th>
			<th>14</th>
		</tr>
		<tr>
			<td>21</td>
			<td>22</td>
			<td>23</td>
			<td>24</td>
		</tr>
		<tr>
			<td>31</td>
			<td>32</td>
			<td>33</td>
			<td>44</td>
		</tr>
	</tabale>
</body>
</html>

结果：
跨行：rowspan
跨列：colspan

8、表单

<form action="表单提交路径" method="提交方式（get|post比较安全）">
				<input>
				<select>
					<option></option>
				</select>
</form>
input标签中的属性
			type表单项的类型:
			text|password|radio|checkbox|reset|submit  
				file文件域
				hidden隐藏域
			name名称：无name，就无法提交该数据
			value值：text|password默认值，sumbit按钮的文本值
			checked: radio&checkbox:默认选中
			id:唯一

例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录界面</title>
</head>
<body>
	<form action="#">
	帐号：<input type="text" name="username"/><br/><br/>
	密码：<input type="password" name="pwd"/><br/><br/>
	
	性别：<input type="radio" name="gender" value="man" checked="checked"/>男
	    <input type="radio" name="gender" value="woman" />女<br/><br/>
	    
	爱好：<input type="checkbox" name="hobby" value="basketball" checked="checked"/>篮球
        <input type="checkbox" name="hobby" value="football" />足球
	    <input type="checkbox" name="hobby" value="volleyball" />排球<br/><br/>
	    
	喜欢的明星：<select name="star">
				<option value="zs">张三</option>
				<option value="ls">李四</option>
				<option value="ww">王五</option>
				
			</select><br/><br/>
		<input type="reset">
		<input type="submit" value="登录">
	</form>
</body>
</html>