接触HTML和CSS心得体会

时间:2023-03-09 13:31:24
接触HTML和CSS心得体会

1.HTML

它负责网页的三个要素之中的结构;

HTML使用标签的形式来标识网页中的不同组成部分

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>This is a Title</title>
</head>
<body>
<!-- html1中的标题标签:h1-h6 -->
<!-- h强调的是重要性 -->
<h1>This is the first Title</h1>
<h2>This is the second Title</h2>
<h3>This is the third Title</h3>
<h4>This is the fourth Title</h4>
<h5>This is the fifth Title</h5>
<h6>This is the sixth Title</h6> <!-- 换行 -->
<br/>
<!-- 分割线 -->
<hr/>
safe
<hr/> <!--
ul:unordered list:                         
                             1.在HTML文件中,可以利用成对的<ul></ul>标记来插入无序列表,中间的列表项标签<li></li>(list-items)用来定义列表项序列
                             2.使用无序列表标签ul的type属性(使用CSS的list-style来代替)。用户可以指定出现在列表项前的项目符号的样式,其取值以及相应的符号样式如
          -->

          <ul>
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ul> </body>
</html>  
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!--
在html中使用form标签创建一个表单
action:代表要跳转到的目标地址 -->
<form action="table.html">
用户名:<input type="text" name="username" value="张三"/><br/>
密码:<input type="password" name="pass" ><br/>
<!-- html中的单选是通过name属性值来区分是否是同一组的 -->
性别:<input type="radio" name="sex"/>男<input type="radio" name="sex"/>女<br/>
爱好:<input type="checkbox" name="hobby" value="yu"/>羽毛球<input type="checkbox" name="hobby" value="basketball"/>篮球<input type="checkbox" name="hobby" value="football"/>足球<br/>
籍贯:
<!-- 对于select下拉列表而言,name属性和value属性是分开的 -->
<select name="address">
<option value="beijing">北京 </option>
<option value="shanghai">上海</option>
<option value="tianjin">天津</option>
</select> <br/>
<input type="submit" name="Submit"/>
</form> </body>
</html>

  

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!--
img标签用于加载图片
alt:表示图片未正常加载的时候需要显示的信息
src:图片的路径
相对路径:表示的是相对于当前文件所在目录的路径
1)和当前文件在同一目录下
2)图片所在的目录和当前文件在同一文件夹
3)图片所在的目录是在当前文件的上一级或上级
绝对路径: http:// -->
</body>
</html>

  

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 内部样式表 -->
<style type="text/css">
p{
color:red;
}
#sss{
color:pink;
}''
.ds{
font-size:20px;
}
</style>
</head>
<body>
<!-- 不建议将表现和构建写在一起
W3C建议将,骨架(html),表现(css),行为(js)三者分离开来
-->
<!-- 行内样式表 -->
<p>
床前明月光,<br/>
疑是地上霜,<br/>
举头望明月,<br/>
低头思故乡。<br/>
</p>
<!-- id:属性在整个html页面中必须是唯一的 -->
<p id="sss" class="ds">
我是什么颜色的?
</p>
<p id="sss" class="ds">
我是什么颜色的?
</p>
</body>
</html>